<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">
            {{x.testing_seat}}
            <button mat-icon-button (click)="openDialog(x)">
              <mat-icon>event_seat</mat-icon>
            </button>
          </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> รหัสนักศึกษา </th>
          <td mat-cell *matCellDef="let x"> {{x.student_code}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล </th>
          <td mat-cell *matCellDef="let x"> {{x.examinee_full_name}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ศูนย์สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.branch_name_th}} </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="7">
          <th mat-header-cell *matHeaderCellDef> รหัสวิชาที่สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> วันที่สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="9">
          <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="10">
          <th mat-header-cell *matHeaderCellDef> สถานะ </th>
          <td mat-cell *matCellDef="let x"> {{x.test_status_name}}</td>
        </ng-container>
        <ng-container matColumnDef="11">
          <th mat-header-cell *matHeaderCellDef> ย้ายวันสอบ </th>
          <td mat-cell *matCellDef="let x">
            <button class="add-button" *ngIf="isAvailable(x)" (click)="changeExamDay(x)">ย้าย</button>
          </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>
</div>
