<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"  class="xl:w-full w-screen" matSort>
<!--        <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="student_code" >
          <th mat-header-cell *matHeaderCellDef mat-sort-header> รหัสผู้สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.student_code}} </td>
        </ng-container>
        <ng-container matColumnDef="examinee_full_name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อ-นามสกุล </th>
          <td mat-cell *matCellDef="let x"> {{x.examinee_full_name}} </td>
        </ng-container>
        <ng-container matColumnDef="branch_name_th">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ศูนย์สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.branch_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="testing_field_name_th">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> สนามสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_field_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="testing_room_name_th">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ห้องสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_room_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="testing_seat">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ที่นั่งสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_seat}} </td>
        </ng-container>
        <ng-container matColumnDef="subject_code"r>
          <th mat-header-cell *matHeaderCellDef mat-sort-header> รหัสวิชาที่สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="testing_datetime">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> วันที่สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} </td>
        </ng-container>

        <ng-container matColumnDef="period_id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Section </th>
          <td mat-cell *matCellDef="let x"> {{x.period_id}} ({{x.start_time}}) </td>
        </ng-container>

        <ng-container matColumnDef="testing_register_approved">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ยืนยันข้อมูล </th>
          <td mat-cell *matCellDef="let x">
            {{x.testing_register_approved? 'ยืนยันแล้ว' : 'ยังไม่ยืนยัน'}}
          </td>
        </ng-container>
<!--        <ng-container matColumnDef="0">-->
<!--          <th mat-header-cell *matHeaderCellDef> เปลี่ยนสถานที่สอบ </th>-->
<!--          <td mat-cell *matCellDef="let x">-->
<!--            <button mat-icon-button (click)="openDialogChangeRoom(x)">-->
<!--              <mat-icon>meeting_room</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 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
