<form [formGroup]="form">
  <div class="main w-full flex flex-row">
    <div class="mr-8 flex flex-col">
      <label>&nbsp;</label>
      <span>{{index+1}}.</span>
    </div>
    <div class="w-full">
      <div class="grid grid-cols-12 gap-2">

        <div class="col-span-4">
          <div class="flex flex-col w-full">
            <label>ชื่อชุดข้อสอบ</label>
            <select [(ngModel)]="data" (ngModelChange)="onChange($event)" [ngModelOptions]="{standalone: true}">
              <option *ngFor="let x of category;" [ngValue]="x">
                {{x.question_category_name_th}}&nbsp;{{x.subject_information_name_th}}
              </option>
            </select>
          </div>
        </div>

        <div class="col-span-1">
          <div class="flex flex-col items-center w-full">
            <label>ปรนัย</label>
            <input style="text-align: center;" type="number" formControlName="total_question_porranai" readonly>
          </div>
        </div>

        <div class="col-span-1">
          <div class="flex flex-col items-center w-full">
            <label>อัตนัย</label>
            <input style="text-align: center;" type="number" formControlName="total_question_auttanai" readonly>
          </div>
        </div>

        <div class="col-span-1">
          <div class="flex flex-col items-center w-full">
            <label class="whitespace-nowrap overflow-ellipsis overflow-hidden text-center w-full">จำนวนข้อ</label>
            <input style="text-align: center;" type="number" formControlName="total_question" readonly>
          </div>
        </div>

        <div class="col-span-3">
          <div class="flex flex-col items-center w-full">
            <label class="whitespace-nowrap overflow-ellipsis overflow-hidden text-center w-full">เวลาในการทำข้อสอบ (นาที)</label>
            <input type="number" formControlName="exam_time" (input)="isMoreThan360($event)">
          </div>
        </div>
        <div class="flex justify-evenly flex-row mt-3 col-span-2">
          <div class="flex flex-col mr-2 w-full">
            <label class="text-xs">&nbsp;</label>
            <button class="add-button" style="min-width: 10px !important;" (click)="add()">เพิ่ม</button>
          </div>

          <div class="flex flex-col w-full">
            <label class="text-xs">&nbsp;</label>
            <button class="delete-button" style="min-width: 10px !important;" (click)="remove()" [disabled]="first">ลบ</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</form>
