<div class="main">
  <div class="card">
    <div class="flex flex-row justify-between">
      <h1 class="title">แสดงผลรายการค้นหา</h1>
      <div>
        <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]="testingInfoList" style="width: 125%;">
        <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.testing_information_name}} </td>
        </ng-container>
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef> รหัสรอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_information_code}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> ภาคเรียน </th>
          <td mat-cell *matCellDef="let x"> {{x.academic_semester_code}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ปีการศึกษา </th>
          <td mat-cell *matCellDef="let x"> {{x.academic_year_code}} </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> 	วันที่เริ่มต้น-สิ้นสุด </th>
          <td mat-cell *matCellDef="let x"> {{x.registration_start_datetime | thaidate}} - {{x.registration_end_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="9">
          <th mat-header-cell *matHeaderCellDef> 	จำนวนวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.count_subject}} </td>
        </ng-container>
        <ng-container matColumnDef="10">
          <th mat-header-cell *matHeaderCellDef> 	สถานะรอบสอบ </th>
          <td mat-cell *matCellDef="let x">
            <div *ngIf="x.is_open === true">
              เปิดรอบสอบแล้ว
            </div>
            <div *ngIf="x.is_open === false">
              ปิดรอบสอบแล้ว
            </div>
            <div *ngIf="x.is_open === null">
              กำลังสร้าง
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> ผู้สร้าง </th>
          <td mat-cell *matCellDef="let x"> {{x.created_by}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> 	วันที่สร้างข้อมูล </th>
          <td mat-cell *matCellDef="let x"> {{x.created_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button mat-icon-button (click)="view.emit(x.testing_information_uid)" *ngIf="role | role: roleConfig.SET_INFO_EXAM">
                <mat-icon>visibility</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
      </table>
      <mat-paginator
        class="flex"
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 25 , 100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
