<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]="gradeList">
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button mat-icon-button (click)="onView(x.grading_uid)">
                <mat-icon>search</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <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.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> ชื่อวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ลักษณะการตัดเกรด </th>
          <td mat-cell *matCellDef="let x"> {{x.grading_characteristic == 1? 'กำหนดช่วงคะแนน' : 'กำหนดช่วงเปอร์เซ็นต์'}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> ประเภทเกรด </th>
          <td mat-cell *matCellDef="let x"> ทั่วไป (เช่น A-F)  {{x.announcement_type == 1 ? 'ประกาศผลหลังจากส่งข้อสอบ' : 'รอประกาศผลสอบ'}}</td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> รหัสเงื่อนไข </th>
          <td mat-cell *matCellDef="let x"> {{x.grading_code}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> สถานะ </th>
          <td mat-cell *matCellDef="let x">
            <span *ngIf="x.is_use == 1">
              <span class="material-icons text-green-500">
                check_circle
              </span>
            </span>
          </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>
