<mat-card id="audit" *ngIf="audit">
  <header id="audit-header" class="no-horizontal-padding">
    <div class="audit-metadata">
      <div>
        <p>{{audit.header.preparedLabel}}: {{audit.header.preparedDate}}</p>
        <p>{{audit.header.studentName}}</p>
        <p>{{audit.header.darsDegreeProgramCodeLabel}}: {{audit.header.darsDegreeProgramCode}}</p>
      </div>

      <div class="text-align-right">
        <p>0123456789</p>
        <p>{{audit.header.darsCatalogYearTermLabel}}: {{audit.header.darsCatalogYearTerm}}</p>
        <p *ngIf="audit.header.darsAlternateCatalogYearTerm1">
          {{audit.header.darsAlternateCatalogYearTerm1Label}}: {{audit.header.darsAlternateCatalogYearTerm1}}
        </p>
      </div>
    </div>

    <h3 class="text-align-center">
      {{audit.header.clientDefinedMessage}}
      <br />
      {{audit.header.degreeProgramTitle1}}
      <br />
      {{audit.header.degreeProgramTitle2}}
    </h3>

    <div class="audit-section-controles">
      <button mat-stroked-button color="primary" (click)="openAllRequirements()">Open All Sections</button>
      <button mat-stroked-button color="primary" (click)="closeAllRequirements()">Close All Sections</button>
    </div>
  </header>

  <section class="audit-section" class="audit-top-section">
    <div *ngIf="audit.topSection.academicPlansSection && audit.topSection.academicPlansSection.planList.length > 0">
      <h4>Academic Plans:</h4>
      <ng-contrainer *ngFor="let plan of audit.topSection.academicPlansSection.planList">
        <p class="audit-academic-plan">{{plan.planTypeLabel}}: {{plan.declareDate}} {{plan.planCodeNumber}} {{plan.planCodeDescription}}</p>
      </ng-contrainer>
    </div>

    <div *ngIf="audit.topSection.advisorSection && audit.topSection.advisorSection.advisorNames">
      <h4>{{audit.topSection.advisorSection.advisorLabel}}:</h4>

      <ng-container *ngFor="let name of audit.topSection.advisorSection.advisorNames">
        <p class="audit-advisor-name">{{name}}</p>
      </ng-container>
    </div>

    <div *ngIf="audit.topSection.degreesSection && audit.topSection.degreesSection.degrees.length > 0">
      <h4>{{audit.topSection.degreesSection.label}}:</h4>
      <div *ngFor="let degree of audit.topSection.degreesSection.degrees" class="audit-degree">
        <p class="audit-degree-awarded">Awarded: {{degree.awardedDate}}</p>
        <p class="audit-degree-major">Major: {{degree.major}} {{degree.degreeCode}}</p>
      </div>
    </div>
  </section>

  <section class="audit-section audit-credit-tables">
    <!-- TODO Figure out how to get this to look like a matTable -->
      <table mat-table [dataSource]="formatHighSchoolUnitData(audit.topSection.highSchoolUnitsSection.units)">
        <caption>HS Units</caption>

        <tr mat-header-row *matHeaderRowDef="highSchoolUnitsSection"></tr>
        <tr mat-row *matRowDef="let row; columns: highSchoolUnitsSection;"></tr>

        <ng-container matColumnDef="LANG">
          <th mat-header-cell *matHeaderCellDef>Lang</th>
          <td mat-cell *matCellDef="let courses">{{courses.LANG}}</td>
        </ng-container>

        <ng-container matColumnDef="MATH">
          <th mat-header-cell *matHeaderCellDef>Math</th>
          <td mat-cell *matCellDef="let courses">{{courses.MATH}}</td>
        </ng-container>

        <ng-container matColumnDef="SCIENCE">
          <th mat-header-cell *matHeaderCellDef>Science</th>
          <td mat-cell *matCellDef="let courses">{{courses.SCIENCE}}</td>
        </ng-container>

        <ng-container matColumnDef="SOC STUD">
          <th mat-header-cell *matHeaderCellDef>Soc Stud</th>
          <td mat-cell *matCellDef="let courses">{{courses['SOC STUD']}}</td>
        </ng-container>
      </table>

      <table mat-table [dataSource]="audit.topSection.advancedStandingCreditsSection.advanceStandingCredits">
        <caption>{{audit.topSection.advancedStandingCreditsSection.sectionLabel}}</caption>
        <tr mat-header-row *matHeaderRowDef="advancedStandingCredits"></tr>
        <tr mat-row *matRowDef="let row; columns: advancedStandingCredits;"></tr>
        <tr mat-footer-row *matFooterRowDef="advancedStandingCredits"></tr>

        <ng-container matColumnDef="dateValue">
          <th mat-header-cell *matHeaderCellDef>Date</th>
          <td mat-cell *matCellDef="let course">{{course.dateValue}}</td>
          <td mat-footer-cell *matFooterCellDef class="bold">Total</td>
        </ng-container>

        <ng-container matColumnDef="typeValue">
          <th mat-header-cell *matHeaderCellDef>Type</th>
          <td mat-cell *matCellDef="let course">{{course.typeValue}}</td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="degreeCreditsValue">
          <th mat-header-cell *matHeaderCellDef class="text-align-right">Deg</th>
          <td mat-cell *matCellDef="let course" class="text-align-right">{{course.degreeCreditsValue}}</td>
          <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection.totals.degreeCreditsValue}}</td>
        </ng-container>

        <ng-container matColumnDef="courseCreditsValue">
          <th mat-header-cell *matHeaderCellDef class="text-align-right">Crse</th>
          <td mat-cell *matCellDef="let course" class="text-align-right">{{course.courseCreditsValue}}</td>
          <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection.totals.courseCreditsValue}}</td>
        </ng-container>
      </table>
  </section>

  <section class="audit-section">
    <mat-accordion multi="true" hideToggle="true" #requirements>

      <!-- START OF REQUIREMENT -->
      <ng-container *ngFor="let requirement of audit.requirements; trackBy: trackReq">

        <!-- START OF REQUIREMENT TEXT -->
        <ng-container *ngIf="requirement.status.status === 'NONE'; else requirementTemplate">
          <div *ngFor="let contentType of requirement.requirementContents" class="content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}">
            <p *ngFor="let line of contentType.lines">{{line}}</p>
          </div>
        </ng-container>
        <!-- END OF REQUIREMENT TEXT -->

        <!-- START OF ACCORDION REQUIREMENT -->
        <ng-template #requirementTemplate>
          <mat-expansion-panel #requirementPanel [expanded]="true">

            <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto">
              <mat-panel-title class="requirement-title status-{{requirement.status.status === 'OK' ? 'ok' : 'no'}}">
                <div class="requirement-icon-outer">
                    <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
                    <mat-icon *ngIf="requirement.status.status === 'OK'" class="requirement-icon ok-icon">check_circle</mat-icon>
                    <mat-icon *ngIf="requirement.status.status === 'NO'" class="requirement-icon no-icon">cancel</mat-icon>
                </div>
                <div>
                  <p>
                    <ng-container *ngFor="let line of getRequirementTitle(requirement)">
                      {{line}}
                    </ng-container>
                  </p>
                </div>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <div *ngFor="let reqBody of getRequirementBody(requirement); trackBy: trackByIndex">

              <div class="content-type content-type-{{reqBody.contentType}}" matTooltip="{{reqBody.contentType}}" matTooltipPosition="left">
                <ng-container [ngSwitch]="reqBody.template">

                  <ng-container *ngSwitchCase="'courses'">
                      <table style="width: 100%" mat-table [dataSource]="asCourseBody(reqBody).subRequirementCourses">
                          <caption>Applicable academic work</caption>
                          <tr mat-header-row *matHeaderRowDef="courseTerms"></tr>
                          <tr mat-row *matRowDef="let row; columns: courseTerms;"></tr>


                          <ng-container matColumnDef="term">
                            <th mat-header-cell *matHeaderCellDef>Term</th>
                            <td mat-cell *matCellDef="let course">{{course.term}}</td>
                          </ng-container>

                          <ng-container matColumnDef="course">
                            <th mat-header-cell *matHeaderCellDef>Course</th>
                            <td mat-cell *matCellDef="let course">{{course.course}}</td>
                          </ng-container>

                          <ng-container matColumnDef="credits">
                            <th mat-header-cell *matHeaderCellDef>Credits</th>
                            <td mat-cell *matCellDef="let course">{{course.credits}}</td>
                          </ng-container>

                          <ng-container matColumnDef="grade">
                            <th mat-header-cell *matHeaderCellDef>Grade</th>
                            <td mat-cell *matCellDef="let course">{{course.grade}}</td>
                          </ng-container>

                          <ng-container matColumnDef="title">
                            <th mat-header-cell *matHeaderCellDef>Course Title</th>
                            <td mat-cell *matCellDef="let course">{{course.courseTitle}}</td>
                          </ng-container>

                          <ng-container matColumnDef="note">
                            <th mat-header-cell *matHeaderCellDef>Course Note</th>
                            <td mat-cell *matCellDef="let course">{{course.courseNote}}</td>
                          </ng-container>
                      </table>
                  </ng-container>

                  <ng-container *ngSwitchCase="'lines'">
                      <p
                        *ngFor="let line of asLineBody(reqBody).lines; trackBy: trackByIndex"
                        [innerHTML]="line | auditLine:reqBody.contentType"></p>
                  </ng-container>

                </ng-container>
              </div>
            </div>

          </mat-expansion-panel>
        </ng-template>
        <!-- END OF ACCORDION REQUIREMENT -->

      </ng-container>
      <!-- END OF REQUIREMENT -->

      <!-- AUDIT COURSE KEY / LEGEND -->
      <mat-expansion-panel #requirementPanel [expanded]="true" id="legend-panel">
        <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto">
          <mat-panel-title class="requirement-title">
            <div class="requirement-icon-outer">
                <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
            </div>
            <div><p>Audit Legend</p></div>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <cse-audit-legend></cse-audit-legend>
      </mat-expansion-panel>

    </mat-accordion>
  </section>
</mat-card>