<mat-card id="audit" *ngIf="auditId">
  <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>{{auditId}}</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">Open All Sections</button>
      <button mat-stroked-button color="primary">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>
    <p class="text-align-center">{{audit.completeText}}</p>
  </section>

  <section *ngFor="let requirement of audit.requirements">
    <h4>{{requirement.requirementName}}</h4>
    <p>{{requirement.status.status}} - {{requirement.status.status}}</p>

    <div *ngFor="let contentType of requirement.requirementLinesGroupedByContentType">
      <h5>{{contentType.contentType}}</h5>

      <p *ngFor="let line of contentType.lines">{{line}}</p>
    </div>
  </section>

  <section *ngIf="audit.bottomText.length > 0">
    <p *ngFor="let text of audit.bottomText" class="text-align-center pre-wrap">{{text}}</p>
  </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>