<h1 class="title">ค้นหาวิชาสอบเพื่อแจ้งเตือนของรอบ {{testingInfoData.testing_information_name}}</h1>
<div class="main">
  <div class="grid grid-cols-12 gap-1">
    <div class="flex flex-col col-span-3">
      <label>วิชาสอบ</label>
      <input #res type="text" [matAutocomplete]="auto1" [(ngModel)]="query.subject_uid">
      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayTestInfor.bind(this)">
        <mat-option *ngFor="let x of subjectListSend | searchAuto : res.value : 'subject_name_th'"
                    [value]="x.subject_uid">
          {{x.subject_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>

    <div class="flex flex-col col-span-3">
      <label>วันเริ่มต้น</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker" [(ngModel)]="query.start_date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>

    <div class="flex flex-col col-span-3">
      <label>วันสิ้นสุด</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker1" [(ngModel)]="query.end_date">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
    </div>

    <div class="flex flex-row col-span-3 items-center justify-end mt-2">
      <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
      <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
    </div>

  </div>

</div>
<!--<pre>-->
<!--  {{query | json}}-->
<!--</pre>-->
