<br>
  <div class="card">
    <div class="flex flex-row justify-between">
      <h1 class="title">แสดงผลรายการค้นหา</h1>
    </div>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="enrollmentData">
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef> ชื่อ - นามสกุล </th>
          <td mat-cell *matCellDef="let x"> {{x.full_name}} </td>
        </ng-container>
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> รอบสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_information_name}} </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> ค่าธรรมเนียม </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_fee}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ  </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button class="search-button" *ngIf="x.is_pay_later === true" (click)="onPay(x.user_testing_register_uid)">
                รับเงิน
              </button>
              <button class="add-button"  style="width: 150px" *ngIf="x.is_pay_later === false" (click)="onPrint(x.user_testing_register_uid)">
                Reprint ใบเสร็จ
              </button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
      </table>
      <mat-paginator
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 25 , 100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
