<!-- <h1 class="title">ค้นหา</h1> -->
<div class="main">
  <div class="flex flex-col justify-between sm:flex-row">
    <div class="flex flex-col w-48%">
      <label>รอบสอบ</label>
      <input #name type="text" [(ngModel)]="query.testing_information_uid" [matAutocomplete]="auto1">
      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="display.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of testingInfo | searchAuto : name.value: 'testing_information_name'" [value]="x.testing_information_uid">
          {{x.testing_information_name}}
      </mat-option>
      </mat-autocomplete>
    </div>
  </div>

  <div class="flex flex-col justify-between sm:flex-row">
    <div class="flex flex-col w-48%">
      <label>ศูนย์สอบ</label>
      <input #name2 type="text" [(ngModel)]="query.branch_uid" [matAutocomplete]="auto2">
      <mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayBranch.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of branch | searchAuto : name2.value: 'branch_name_th'" [value]="x.branch_uid">
          {{x.branch_name_th}}
      </mat-option>
      </mat-autocomplete>
    </div>

    <div class="flex flex-col sm:w-48% w-full">
      <label>วันที่สอบ</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker" disabled [(ngModel)]="query.testing_date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker disabled="false"></mat-datepicker>
      </mat-form-field>
    </div>
  </div>
  <div class="flex flex-row justify-center sm:justify-end sm:items-end">
    <button class="search-button mr-1" (click)="onSearch()">ยืนยัน</button>
  </div>
</div>
