<div id="audits-mobile">
  <div>
    <mat-card class="audit-card" *ngFor="let audit of metadata" role="group">
      <div fxLayout="row" fxLayoutAlign="space-between start">
        <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80">
          <div fxLayout="column" fxLayoutAlign="start start">
            <!-- School -->
            <mat-card-title>{{ audit.darsInstitutionCodeDescription }} </mat-card-title>
            <!-- Program -->
            <mat-card-subtitle>{{ audit.darsDegreeProgramCode }}</mat-card-subtitle>
          </div>
        </div>
        <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
          <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
            <button mat-raised-button>
              <mat-icon class="download-audit-icon" aria-label="Download Audit PDF">vertical_align_bottom</mat-icon>
            </button>
          </div>
        </div>
      </div>

      <mat-card-content>
          <!-- Plan -->
          Plan: {{ audit.degreePlannerPlanName }} <br />
          <!-- Honors -->
          Honors: {{ audit.darsHonorsOptionDescription }} <br />
          <!-- Courses -->
          Courses: {{ audit.whichEnrolledCoursesIncluded }}
      </mat-card-content>

      <mat-card-footer>
          <!-- Status -->
        Status: {{ audit.darsStatusOfDegreeAuditRequest }} <br />
        Run {{ audit.darsAuditRunDate | date:'short' }} | Exp. xxx

      </mat-card-footer>
    </mat-card>
  </div>
</div>