<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" style="width: 125%;" matSort>
        <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="testing_information_name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อรอบการสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_information_name}} </td>
        </ng-container>
        <ng-container matColumnDef="testing_information_code">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> รหัสรอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_information_code}} </td>
        </ng-container>
        <ng-container matColumnDef="academic_semester_code">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ภาคเรียน </th>
          <td mat-cell *matCellDef="let x"> {{x.academic_semester_code}} </td>
        </ng-container>
        <ng-container matColumnDef="academic_year_code">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ปีการศึกษา </th>
          <td mat-cell *matCellDef="let x"> {{x.academic_year_code}} </td>
        </ng-container>
        <ng-container matColumnDef="10">
          <th mat-header-cell *matHeaderCellDef> 	วันที่เริ่มต้น-สิ้นสุด </th>
          <td mat-cell *matCellDef="let x"> {{x.start_datetime | thaidate}} - {{x.end_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="count_subject">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 	จำนวนวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.count_subject}} </td>
        </ng-container>
        <ng-container matColumnDef="is_open">
          <th mat-header-cell *matHeaderCellDef  mat-sort-header> 	สถานะ </th>
          <td mat-cell *matCellDef="let x">
            <span *ngIf="x.is_open == true">เปิดรอบแล้ว</span>
            <span *ngIf="x.is_open == false">ปิดรอบสอบแล้ว</span>
            <span *ngIf="x.is_open == null">กำลังสร้าง</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div *ngIf="x.is_open == true">
              <button class="delete-button" (click)="onClose(x.testing_information_uid)">ปิดรอบสอบ</button>
            </div>
<!--            <div *ngIf="x.is_open == false">-->
<!--              <button class="confirm-button">เปิดรอบสอบ</button>-->
<!--            </div>-->
          </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> ผู้ปิดรอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.updated_by}} </td>
        </ng-container>
        <ng-container matColumnDef="9">
          <th mat-header-cell *matHeaderCellDef> วันที่ </th>
          <td mat-cell *matCellDef="let x"> {{x.updated_datetime | thaidate}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" *ngIf="!reload" [colSpan]="column.length">
            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
          </td>
          <td class="mat-cell"  *ngIf="reload"  [colSpan]="column.length">
            ไม่มีข้อมูล
          </td>
        </tr>
      </table>
      <mat-paginator
        class="flex"
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 25  , 100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
