<h1 class="title">กำหนดการตัดเกรด ของรอบสอบ {{data?.testing_information_name}}</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]="subjectList">
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button  mat-icon-button (click)="onEdit(x.subject_uid)">
                <mat-icon class="text-green-500">add</mat-icon>
              </button>
              <button *ngIf="x.grading_status == 1" mat-icon-button (click)="gradeList(x.subject_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">
            <ng-container *ngIf="x.grading_status == 1">
              {{x.grading_characteristic == 1? 'กำหนดช่วงคะแนน' : 'กำหนดช่วงเปอร์เซ็นต์'}}
            </ng-container>
            <span *ngIf="x.grading_status != 1">-</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> ประเภทเกรด </th>
          <td mat-cell *matCellDef="let x"> {{x.grading_type == 1? 'ทั่วไป (เช่น A-F)' : '-'}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> วันที่ประกาศผลสอบ </th>
          <td mat-cell *matCellDef="let x">
            <ng-container *ngIf="x.grading_status == 1">
              {{x.announcement_type == 2? x.announcement_date : 'ประกาศผลหลังจากส่งข้อสอบ'}}
            </ng-container>
            <span *ngIf="x.grading_status != 1">-</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> ชื่อวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> รหัสเงื่อนไข </th>
          <td mat-cell *matCellDef="let x"> {{x.grading_code}} </td>
        </ng-container>
        <ng-container matColumnDef="9">
          <th mat-header-cell *matHeaderCellDef> กำหนดเกณฑ์ </th>
          <td mat-cell *matCellDef="let x">
            <span *ngIf="x.grading_status == 1">
              <span class="material-icons text-green-500">
                check_circle
              </span>
            </span>
            <span *ngIf="x.grading_status != 1"></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, 100]" [pageSize]="100" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
