<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]="userList">
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef style="width:15%; text-align: center;"> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index" style="text-align: center;"> {{this.getIndex(i)}} </td>
        </ng-container>
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef style="width:30%"> ชื่อ Login </th>
          <td mat-cell *matCellDef="let x"> {{x.login_name}} </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef style="width:40%"> ชื่อ-นามสกุล </th>
          <td mat-cell *matCellDef="let x"> {{x.display_name}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef style="text-align: center; width: 5%;"> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div class="flex justify-center">
              <button mat-icon-button (click)="onEdit(x.app_user_id)">
                <mat-icon>create</mat-icon>
              </button>
              &nbsp;
              <button mat-icon-button (click)="onDelete(x.app_user_id)">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
