<div class="main">
  <mat-card>
    <mat-card-content>
      <div class="flex flex-wrap justify-between">
        <div>
          แสดงผลการค้นหา
        </div>
        <div>
          <button mat-raised-button [ngClass]="selection.selected.length  == 0 ? 'copy-button' : 'copy-button-active'" (click)="openCopydialog()" [disabled]="selection.selected.length == 0">Copy รายการ</button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table mat-table [dataSource]="testingcenterList" style="width: 125%;" matSort>

          <!-- Checkbox Column -->
          <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>
<!--              <mat-checkbox (change)="$event ? masterToggle() : null"-->
<!--                            [checked]="selection.hasValue() && isAllSelected()"-->
<!--                            [indeterminate]="selection.hasValue() && !isAllSelected()"-->
<!--                            [aria-label]="checkboxLabel()">-->
<!--              </mat-checkbox>-->
            </th>
            <td mat-cell *matCellDef="let row">
              <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null"
                            [checked]="selection.isSelected(row)"
                            [aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </td>
          </ng-container>

<!--          <ng-container matColumnDef="position">-->
<!--            <th mat-header-cell *matHeaderCellDef> No. </th>-->
<!--            <td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>-->
<!--          </ng-container>-->

          <ng-container matColumnDef="academic_year_name_th">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ปีการศึกษา </th>
            <td mat-cell *matCellDef="let element"> {{element.academic_year_name_th}} </td>
          </ng-container>

          <ng-container matColumnDef="academic_semester_name_th">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ภาคการศึกษา </th>
            <td mat-cell *matCellDef="let element"> {{element.academic_semester_name_th}} </td>
          </ng-container>

          <ng-container matColumnDef="branch_name_th" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อศูนย์สอบ </th>
            <td mat-cell *matCellDef="let element"> {{element.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 element"> {{element.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 element"> {{element.testing_room_name_th}} </td>
          </ng-container>

          <ng-container matColumnDef="total_row">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> จำนวนแถว </th>
            <td mat-cell *matCellDef="let element"> {{element.total_row}} </td>
          </ng-container>

          <ng-container matColumnDef="total_seat">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> จำนวนที่นั่งรวม </th>
            <td mat-cell *matCellDef="let element"> {{element.total_seat}} </td>
          </ng-container>

          <ng-container matColumnDef="created_by" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ผู้สร้าง </th>
            <td mat-cell *matCellDef="let x"> {{x.created_by}} </td>
          </ng-container>
          <ng-container matColumnDef="created_datetime">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> 	วันที่สร้างข้อมูล </th>
            <td mat-cell *matCellDef="let x">
              <div *ngIf="(x.created_datetime | thaidate) !== '-'">
                {{x.created_datetime | thaidate}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef> </th>
            <td mat-cell *matCellDef="let element">
              <div>
                <button mat-icon-button>
                  <mat-icon
                            [routerLink]="['/manage-test-center/edit/',element.testing_center_uid]">create</mat-icon>
                </button>
                <button mat-icon-button (click)="onDelete(element.testing_center_uid)">
                  <mat-icon>close</mat-icon>
                </button>
                <button mat-icon-button (click)="onViewAvailableSeat.emit(element.testing_center_uid)">
                  <mat-icon>apps</mat-icon>
                </button>
              </div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="column"></tr>
          <tr mat-row *matRowDef="let row; columns: column; let i = index"></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 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
      </div>
    </mat-card-content>
  </mat-card>
</div>


