<div class="main">
  <div class="card">
    <h1 class="title">แสดงผลรายการค้นหา</h1>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="signatureList">
        <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.recipient_signature_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> Default </th>
          <td mat-cell *matCellDef="let x; let i = index">
              <mat-radio-button #button class="ml-3" [checked]="x.is_default" (click)="setDefault($event,i,button)"></mat-radio-button>
          </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> สถานะ </th>
          <td mat-cell *matCellDef="let x">
            <span *ngIf="x.status_id == 1">ใช้งาน</span>
            <span *ngIf="x.status_id == 2">ยกเลิก</span>
          </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)="onEdit.emit(x.recipient_signature_uid)">
                <mat-icon>create</mat-icon>
              </button>
              <button mat-icon-button (click)="onDelete.emit(x.recipient_signature_uid)">
                <mat-icon>close</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['1','2','3', '4', '5', '6', '7']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['1','2','3', '4', '5', '6', '7'];"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
