
<h1 class="title">ค้นหา</h1>
<div class="main">
  <div class="flex flex-row justify-between">
    <div class="flex flex-col w-1/4 pr-2">
      <label>ปีการศึกษา</label>
      <select [(ngModel)]="query.academic_year_name_th">
        <option *ngFor="let x of academicYearList" [ngValue]="x.academic_year_name_th">
          {{x.academic_year_code}}
        </option>
      </select>
    </div>

    <div class="flex flex-col w-1/4 pr-2">
      <label>ภาคการศึกษา</label>
      <select [(ngModel)]="query.academic_semester_name_th">
        <option *ngFor="let x of academicSemList" [ngValue]="x.academic_semester_code">
          {{x.academic_semester_name_th}}
        </option>
      </select>
    </div>

    <div class="flex flex-col w-1/2">
      <label>ชื่อศูนย์สอบ</label>
      <input type="text" [(ngModel)]="query.branch_name_th">
    </div>
  </div>

  <div class="flex flex-row justify-between">
    <div class="flex flex-col w-1/2 pr-2">
      <label>ชื่อสนามสอบ</label>
      <input type="text" [(ngModel)]="query.testing_field_name_th">
    </div>

    <div class="flex flex-col w-1/2">
      <label>ห้องสอบ</label>
      <input type="text" [(ngModel)]="query.testing_room_name_th">
    </div>
  </div>

  <div class="flex flex-row justify-end">
    <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
    <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
    <button class="add-button" routerLink="/manage-test-center/add">เพิ่มรายการ</button>
  </div>
</div>



