<h1 class="title">ค้นหา</h1>
<div class="main">
  <div class="flex flex-col sm:flex-row justify-between">
    <div class="flex flex-col sm:flex-row justify-between sm:w-48% w-full">
      <div class="flex flex-col w-full">
        <label>ชื่อรอบการสอบ</label>
        <input type="text" [(ngModel)]="query.testing_information_name">
      </div>
    </div>
    <div class="flex flex-col sm:flex-row justify-between sm:w-48% w-full">
      <div class="flex flex-col w-full sm:w-48%">
        <label>ภาคเรียน</label>
        <select [(ngModel)]="query.academic_semester_code">
          <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-full sm:w-48%">
        <label>ปีการศึกษา</label>
        <select [(ngModel)]="query.academic_year_code">
          <option *ngFor="let x of academicYearList" [ngValue]="x.academic_year_code">
            {{x.academic_year_code}}
          </option>
        </select>
      </div>
    </div>
  </div>
  <div class="flex flex-row justify-center sm:justify-end">
    <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
    <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
  </div>
</div>
