<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 type="text" [(ngModel)]="query.branch_name_th">
    </div>

    <div class="flex flex-col lg:w-48% w-full">
      <label>ภาค</label>
      <select [(ngModel)]="query.region_uid" (ngModelChange)="setProvince($event)">
        <option>
          -- เลือกภาค --
        </option>
        <option *ngFor="let x of regionMock" [value]="x.region_uid" >
          {{x.region_name_th}}
        </option>
      </select>
    </div>
  </div>
  <div class="flex flex-row justify-between">
    <div class="flex flex-col lg:w-48% w-full">
      <label>จังหวัด</label>
      <select [(ngModel)]="query.province_uid">
        <option>
          -- เลือกจังหวัด --
        </option>
        <option *ngFor="let x of provinceMock" [ngValue]="x.province_uid">
          {{x.province_name_th}}
        </option>
      </select>
    </div>
  </div>
  <div class="flex flex-row justify-end">
    <button class="search-button mr-1" (click)="onSearch()" [disabled]="datanotReady">ค้นหา</button>
    <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
    <button class="add-button"(click)="onAdd()">เพิ่มรายการ</button>
  </div>
</div>
