<form [formGroup]="usersForm">
  <div kendoDialogContainer></div>

  @if (setting?.label15Req) {
  <div class="mb-1 col-lg-4 col-md-6 col-sm-12">
    <span class="{{setting?.label15Req===1? 'required' : ''}}">{{setting?.label15||'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?.label15||'Search Criteria'}}" id="criteria" formControlName="criteria" maxlength="50" (change)="clearData()" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.criteria.errors }">
      @if (submitted && f.criteria.errors)
      {
      <div class="invalid-feedback">
        @if (f.criteria.errors.required)
        {
        <div>{{setting?.label15||'Search Criteria'}} is required.</div>
        }
        @if (f.criteria.errors.pattern)
        {
        <div>{{setting?.label15||'Search Criteria'}} is invalid format.</div>
        }
        @if (f.criteria.errors.minlength)
        {
        <div>Minimum length of {{setting?.label15||'Search Criteria'}} is {{f.criteria.errors.minlength.requiredLength}}</div>
        }
        @if (f.criteria.errors.maxlength)
        {
        <div>Maximum length of {{setting?.label15||'Search Criteria'}} is {{f.criteria.errors.maxlength.requiredLength}}</div>
        }
      </div>
      }
    </div>
  </div>
  }

  <div class="mb-3">
    <button (click)="loadData()" 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>

  @if (setting?.label16Req) {
  <div class="mb-2">
    <span>{{setting?.label16||'Existing data'}}:</span>
    <br />
    <kendo-grid id="grdUsers"
                [data]="gridView"
                [resizable]="true"
                [skip]="state.skip"
                [sort]="state.sort"
                [selectable]="true"
                [loading]="loading"
                [rowClass]="rowCallback"
                [pageSize]="state.take"
                [sortable]="{allowUnsort:true,mode:'single'}"
                [pageable]="{buttonCount:5,info:true,type:type,pageSizes:pageSizes,previousNext:true}"
                (add)="addHandler()"
                (edit)="editHandler($event)"
                (remove)="removeHandler($event)"
                (dataStateChange)="dataStateChange($event)"
                class="grid-font-900">
      @if (canAdd)
      {
      <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand [svgIcon]="icons.add" class="button-add" title="Add {{setting?.label17||'User'}}">
          <b>{{setting?.label17||'User'}}</b>
        </button>
      </ng-template>
      }

      <kendo-grid-command-column class="cell-padding-command" [width]="colWidth" [style]="{'text-align':'center','background-color':'#ffffff'}">
        <ng-template kendoGridCellTemplate let-item="dataItem">
          @if (canEdit)
          {
          <button kendoGridEditCommand [svgIcon]="icons.edit" class="button-edit" title="Edit {{setting?.label17||'User'}}"></button>
          }
          @if (viewMode)
          {
          <button kendoGridEditCommand [svgIcon]="icons.info" class="button-info" title="View {{setting?.label17||'User'}}"></button>
          }
          @if (canDelete)
          {
          <button kendoGridRemoveCommand [svgIcon]="icons.delete" class="button-delete" title="Delete {{setting?.label17||'User'}}"></button>
          }
          @if (canResetPwd)
          {
          <button class="k-button k-rounded-md k-button-solid-base k-button-solid k-grid-button button-grid-padding" title="Reset Password" (click)="resetPwd(item)"><i class="fa-icon-margin button-edit k-icon fa fa-refresh" aria-hidden="true"></i></button>
          }
          @if ((canEdit && item.isLocked))
          {
          <button class="k-button k-rounded-md k-button-solid-base k-button-solid k-grid-button button-grid-padding" title="Unloack User" (click)="unlockUser(item)"><i class="fa-icon-margin button-accept k-icon fa fa-unlock" aria-hidden="true"></i></button>
          }
          @if (canEdit)
          {
          <button class="k-button k-rounded-md k-button-solid-base k-button-solid k-grid-button button-grid-padding" title="View Auth Code" (click)="viewAuthCode(item)"><i class="fa-icon-margin button-info k-icon fa fa-info-circle " aria-hidden="true"></i></button>
          }
        </ng-template>
      </kendo-grid-command-column>
      <kendo-grid-column field="loginId" title="{{setting?.label01||'Login Id'}}" [width]="150" class="cell-padding" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      <kendo-grid-column field="userName" title="{{setting?.label02||'User Name'}}" [width]="250" class="cell-padding" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      <kendo-grid-column field="designation" title="{{setting?.label19||'designation'}}" [width]="200" class="cell-padding" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      @if (setting?.label03Req)
      {
      <kendo-grid-column field="mobileNo" title="{{setting?.label03||'Mobile No'}}" media="lg" class="cell-padding" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      }
      @if (setting?.label04Req)
      {
      <kendo-grid-column field="emailAddress" title="{{setting?.label04||'Email Address'}}" media="lg" class="cell-padding" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      }
      <kendo-grid-column field="statusDetail" title="{{setting?.label18||'Status'}}" [width]="90" class="cell-padding" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      @if (setting?.label22Req)
      {
      <kendo-grid-column field="seqId" title="{{setting?.label22||'Seq Id'}}" [width]="70" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'center'}"></kendo-grid-column>
      }
    </kendo-grid>
  </div>
  }
</form>
