<h1 class="title">ค้นหา</h1>
<div class="main">
  <div class="flex flex-col justify-between sm:flex-row">
    <div class="flex flex-col sm:w-48% w-full">
      <label>ชื่อรอบการสอบ</label>
      <input type="text" [(ngModel)]="query.testing_information_name" />
      <label>รหัสรอบสอบ</label>
      <input type="text" [(ngModel)]="query.testing_information_code" />
    </div>

    <div class="flex flex-col sm:w-48% w-full">
      <label>ภาคเรียน</label>
      <input type="text" [(ngModel)]="query.academic_semester_code" />
      <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 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>
