<div class="main">
  <div class="card">
    <div class="flex flex-row justify-between">
      <h1 class="title">แสดงผลรายการค้นหา</h1>
    </div>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="subjectList">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{i+1}} </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> วิชาสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name}} </td>
        </ng-container>
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef> วันที่สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> จำนวนนักศึกษา </th>
          <td mat-cell *matCellDef="let x"> {{x.count_waiting}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> แจ้งเตือนล่าสุด </th>
          <td mat-cell *matCellDef="let x"> {{x.last_noti_date | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button mat-icon-button>
                <mat-icon (click)="opendialog(x)">visibility</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
        <!-- <tr class="mat-row " *matNoDataRow>
          <td class="mat-cell" [colSpan]="column.length">
            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
          </td>
        </tr> -->
      </table>
      <mat-paginator
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 25  , 100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
