<form [formGroup]="empSearchForm">
  <div class="modal-header-style">
    <span class="modal-header-style">Choose Employee</span>
    <button type="button" class="close-style" aria-label="Close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body-style">
    <div class="mb-2" style="height:400px;">
      @if (setting?.label01Req) {
        <div class="mb-2">
          <span for="criteria" class="{{setting?.label01Req===1? 'required' : ''}}">{{setting?.label01||'Search Criteria'}}:</span>
          <br />
          <div class="input-group">
            <span class="input-group-text white-background"><i class="fa fa-search button-search" aria-hidden="true"></i></span>
            <input type="text" placeholder="{{setting?.label01||'Search Criteria'}}" id="criteria" formControlName="criteria" maxlength="50" (change)="clearGrid()" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && f.criteria.errors }">
            @if (submitted && f.criteria.errors) {
              <div class="invalid-feedback">
                @if (f.criteria.errors.required) {
                  <div>{{setting?.label01||'Search Criteria'}} is required.</div>
                }
                @if (f.criteria.errors.pattern) {
                  <div>{{setting?.label01||'Search Criteria'}} is invalid format.</div>
                }
                @if (f.criteria.errors.minlength) {
                  <div>Minimum length of {{setting?.label01||'Search Criteria'}} is {{f.criteria.errors.minlength.requiredLength}}</div>
                }
                @if (f.criteria.errors.maxlength) {
                  <div>Maximum length of {{setting?.label01||'Search Criteria'}} is {{f.criteria.errors.maxlength.requiredLength}}</div>
                }
              </div>
            }
          </div>
        </div>
      }

      <div class="mb-2">
        <button (click)="loadEmployees()" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-raised ui-button-text-only">
          <span class="ui-button-text-only ui-c"><i class="fa fa-refresh button-refresh" aria-hidden="true"></i>&nbsp;&nbsp;Load data</span>
        </button>
      </div>

      <div class="mb-1">
        <kendo-grid [data]="items"
          [selectable]="{enabled:true}"
          style="max-height:308px;"
          class="grid-font-900">
          <kendo-grid-command-column [style]="{'text-align':'center'}" class="cell-padding-command" [width]="40">
            <ng-template kendoGridCellTemplate let-item="dataItem">
              <button class="k-button button-accept" kendoGridEditCommand title="Click to select" (click)="okay(item)"><i class="fa fa-check button-accept" aria-hidden="true"></i></button>
            </ng-template>
          </kendo-grid-command-column>
          @if (setting?.label02Req) {
            <kendo-grid-column field="code" title="{{setting?.label02||'Code'}}" [width]="90" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
          }
          @if (setting?.label03Req) {
            <kendo-grid-column field="name" title="{{setting?.label03||'Name'}}" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
          }
        </kendo-grid>
      </div>

      @if (errors) {
        <div class="error-in-modal">
          {{errors}}
        </div>
      }
    </div>
  </div>
</form>
