<div class="main">
  <div class="card">
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="testingInformationList">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> ศูนย์สอบ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{x.branch_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> สนามสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_field_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_room_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> วันที่สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> Section </th>
          <td mat-cell *matCellDef="let x"> {{x.period_id}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> จำนวนผู้สมัคร </th>
          <td mat-cell *matCellDef="let x"> {{x.total_register}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let x">
            <button class="add-button" (click)="changeRoom(x)">&nbsp;เปลี่ยนห้องสอบ&nbsp;</button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7'];"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>


