<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" style="width: 125%;" matSort>
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{this.getIndex(i)}} </td>
        </ng-container>
        <ng-container matColumnDef="subject_code">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> รหัสวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="subject_name_th">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อวิชา (TH) </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="subject_name_en">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ชื่อวิชา (EN) </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name_en}} </td>
        </ng-container>
        <ng-container matColumnDef="subject_type_name_th">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ประเภทวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_type_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="responsible_faculty_name_th">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> หน่วยงาน </th>
          <td mat-cell *matCellDef="let x"> {{x.responsible_faculty_name_th}} </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="status_id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> สถานะ </th>
          <td mat-cell *matCellDef="let x">
            <span *ngIf="x.status_id == 1">ใช้งาน</span>
            <span *ngIf="x.status_id == 2">ยกเลิก</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="is_use">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> มีข้อสอบ </th>
          <td mat-cell *matCellDef="let x">
            <span>{{x.is_use ? 'มี' : 'ไม่มี'}}</span>
          </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)="onEdit(x.subject_uid)">
                <mat-icon>create</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" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
