<div class="main">
  <div class="card">
    <div class="flex flex-row justify-between">
      <div class="flex flex-row justify-between">
        <h1 class="title">รายการห้องสอบ</h1>
      </div>



      <div>
                <button class="add-button mr-1" (click)="onExcel()">Excel</button>

<!--        <button mat-icon-button [matMenuTriggerFor]="menu">-->
<!--          <mat-icon>more_vert</mat-icon>-->
<!--        </button>-->
        <mat-menu #menu="matMenu">
          <button mat-menu-item>
            <mat-icon>dialpad</mat-icon>
            <span>Redial</span>
          </button>
          <button mat-menu-item disabled>
            <mat-icon>voicemail</mat-icon>
            <span>Check voice mail</span>
          </button>
          <button mat-menu-item>
            <mat-icon>notifications_off</mat-icon>
            <span>Disable alerts</span>
          </button>
        </mat-menu>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="centerList">
        <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.branch_code}} </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.testing_field_code}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> ชื่อสนามสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_field_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_room_name_th}} </td>
        </ng-container>
<!--        <ng-container matColumnDef="5">-->
<!--          <th mat-header-cell *matHeaderCellDef> ผู้คุมสอบ </th>-->
<!--          <td mat-cell *matCellDef="let x"> {{x.testing_auth_name}} </td>-->
<!--        </ng-container>-->
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> สุ่มที่นั่งสอบ </th>
          <td mat-cell *matCellDef="let x">
            <mat-checkbox
              [checked]="x.is_random_seat"
              disabled="true"
            >
            </mat-checkbox></td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> จัดการที่นั่งสอบ </th>
          <td mat-cell *matCellDef="let element;let i = index">
            <button mat-icon-button>
              <mat-icon (click)="openDialogexam(element.testing_center_uid,i)">edit</mat-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
      </table>
      <mat-paginator
        [pageSize]="100"
        [pageSizeOptions]="[5, 10, 25  , 100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
