<form [formGroup]="edituserForm">
  @if (setting?.label01Req)
  {
  <div class="mb-2 col-lg-4 col-md-8 col-sm-12">
    <span class="{{setting?.label01Req===1?'required':''}}">{{setting?.label01||'Login Id'}}:</span>
    <br />
    <input type="text" formControlName="loginId" readonly maxlength="30" placeholder="{{setting?.label01||'Login Id'}}" class="form-control">
  </div>
  }

  @if (setting?.label20Req)
  {
  <div class="mb-1">
    <label for="isEmployee">
      <input type="checkbox" id="isEmployee" formControlName="isEmployee" />
      {{setting?.label20||'User is an Employee'}}
    </label>
  </div>
  }

  @if (setting?.label21Req)
  {
  <div class="mb-2 col-lg-4 col-md-8 col-sm-12">
    <span class="{{f.isEmployee.value? 'required' : ''}}">{{setting?.label21||'Employee'}}:</span>
    <br />
    <employee-control id="employeeId" formControlName="employeeId" [submitted]="submitted" [required]="f.isEmployee.value"></employee-control>
    @if (submitted && f.isEmployee.value && f.employeeId.errors)
    {
    <div class="invalid-feedback">
      {{setting?.label21||'Employee'}} is required.
    </div>
    }
  </div>
  }

  <fieldset class="mb-2 fs-pdng1 col-lg-4 col-md-8 col-sm-12">
    @if (setting?.label02Req)
    {
    <div class="mb-2 col-lg-12 col-md-12 col-sm-12">
      <span class="{{setting?.label02Req===1? 'required' : ''}}">{{setting?.label02||'User Name'}}:</span>
      <br />
      <input type="text" formControlName="username" maxlength="75" placeholder="{{setting?.label02||'User Name'}}" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }">
      @if (submitted && f.username.errors)
      {
      <div class="invalid-feedback">
        @if (f.username.errors.required)
        {
        <div>{{setting?.label02||'User Name'}} is required.</div>
        }
        @if (f.username.errors.pattern)
        {
        <div>{{setting?.label02||'User Name'}} is invalid format.</div>
        }
        @if (f.username.errors.minlength)
        {
        <div>Minimum length of {{setting?.label02||'User Name'}} is {{f.username.errors.minlength.requiredLength}}</div>
        }
        @if (f.username.errors.maxlength)
        {
        <div>Maximum length of {{setting?.label02||'User Name'}} is {{f.username.errors.maxlength.requiredLength}}</div>
        }
      </div>
      }
    </div>
    }

    @if (setting?.label19Req)
    {
    <div class="mb-2 col-lg-12 col-md-12 col-sm-12">
      <span class="{{setting?.label19Req===1?'required':''}}">{{setting?.label19||'Designation'}}:</span>
      <br />
      <input type="text" id="designation" formControlName="designation" maxlength="50" placeholder="{{setting?.label19||'Designation'}}" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.designation.errors }">
      @if (submitted && f.designation.errors)
      {
      <div class="invalid-feedback">
        @if (f.designation.errors.required)
        {
        <div>{{setting?.label19||'Designation'}} is required.</div>
        }
        @if (f.designation.errors.pattern)
        {
        <div>{{setting?.label19||'Designation'}} is invalid format.</div>
        }
        @if (f.designation.errors.minlength)
        {
        <div>Minimum length of {{setting?.label19||'Designation'}} is {{f.designation.errors.minlength.requiredLength}}</div>
        }
        @if (f.designation.errors.maxlength)
        {
        <div>Maximum length of {{setting?.label19||'Designation'}} is {{f.designation.errors.maxlength.requiredLength}}</div>
        }
      </div>
      }
    </div>
    }

    @if (setting?.label03Req)
    {
    <div class="mb-2 col-lg-12 col-md-12 col-sm-12">
      <span class="{{setting?.label03Req===1? 'required' : ''}}">{{setting?.label03||'Mobile Number'}}:</span>
      <br />
      <input type="text" formControlName="mobileNo" maxlength="15" (keypress)="keyPressEvent($event)" placeholder="{{setting?.label03||'Mobile Number'}}" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.mobileNo.errors }">
      @if (submitted && f.mobileNo.errors)
      {
      <div class="invalid-feedback">
        @if (f.mobileNo.errors.required)
        {
        <div>{{setting?.label03||'Mobile Number'}} is required.</div>
        }
        @if (f.mobileNo.errors.pattern)
        {
        <div>{{setting?.label03||'Mobile Number'}} is invalid format.</div>
        }
        @if (f.mobileNo.errors.minlength)
        {
        <div>Minimum length of {{setting?.label03||'Mobile Number'}} is {{f.mobileNo.errors.minlength.requiredLength}}</div>
        }
        @if (f.mobileNo.errors.maxlength)
        {
        <div>Maximum length of {{setting?.label03||'Mobile Number'}} is {{f.mobileNo.errors.maxlength.requiredLength}}</div>
        }
      </div>
      }
    </div>
    }

    @if (setting?.label04Req)
    {
    <div class="mb-1 col-lg-12 col-md-12 col-sm-12">
      <span class="{{setting?.label04Req===4? 'required' : ''}}">{{setting?.label04||'Email Address'}}:</span>
      <br />
      <input type="email" formControlName="emailAddress" maxlength="100" placeholder="{{setting?.label04||'Email Address'}}" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.emailAddress.errors }">
      @if (submitted && f.emailAddress.errors)
      {
      <div class="invalid-feedback">
        @if (f.emailAddress.errors.required)
        {
        <div>{{setting?.label04||'Email Address'}} is required.</div>
        }
        @if (f.emailAddress.errors.pattern)
        {
        <div>{{setting?.label04||'Email Address'}} is invalid format [;(semicolon) as separator].</div>
        }
        @if (f.emailAddress.errors.minlength)
        {
        <div>Minimum length of {{setting?.label04||'Email Address'}} is {{f.emailAddress.errors.minlength.requiredLength}}</div>
        }
        @if (f.emailAddress.errors.maxlength)
        {
        <div>Maximum length of {{setting?.label04||'Email Address'}} is {{f.emailAddress.errors.maxlength.requiredLength}}</div>
        }
      </div>
      }
    </div>
    }
  </fieldset>

  @if (setting?.label22Req)
  {
  <div class="mb-2 col-lg-2 col-md-6 col-sm-12">
    <span class="{{setting?.label22Req===1? 'required' : ''}}">{{setting?.label22||'Seq Id'}}:</span>
    <br />
    <kendo-numerictextbox id="seqId" formControlName="seqId" [spinners]="false" [format]="'0'" [step]="1" [min]="0" [max]="99999" placeholder="{{setting?.label22||'Seq Id'}}" [ngClass]="{ 'k-invalid': submitted && f.seqId.errors }"> </kendo-numerictextbox>
    @if (submitted && f.seqId.errors)
    {
    <div class="invalid-feedback">
      @if (f.seqId.errors.required)
      {
      <div>{{setting?.label22||'Seq Id'}} is required.</div>
      }
      @if (f.seqId.errors.min) {
      <div>Value can not be less than {{f.seqId.errors.min.min}}</div>
      }
      @if (f.seqId.errors.max)
      {
      <div>Value can not be greater than {{f.seqId.errors.max.max}}</div>
      }
    </div>
    }
  </div>
  }

  @if (setting?.label25Req)
  {
  <div class="mb-2">
    <div class="mb-2 form-check form-switch">
      <input type="checkbox" id="viewToAll" name="viewToAll" formControlName="viewToAll" class="form-check-input" />
      <label class="form-check-label" for="viewToAll">{{setting?.label25||'View to All'}}</label>
    </div>
  </div>
  }

  @if (setting?.label23Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="canUseAtnSys" name="canUseAtnSys" formControlName="canUseAtnSys" class="form-check-input" />
    <label class="form-check-label" for="canUseAtnSys">{{setting?.label23||'Can use Attendance system?'}}</label>
  </div>
  }

  @if (setting?.label07Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="dbOnStartup" name="dbOnStartup" formControlName="dbOnStartup" class="form-check-input" />
    <label class="form-check-label" for="dbOnStartup">{{setting?.label07||'Dashboard on Startup'}}</label>
  </div>
  }

  @if (setting?.label08Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="daMultiLogin" name="daMultiLogin" formControlName="daMultiLogin" class="form-check-input" />
    <label class="form-check-label" for="daMultiLogin">{{setting?.label08||'User can not Login from multiple devices'}}</label>
  </div>
  }

  @if (setting?.label09Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="status" name="status" formControlName="status" class="form-check-input" />
    <label class="form-check-label" for="status">{{setting?.label09||'Is active'}}</label>
  </div>
  }

  @if (setting?.label10Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="neverExpire" name="neverExpire" formControlName="neverExpire" class="form-check-input" (change)="eventCheck($event, 1)" />
    <label class="form-check-label" for="neverExpire">{{setting?.label10||'Password never expire'}}</label>
  </div>
  }

  @if (setting?.label11Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="accessStatus" name="accessStatus" formControlName="accessStatus" class="form-check-input" (change)="eventCheck($event, 2)" />
    <label class="form-check-label" for="accessStatus">{{setting?.label11||'User must change password at next Login'}}</label>
  </div>
  }

  @if (setting?.label12Req)
  {
  <div class="mb-2 form-check form-switch">
    <input type="checkbox" id="authReqAtlogin" name="authReqAtlogin" formControlName="authReqAtlogin" class="form-check-input" (change)="eventCheck($event, 3)" />
    <label class="form-check-label" for="authReqAtlogin">{{setting?.label12||'Authentication required at login'}}</label>
  </div>
  }

  @if (setting?.label13)
  {
  <div class="mb-2 col-lg-4 col-md-8 col-sm-12">
    <span class="{{required}}">{{setting?.label13||'Authentication Method'}}:</span>
    <br />
    <kendo-dropdownlist [data]="authMethods"
                        [textField]="'value'"
                        [valueField]="'id'"
                        formControlName="authMethod"
                        [required]="f.authReqAtlogin.value"
                        [ngClass]="{ 'k-invalid': submitted && (f.authReqAtlogin.value && this.f.authMethod.value.id<=0)}"
                        (valueChange)="generate($event)">
    </kendo-dropdownlist>
    @if (submitted && f.authReqAtlogin.value && this.f.authMethod.value.id<=0)
    {
    <div class="invalid-feedback">
      <div>{{setting?.label13||'Authentication Method'}} is required.</div>
    </div>
    }
  </div>
  }

  @if (this.f.authMethod.value.id===3)
  {
  <div class="mb-2">
    <b> QR Code: </b>
    <br />
    <kendo-qrcode #qrCode
                  [value]="qrCodeData"
                  width="150"
                  [errorCorrection]="'M'">
    </kendo-qrcode>
    <br />
    <div style="height:5px;"></div>
    <button class="ui-button ui-widget ui-state-default ui-button-success ui-corner-all ui-button-raised ui-button-text-only" (click)="sendmail(qrCode)">
      <span class="ui-button-text-only ui-c">Send to Email</span>
    </button>
    <div style="height:20px;"></div>
  </div>
  }

  @if (setting?.label14Req)
  {
  <div class="mb-2 col-lg-4 col-md-8 col-sm-12">
    <span class="{{setting?.label14Req===1? 'required' : ''}}">{{setting?.label14||'User groups'}}:</span>
    <br />
    @if (canEdit)
    {
    <kendo-grid [data]="items"
                [(selectedKeys)]="selectedIds"
                [kendoGridSelectBy]="selectedKeys"
                [selectable]="{enabled:true,checkboxOnly:true}"
                style="max-height: 207px"
                class="no-padding grid-font-900">
      <kendo-grid-checkbox-column [showSelectAll]="true" [width]="40" [headerStyle]="{'text-align':'center'}" [style]="{'text-align':'center'}">
      </kendo-grid-checkbox-column>
      <kendo-grid-column field="code" media="sm" title="{{setting?.label16||'Code'}}" [width]="120" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      <kendo-grid-column field="name" title="{{setting?.label17||'Name'}}" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
    </kendo-grid>
    }
    @if (!canEdit)
    {
    <kendo-grid [data]="items"
                [(selectedKeys)]="selectedIds"
                [kendoGridSelectBy]="selectedKeys"
                [selectable]="{enabled:true,checkboxOnly:true}"
                style="max-height: 207px"
                class="no-padding grid-font-900">
      <kendo-grid-checkbox-column [width]="40" class="k-disabled" [headerStyle]="{'text-align':'center'}" [style]="{'text-align':'center'}">
      </kendo-grid-checkbox-column>
      <kendo-grid-column field="code" media="sm" title="{{setting?.label16||'Code'}}" [width]="120" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
      <kendo-grid-column field="name" title="{{setting?.label17||'Name'}}" [headerStyle]="{'font-weight':'bold'}"></kendo-grid-column>
    </kendo-grid>
    }
  </div>
  }

  @if (canEdit)
  {
  <div class="mb-2">
    <hr class="osds" />
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-raised ui-button-text-only" (click)="onSubmit()" [disabled]="loading">
      <span class="ui-button-text-only ui-c"><i class="fa fa-floppy-o button-save" aria-hidden="true"></i>&nbsp;&nbsp;Save Now</span>
    </button>
  </div>
  }
</form>
