<h1 class="title">กำหนดการสุ่มคำถาม ของวิชา {{data?.subject_name_th}}</h1>
<!-- <div class="main">
  <div class="flex flex-col justify-between sm:flex-row">
    <div class="flex flex-col sm:w-33% w-full">
      <label>ค้นหารายวิชา</label>
      <input type="text" (keyup)="applyFilter($event)">
    </div>
  </div>
</div> -->
<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]="randomList">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button  mat-icon-button (click)="onView(x.random_question_uid)">
                <mat-icon>search</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{this.getIndex(i)}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> รหัสวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ชื่อวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> ลักษณะการสุ่ม </th>
          <td mat-cell *matCellDef="let x">
            {{randomType(x.random_type)}}
          </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> วิธีการสุ่มข้อสอบ </th>
          <td mat-cell *matCellDef="let x">
            {{randomQuestionType(x.random_question_type)}}
          </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> จำนวน </th>
          <td mat-cell *matCellDef="let x"> {{x.total_set}} บท / {{x.total_question? x.total_question : 0}} ข้อ  </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> รหัสเงื่อนไข </th>
          <td mat-cell *matCellDef="let x"> {{x.random_question_code? x.random_question_code : '-'}} </td>
        </ng-container>
        <ng-container matColumnDef="9">
          <th mat-header-cell *matHeaderCellDef style="text-align: center;"> สถานะ </th>
          <td mat-cell *matCellDef="let x" style="text-align: center;">
            <span *ngIf="x.is_use">
              <span class="material-icons text-green-500">
                check_circle
              </span>
            </span>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7','8','9']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7','8','9'];"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
