<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]="testingInfomationList" style="width: 125%;" matSort>
                <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="testing_information_code" >
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> รหัสรอบสอบ </th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_information_code}} </td>
                </ng-container>
                <ng-container matColumnDef="testing_information_name" >
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อรอบการสอบ </th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_information_name}} </td>
                </ng-container>
                <ng-container matColumnDef="type_of_examinee" >
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ประเภทผู้สมัคร </th>
                    <td mat-cell *matCellDef="let x"> {{x.type_of_examinee}} </td>
                </ng-container>
                <ng-container matColumnDef="total_seat" >
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> เก้าอี้ทั้งหมด </th>
                    <td mat-cell *matCellDef="let x"> {{x.total_seat}} </td>
                </ng-container>
                <ng-container matColumnDef="no_imported">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> จำนวนที่นำเข้าแล้ว </th>
                    <td mat-cell *matCellDef="let x"> {{x.no_imported}} </td>
                </ng-container>
                <ng-container matColumnDef="academic_semester_code" >
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ภาคเรียน </th>
                    <td mat-cell *matCellDef="let x"> {{x.academic_semester_code}} </td>
                </ng-container>
                <ng-container matColumnDef="academic_year_code">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ปีการศึกษา </th>
                    <td mat-cell *matCellDef="let x"> {{x.academic_year_code}} </td>
                </ng-container>
                <ng-container matColumnDef="created_by">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ผู้สร้าง </th>
                    <td mat-cell *matCellDef="let x"> {{x.created_by}} </td>
                </ng-container>
                <ng-container matColumnDef="created_datetime" >
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> 	วันที่สร้างข้อมูล </th>
                    <td mat-cell *matCellDef="let x"> {{x.created_datetime | thaidate}} </td>
                </ng-container>
                <ng-container matColumnDef="11">
                    <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
                    <td mat-cell *matCellDef="let x">
                        <div>
                            <button mat-icon-button (click)="onView(x.testing_information_uid)">
                                <mat-icon>visibility</mat-icon>
                            </button>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="column"></tr>
                <tr mat-row *matRowDef="let row; columns: column"></tr>
                <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell" *ngIf="!reload" [colSpan]="column.length">
                        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    </td>
                    <td class="mat-cell"    *ngIf="reload"    [colSpan]="column.length">
                        ไม่มีข้อมูล
                    </td>
                </tr>
            </table>
            <mat-paginator
                [pageSizeOptions]="[5,10,25,100]" showFirstLastButtons></mat-paginator>
        </div>
    </div>
</div>
