
<div class="main">
  <div class="card">
    <div class="flex flex-wrap justify-between">
      <h1 class="title">แสดงผลรายการค้นหา</h1>
      <div>
        <button mat-raised-button
                [ngClass]="selection.selected.length  == 0 ? 'cancel-button' : 'cancel-button-active'"
                (click)="confirmCancel()"
                [disabled]="selection.selected.length == 0"
        >
          ยกเลิกรายการ
        </button>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table mat-table [dataSource]="studentRegisterList">
        <ng-container matColumnDef="1">
          <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="2">
          <th mat-header-cell *matHeaderCellDef> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{i+1}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> รหัสผู้เข้าสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.student_code}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล </th>
          <td mat-cell *matCellDef="let x"> {{x.full_name}}</td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> ref1 </th>
          <td mat-cell *matCellDef="let x"> {{x.ref1}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> จำนวนเงิน </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_fee | number}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> วันที่ลงทะเบียน </th>
          <td mat-cell *matCellDef="let x"> {{x.created_datetime | thaidate}} </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>


