  <div class="card">
    <h1 class="title">แสดงผลรายการค้นหา</h1>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="waitList" style="width: 125%;">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> รหัสนักศึกษา </th>
          <td mat-cell *matCellDef="let x;"> {{x.student_code}} </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล </th>
          <td mat-cell *matCellDef="let x"> {{x.full_name}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> ศูนย์สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.branch_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> รหัสวิชาสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> วันสอบเดิม </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> Section เดิม </th>
          <td mat-cell *matCellDef="let x"> {{x.period_id}} ({{x.start_time}}) </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef>
            <span class="text-red-500">วันที่ขอสอบใหม่</span>
          </th>
          <td mat-cell *matCellDef="let x"> {{x.new_testing_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef>
            <span class="text-red-500">Section</span>
          </th>
          <td mat-cell *matCellDef="let x"> {{x.new_period_id}} ({{x.new_start_time}}) </td>
        </ng-container>
        <ng-container matColumnDef="9">
          <th mat-header-cell *matHeaderCellDef> สาเหตุ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <mat-icon style="color: #2D9CDB;" (click)="reason(x)">find_in_page</mat-icon>
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="10">
          <th mat-header-cell *matHeaderCellDef> </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button class="add-button" (click)="checkAvailable(x)">&nbsp;ตรวจสอบที่นั่งว่าง&nbsp;</button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
