<h1 class="title">ค้นหา</h1>
<div class="main">
  <div class="flex flex-row justify-between">
    <div class="flex flex-col lg:w-48% w-full">
      <label>คณะที่รับผิดชอบ</label>
      <input #res type="text" [(ngModel)]="query.faculty_uid" [matAutocomplete]="auto1">
      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFacultyname.bind(this)" (optionSelected)='setDepartment($event.option.value)'>
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of faculty | searchAuto : res.value : 'faculty_name_th'"
                    [value]="x.faculty_uid"
        >
          {{x.faculty_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>
    <div class="flex flex-col lg:w-48% w-full">
      <label>ภาควิชา</label>
      <select [(ngModel)]="query.department_uid">
        <option [ngValue]="null" disabled>
          {{filteredDepartmentList.length == 0? 'กรุณาเลือกคณะที่รับผิดชอบก่อน' : '-กรุณาเลือกภาควิชา-'}}
        </option>
        <option *ngFor="let x of filteredDepartmentList" [ngValue]="x.department_uid">
          {{x.department_name_th}}
        </option>
      </select>
    </div>
  </div>
  <div class="flex flex-row justify-end">
    <button class="search-button mr-1" (click)="onSearch()" [disabled]="this.faculty.length === 0">ค้นหา</button>
    <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
    <button class="add-button"(click)="onAdd()">เพิ่มรายการ</button>
  </div>
</div>
