<mat-card id="audit">
  <header class="no-horizontal-padding">
    <div class="audit-metadata">
      <div>
        <p>{{audit.header.preparedDate}}</p>
        <p>{{audit.header.name}}</p>
        <p>Program Code: {{audit.header.degreeProgram}}</p>
      </div>

      <div class="text-align-right">
        <p>{{metadata.darsDegreeAuditReportId}}</p>
        <p>{{audit.header.graduationDate}}</p>
        <p>{{audit.header.graduationDateLabel}}</p>
      </div>
    </div>

    <h3 class="text-align-center">
      {{audit.header.clientDefinedMessage}}
      <br />
      {{audit.header.title1}}
      <br />
      {{audit.header.title2}}
    </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>
    <p class="tight faded">This audit was run using values not reflected in your current status. Parameters used when submitting this audit request:</p>
    <br/>
    <p class="tight faded">Honors Processing: Keep current status.</p>
    <p class="tight faded">Courses Used: Using courses from Curse Guide Plan: (Plan name field blank in cobol program "stuinst.)</p>
  </section>

  <!-- <section *ngIf="audit.topText.length > 0">
    <p *ngFor="let text of audit.topText" class="text-align-center pre-wrap">{{text}}</p>
  </section> -->
  
  <section>
    <mat-accordion multi="true" #requirements>

      <!-- START OF REQUIREMENT -->
      <ng-container *ngFor="let requirement of audit.requirements">
        
        <!-- START OF REQUIREMENT TEXT -->
        <ng-container *ngIf="requirement.status.status === 'NONE'; else requirementTemplate">
          <pre *ngFor="let contentType of requirement.requirementLinesGroupedByContentType">
            <p *ngFor="let line of contentType.lines" class="text-align-center">{{line}}</p>
          </pre>
        </ng-container>
        <!-- END OF REQUIREMENT TEXT -->

        <!-- START OF ACCORDION REQUIREMENT -->
        <ng-template #requirementTemplate>
          <mat-expansion-panel>

            <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 *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 *ngFor="let line of getRequirementTitle(requirement)">{{line}}</p>
                </div>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <div *ngFor="let contentType of getRequirementBody(requirement)">
              
              <div class="content-type content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}" matTooltipPosition="left">
                <p *ngFor="let line of contentType.lines">{{line}}</p>
              </div>
            </div>

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

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

    </mat-accordion>
  </section>

  

  <!-- <section *ngIf="audit.bottomText.length > 0">
    <pre style="margin:auto;">
      <p *ngFor="let text of audit.bottomText">{{text}}</p>
    </pre>
  </section> -->

  <!-- Not sure where this info comes from? -->
  <!-- <section class="text-align-center">
    <h4 class="mat-h2 uppercase faded">At least one requirment has not been satisfied</h4>
    <p class="mat-h2 faded">For more information about undergraduate L&S program see:</p>
    <a href="#" mat-button color="primary">L&S Guide</a>
  </section> -->
</mat-card>