<form [formGroup]="form">
  <h1 class="title">ค้นหา</h1>
  <div class="main">
    <div class="flex flex-row justify-between">
        <div class="flex flex-col w-48% ">
          <label>รหัส</label>
          <input nospec formControlName="app_role_code" oninput="value = value.toUpperCase()" readonly>
        </div>

        <div class="flex flex-col w-48%">
          <label>ชื่อสิทธิ์</label>
          <input nospec formControlName="app_role_name_en" oninput="value = value.toUpperCase()">
        </div>
    </div>
  </div>
  <br>
  <div class="main">
    <div class="flex justify-between">
      <h1 class="title">เพิ่มเมนู</h1>
      <label><input type="checkbox" class="form-checkbox rounded text-pink-500" (change)="addAllPerm($event.target.checked)"> แสดงทุกเมนู </label>
    </div>
    <div class="flex justify-between">
      <div class="flex flex-col w-48%">
        <label>ค้นหาเมนู</label>
        <input #permi type="text" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let x of object | searchAuto : permi.value : 'app_object_name_th'" [value]="x.app_object_name_th" (click)="setCurrentObject(x)">
            {{x.app_object_name_th}}
          </mat-option>
        </mat-autocomplete>
      </div>
      <div class="flex flex-col justify-center">
        <label>&nbsp;</label>
        <div class="flex flex-row">
          <mat-icon class="text-green-500" (click)="addObject()">add_circle_outline</mat-icon>
        </div>
      </div>
    </div>
    <!-- <h1 class="title">เพิ่มสิทธิ์</h1> -->
    <ng-container formArrayName="app_securities">
      <ng-container *ngFor="let x of form['controls']['app_securities']['controls']; let i = index; let first = first" [formGroupName]="i">
        <div class="flex flex-row justify-between">
          <div class="flex flex-col w-48%">
            <label>สิทธิ์การเข้าถึงเมนู</label>
            <select formControlName="app_object_id">
              <!-- <option [value]="null">เลือก</option> -->
              <option *ngFor="let x of object" [ngValue]="x.app_object_id">
                {{x.app_object_name_th}}
              </option>
            </select>
          </div>

          <div class="flex flex-col w-48%">
            <label>เงื่อนไขสิทธิ์</label>
            <select formControlName="app_permission_id">
              <!-- <option [value]="null">เลือก</option> -->
              <option *ngFor="let x of perm" [ngValue]="x.app_permission_id">
                {{x.app_permission_name_th}}
              </option>
            </select>
          </div>

          <div class="flex flex-col justify-center">
            <label>&nbsp;</label>
            <div class="flex flex-row">
              <mat-icon class="text-green-500" (click)="add()">add_circle_outline</mat-icon>
              <mat-icon [ngClass]="first? 'opacity-0':'text-red-500'" (click)="first? '' : remove(i)">remove_circle_outline</mat-icon>
            </div>

          </div>
        </div>
      </ng-container>
    </ng-container>
  </div>
  <br>
  <div class="flex flex-row justify-center sm:justify-end">
    <button class="search-button mr-1" (click)="save()" [disabled]="form.invalid">บันทึก</button>
    <button class="clear-button" (click)="cancel()">ยกเลิก</button>
  </div>

</form>
 <pre *ngIf="!isHideForm">{{form.getRawValue() | json}}</pre>
