<section id="audit-legend">
  <!-- COURSE SYMBOLS TABLE -->
  <table mat-table [dataSource]="auditCourseSymbols">
    <caption>Course Symbols</caption>
    <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>

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

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>Description</th>
      <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
    </ng-container>
  </table>

  <!-- GRADE SYMBOLS TABLE -->
  <table mat-table [dataSource]="auditGradeSymbols">
    <caption>Grade Symbols</caption>
    <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>

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

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>Description</th>
      <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
    </ng-container>
  </table>

  <!-- REQUIREMENT INFO TABLE -->
  <table mat-table [dataSource]="auditReqInformation">
    <caption>Requirement / Sub-requirement Information</caption>
    <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>

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

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>Description</th>
      <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
    </ng-container>
  </table>

    <!-- Audit Exception SYMBOLS TABLE -->
    <table mat-table [dataSource]="auditExceptionSymbols">
      <caption>Exception Symbols</caption>
      <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>

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

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>Description</th>
        <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
      </ng-container>
    </table>
</section>