<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]="vdosList" 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_vdo_code">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> รหัสวิดีโอ </th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_vdo_code}} </td>
                </ng-container>
                <ng-container matColumnDef="testing_vdo_name_th">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อวิดีโอ </th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_vdo_name_th}} </td>
                </ng-container>
                <ng-container matColumnDef="default">
                    <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="vdo_name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อไฟล์ </th>
                    <td mat-cell *matCellDef="let x"> {{x.vdo_name}} </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="7">
                    <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
                    <td mat-cell *matCellDef="let x">
                        <div>
                            <button mat-icon-button (click)="onEdit(x.testing_vdo_uid)">
                                <mat-icon>create</mat-icon>
                            </button>
                            <!--                            <button mat-icon-button (click)="onView(x.testing_information_uid)" *ngIf="role | role: roleConfig.SET_INFO_EXAM">-->
                            <!--                                <mat-icon>visibility</mat-icon>-->
                            <!--                            </button>-->
                            <button mat-icon-button (click)="onDelete(x.testing_vdo_uid)">
                                <mat-icon>close</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
                class="flex"
                [pageSize]="5"
                [pageSizeOptions]="[5, 10, 25 , 100]" showFirstLastButtons>
            </mat-paginator>
        </div>
    </div>
</div>
