<div id="audits" class="dars-table-wrapper mat-body">
  <caption>
      <div>
          <h4 class="mat-h4">{{title}}</h4>
          <button mat-flat-button color="primary" aria-label="button" (click)="buttonClick.emit()">{{button}}</button>
      </div>
      <p>{{tagline}}</p>          
  </caption>

    <div *ngIf="(metadata | async).length <= 0" class="no-audits">
      <p>You don't have any {{title}}</p>
      <button mat-stroked-button color="primary" aria-label="button" (click)="buttonClick.emit()">{{button}}</button>
    </div>

    <table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">
    <!-- View Column -->
    <ng-container matColumnDef="view">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let audit">
        <button mat-stroked-button color="primary" [disabled]="audit.pending" (click)="openAudit.emit(audit)">View</button>
      </td>
    </ng-container>

    <!-- School Column -->
    <ng-container matColumnDef="school">
      <th mat-header-cell *matHeaderCellDef>School/College</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsInstitutionCodeDescription}}</td>
    </ng-container>

    <!-- Program Column -->
    <ng-container matColumnDef="program">
      <th mat-header-cell *matHeaderCellDef>Program of Study</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsDegreeProgramDescription}}</td>
    </ng-container>

    <!-- Honors Column -->
    <ng-container matColumnDef="honors">
      <th mat-header-cell *matHeaderCellDef>Honors Status</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsHonorsOptionDescription}}</td>
    </ng-container>

    <!-- Plan Column -->
    <ng-container matColumnDef="plan">
      <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
      <td mat-cell *matCellDef="let audit">{{audit.degreePlannerPlanName}}</td>
    </ng-container>

    <!-- Status Column -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Status</th>
      <td mat-cell *matCellDef="let audit">
        <div *ngIf="audit.darsStatusOfDegreeAuditRequest == 'Done' || audit.darsStatusOfDegreeAuditRequest.indexOf('Failed') > -1; else loading">
          <div>{{audit.darsStatusOfDegreeAuditRequest}}</div>
          <div>Run {{audit.darsAuditRunDate | date:'short'}}</div>
        </div>
        <ng-template #loading>
          <mat-progress-spinner mode="indeterminate" diameter="24"></mat-progress-spinner>
        </ng-template>
      </td>
    </ng-container>

    <!-- Status Column -->
    <ng-container matColumnDef="download">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let audit">
        <button mat-stroked-button>
          <mat-icon>vertical_align_bottom</mat-icon>
        </button>
      </td>
    </ng-container>

    <!-- Row definition -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSize]="5"></mat-paginator>
</div>