 <div class="main">
        <div class="flex flex-col justify-between sm:flex-row">
            <div class="flex flex-col    w-33%">
                <label>รหัสนักศึกษา</label>
                <input type="text" [(ngModel)]="query.student_code">
            </div>

            <div class="flex flex-col    w-33%">
                <label>ชื่อ-นามสกุล</label>
                <input type="text" [(ngModel)]="query.full_name">
            </div>

            <div class="flex flex-col    w-33%">
                <label>รหัสบัตรประชาชน</label>
                <input type="text" [(ngModel)]="query.examinee_card">
            </div>
        </div>
        <div class="flex flex-row justify-end items-end">
            <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
            <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
        </div>
    </div>
<br>
<div class="main">
    <h1 class="title">รายชื่อข้อมูลนักศึกษา</h1>
        <div class="overflow-x-auto">
            <table mat-table [dataSource]="studentList">
                <ng-container matColumnDef="1">
                    <th mat-header-cell *matHeaderCellDef> ลำดับ </th>
                    <td mat-cell *matCellDef="let x; let i = index"> {{this.getIndex(i)}} </td>
                </ng-container>
                <ng-container matColumnDef="2">
                    <th mat-header-cell *matHeaderCellDef> รหัสนักศึกษา </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_code}} </td>
                </ng-container>
                <ng-container matColumnDef="3">
                    <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล (TH) </th>
                    <td mat-cell *matCellDef="let x"> {{x.full_name}} </td>
                </ng-container>
                <ng-container matColumnDef="4">
                    <th mat-header-cell *matHeaderCellDef> รหัสบัตรประชาชน </th>
                    <td mat-cell *matCellDef="let x"> {{x.examinee_card}} </td>
                </ng-container>
                <ng-container matColumnDef="5">
                    <th mat-header-cell *matHeaderCellDef> ประเภทผู้สมัคร </th>
                    <td mat-cell *matCellDef="let x">{{x.candidate_type_uid | getDataId : candidateType:'candidate_type_uid' : 'candidate_type_name_th':''}}</td>
                </ng-container>
                <ng-container matColumnDef="6">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let x">
                        <div class="flex">
                            <button mat-icon-button (click)="edit(x.user_uid)">
                                <mat-icon>create</mat-icon>
                            </button>
                            &nbsp;
                            <button mat-icon-button (click)="remove(x.user_uid)">
                                <mat-icon>delete</mat-icon>
                            </button>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6']"></tr>
                <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6'];"></tr>
            </table>
            <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        </div>
        <!-- <div class="flex flex-row mt-2 w-full justify-end">
            <button class="search-button mr-1" (click)="save()">บันทึก</button>
            <button class="clear-button" (click)="clear()">ล้างตัวเลือก</button>
        </div> -->
</div>
