<form [formGroup]="thisSystemForm" (ngSubmit)="onSubmit()">
    <ngx-spinner bdColor = "rgba(0,0,0,0.8)" color="#fff" size="default" type="ball-spin-clockwise" [fullScreen]="true">
        <p style="color:white;">Working on your request, please wait.... </p>
    </ngx-spinner>

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

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

    @if(setting?.label03Req)
    {
    <div class="mb-2 col-lg-8 col-md-12 col-sm-12">
        <span class="{{setting?.label03Req===1? 'required' : ''}}">{{setting?.label03||'কোম্পানির নাম'}}:</span>
        <br />
        <input type="text" id="banglaName" formControlName="banglaName" maxlength="100" placeholder="{{setting?.label03||'কোম্পানির নাম'}}" (keypress)="unicodeBangla($event,false)" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.banglaName.errors }">
        @if(submitted && f.banglaName.errors)
        {
        <div class="invalid-feedback">
            @if(f.banglaName.errors.required)
            {
            <span>{{setting?.label03||'কোম্পানির নাম'}} is required.</span>
            }
            @if(f.banglaName.errors.pattern)
            {
            <span>{{setting?.label03||'কোম্পানির নাম'}} is invalid format.</span>
            }
            @if(f.banglaName.errors.minlength)
            {
            <span>Minimum length of {{setting?.label03||'কোম্পানির নাম'}} is {{f.banglaName.errors.minlength.requiredLength}}</span>
            }
            @if(f.banglaName.errors.maxlength)
            {
            <span>Maximum length of {{setting?.label03||'কোম্পানির নাম'}} is {{f.banglaName.errors.maxlength.requiredLength}}</span>
            }
        </div>
        }
    </div>
    }

    @if(setting?.label04Req)
    {
    <div class="mb-2 col-lg-8 col-md-12 col-sm-12">
        <span class="{{setting?.label04Req===1? 'required' : ''}}">{{setting?.label04||'Address'}}:</span>
        <br />
        <textarea id="address" formControlName="address" rows="2" cols="75" maxlength="300" placeholder="{{setting?.label04||'Address'}}" class="form-control grid-font-1100" [ngClass]="{ 'is-invalid': submitted && f.address.errors }"></textarea>
        @if(submitted && f.address.errors)
        {
        <div class="invalid-feedback">
            @if(f.address.errors.required)
            {
            <span>{{setting?.label04||'Address'}} is required.</span>
            }
            @if(f.address.errors.pattern)
            {
            <span>{{setting?.label04||'Address'}} is invalid format.</span>
            }
            @if(f.address.errors.minlength)
            {
            <span>Minimum length of {{setting?.label04||'Address'}} is {{f.address.errors.minlength.requiredLength}}</span>
            }
            @if(f.address.errors.maxlength)
            {
            <span>Maximum length of {{setting?.label04||'Address'}} is {{f.address.errors.maxlength.requiredLength}}</span>
            }
        </div>
        }
    </div>
    }

    @if(setting?.label05Req)
    {
    <div class="mb-2 col-lg-8 col-md-12 col-sm-12">
        <span class="{{setting?.label05Req===1? 'required' : ''}}">{{setting?.label05||'ঠিকানা'}}:</span>
        <br />
        <textarea id="banglaAddress" formControlName="banglaAddress" rows="2" cols="75" maxlength="300" placeholder="{{setting?.label05||'ঠিকানা'}}" (keypress)="unicodeBangla($event,true)" class="form-control grid-font-1100" [ngClass]="{ 'is-invalid': submitted && f.banglaAddress.errors }"></textarea>
        @if(submitted && f.banglaAddress.errors)
        {
        <div class="invalid-feedback">
            @if(f.banglaAddress.errors.required)
            {
            <span>{{setting?.label05||'ঠিকানা'}} is required.</span>
            }
            @if(f.banglaAddress.errors.pattern)
            {
            <span>{{setting?.label05||'ঠিকানা'}} is invalid format.</span>
            }
            @if(f.banglaAddress.errors.minlength)
            {
            <span>Minimum length of {{setting?.label05||'ঠিকানা'}} is {{f.banglaAddress.errors.minlength.requiredLength}}</span>
            }
            @if(f.banglaAddress.errors.maxlength)
            {
            <span>Maximum length of {{setting?.label05||'ঠিকানা'}} is {{f.banglaAddress.errors.maxlength.requiredLength}}</span>
            }
        </div>
        }
    </div>
    }

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

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

    @if(setting?.label08Req)
    {
    <div class="mb-2 col-lg-4 col-md-8 col-sm-12">
        <span class="{{setting?.label08Req===1? 'required' : ''}}">{{setting?.label08||'Email Address'}}:</span>
        <br />
        <input type="email" id="emailAddress" formControlName="emailAddress" maxlength="50" placeholder="{{setting?.label08||'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)
            {
            <span>{{setting?.label08||'Email Address'}} is required.</span>
            }
            @if(f.emailAddress.errors.pattern)
            {
            <span>{{setting?.label08||'Email Address'}} is invalid format.</span>
            }
            @if(f.emailAddress.errors.minlength)
            {
            <span>Minimum length of {{setting?.label08||'Email Address'}} is {{f.emailAddress.errors.minlength.requiredLength}}</span>
            }
            @if(f.emailAddress.errors.maxlength)
            {
            <span>Maximum length of {{setting?.label08||'Email Address'}} is {{f.emailAddress.errors.maxlength.requiredLength}}</span>
            }
        </div>
        }
    </div>
    }

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

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

    @if(setting?.label11Req)
    {
    <div class="mb-2 col-lg-2 col-md-4 col-sm-6">
        <span class="{{setting?.label11Req===1? 'required' : ''}}">{{setting?.label11||'VAT Rate'}}:</span>
        <br />
        <kendo-numerictextbox id="vatRate" formControlName="vatRate" [spinners]="false" [format]="'0.00'" [step]="1" [min]="0" [max]="100" placeholder="{{setting?.label11||'VAT Rate'}}" [ngClass]="{ 'k-invalid': submitted && f.vatRate.errors }"></kendo-numerictextbox>
        @if(submitted && f.vatRate.errors)
        {
        <div class="invalid-feedback">
            @if(f.vatRate.errors.required)
            {
            <span>{{setting?.label11||'VAT Rate'}} is required.</span>
            }
            @if(f.vatRate.errors.pattern)
            {
            <span>{{setting?.label11||'VAT Rate'}} is invalid format.</span>
            }
            @if(f.vatRate.errors.min)
            {
            <span>Value can not be less than {{f.vatRate.errors.min.min}}</span>
            }
            @if(f.vatRate.errors.max)
            {
            <span>Value can not be greater than {{f.vatRate.errors.max.max}}</span>
            }
        </div>
        }
    </div>
    }

    @if(setting?.label12Req)
    {
    <div class="mb-2 form-check form-switch">
        <input type="checkbox" id="enfStgPwd" name="enfStgPwd" formControlName="enfStgPwd" class="form-check-input" (change)="enfStgPwdCheckEvent()" />
        <label class="form-check-label" for="enfStgPwd">{{setting?.label12||'Enforce Strong Password (Minimum Length will be 6)'}}</label>
    </div>
    }

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

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

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

    @if(setting?.label16Req)
    {
    <div class="mb-2 form-check form-switch">
        <input type="checkbox" id="loginIdCantPwd" name="loginIdCantPwd" formControlName="loginIdCantPwd" class="form-check-input" />
        <label class="form-check-label" for="loginIdCantPwd">{{setting?.label16||'Login Id can not be Part of Password'}}</label>
    </div>
    }

    @if(setting?.label17Req)
    {
    <div class="mb-2">
        <span class="{{setting?.label17Req===1? 'required' : ''}}">{{setting?.label17||'Do not Allow last # passwords'}}:</span>
        <br />
        <div class="col-lg-2 col-md-6 col-sm-12">
            <kendo-numerictextbox id="daLastPwds" formControlName="daLastPwds" [spinners]="false" [format]="'0'" [step]="1" [min]="0" [max]="10" placeholder="DA Pwd" [ngClass]="{'k-invalid': submitted && f.daLastPwds.errors}"></kendo-numerictextbox>
        </div>
        @if(submitted && f.daLastPwds.errors)
        {
        <div class="invalid-feedback">
            @if(f.daLastPwds.errors.required)
            {
            <span>{{setting?.label17||'Do not Allow last # passwords'}} is required.</span>
            }
            @if(f.daLastPwds.errors.pattern)
            {
            <span>{{setting?.label17||'Do not Allow last # passwords'}} is invalid format.</span>
            }
            @if(f.daLastPwds.errors.min)
            {
            <span>Value can not be less than {{f.daLastPwds.errors.min.min}}</span>
            }
            @if(f.daLastPwds.errors.max)
            {
            <span>Value can not be greater than {{f.daLastPwds.errors.max.max}}</span>
            }
        </div>
        }
    </div>
    }

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

    @if(setting?.label19Req)
    {
    <div class="mb-2 form-check form-switch">
        <input type="checkbox" id="prvntAtckPwdReuse" name="prvntAtckPwdReuse" formControlName="prvntAtckPwdReuse" class="form-check-input" />
        <label class="form-check-label" for="prvntAtckPwdReuse">{{setting?.label19||'Password should be at least one day old before they can be changed, to prevent attacks on password re-use'}}</label>
    </div>
    }

    @if(setting?.label20Req)
    {
    <div class="mb-2">
        <span class="{{setting?.label20Req===1? 'required' : ''}}">{{setting?.label20||'User will Lock after # Unsuccessful attempts'}}:</span>
        <br />
        <div class="col-lg-2 col-md-6 col-sm-12">
            <kendo-numerictextbox id="maxTryCount" formControlName="maxTryCount" [spinners]="false" [format]="'0'" [step]="1" [min]="0" [max]="20" placeholder="Unsuccessful attempts" (valueChange)="onMaxTryCountChange($event)" [ngClass]="{'k-invalid': submitted && f.maxTryCount.errors}"></kendo-numerictextbox>
        </div>
        @if(submitted && f.maxTryCount.errors)
        {
        <div class="invalid-feedback">
            @if(f.maxTryCount.errors.required)
            {
            <span>{{setting?.label20||'User will Lock after # Unsuccessful attempts'}} is required.</span>
            }
            @if(f.maxTryCount.errors.pattern)
            {
            <span>{{setting?.label20||'User will Lock after # Unsuccessful attempts'}} is invalid format.</span>
            }
            @if(f.maxTryCount.errors.min)
            {
            <span>Value can not be less than {{f.maxTryCount.errors.min.min}}</span>
            }
            @if(f.maxTryCount.errors.max)
            {
            <span>Value can not be greater than {{f.maxTryCount.errors.max.max}}</span>
            }
        </div>
        }
    </div>
    }

    @if(setting?.label21Req)
    {
    <div class="mb-2">
        <span class="{{setting?.label21Req===1? 'required' : ''}}">{{setting?.label21||'Lock Time (minutes)'}}:</span>
        <br />
        <div class="col-lg-2 col-md-6 col-sm-12">
            <kendo-numerictextbox id="lockTime" formControlName="lockTime" [spinners]="false" [format]="'0'" [step]="1" [min]="0" [max]="1440" placeholder="Lock Time" [ngClass]="{'k-invalid': submitted && f.lockTime.errors}"></kendo-numerictextbox>
        </div>
        @if(submitted && f.lockTime.errors)
        {
        <div class="invalid-feedback">
            @if(f.lockTime.errors.required)
            {
            <span>{{setting?.label21||'Lock Time (minutes)'}} is required.</span>
            }
            @if(f.lockTime.errors.pattern)
            {
            <span>{{setting?.label21||'Lock Time (minutes)'}} is invalid format.</span>
            }
            @if(f.lockTime.errors.minlength)
            {
            <span>Value can not be less than {{f.lockTime.errors.min.min}}</span>
            }
            @if(f.lockTime.errors.maxlength)
            {
            <span>Value can not be greater than {{f.lockTime.errors.max.max}}</span>
            }
        </div>
        }
    </div>
    }

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

    @if(setting?.label23Req)
    {
    <div class="mb-2">
        <span class="{{setting?.label23Req===1? 'required' : ''}}">{{setting?.label23||'Auto Logout Parameters (Idle, Timeout, Ping value in seconds) s'}}:</span>
        <br />
        <div class="col-lg-2 col-md-6 col-sm-12">
            <input type="text" id="alParams" formControlName="alParams" maxlength="15" placeholder="{{setting?.label23||'Auto Logout Parameters'}}" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && f.alParams.errors }">
        </div>
        @if(submitted && f.alParams.errors)
        {
        <div class="invalid-feedback">
            @if(f.alParams.errors.required)
            {
            <span>{{setting?.label23||'Auto Logout Parameters (Idle, Timeout, Ping value in seconds)'}} is required.</span>
            }
            @if(f.alParams.errors.pattern)
            {
            <span>{{setting?.label23||'Auto Logout Parameters (Idle, Timeout, Ping value in seconds)'}} is invalid format.</span>
            }
            @if(f.alParams.errors.minlength)
            {
            <span>Minimum length of {{setting?.label23||'Auto Logout Parameters (Idle, Timeout, Ping value in seconds)'}} is {{f.alParams.errors.minlength.requiredLength}}</span>
            }
            @if(f.alParams.errors.maxlength)
            {
            <span>Maximum length of {{setting?.label23||'Auto Logout Parameters (Idle, Timeout, Ping value in seconds)'}} is {{f.alParams.errors.maxlength.requiredLength}}</span>
            }
        </div>
        }
    </div>
    }

    @if(setting?.label24Req)
    {
    <div class="mb-1 form-check form-switch">
        <input type="checkbox" id="batchEnabled" name="batchEnabled" formControlName="batchEnabled" class="form-check-input" (change)="batchEnabledCheckEvent($event)" />
        <label class="form-check-label" for="batchEnabled">{{setting?.label24||'Enable Batch in the System'}}</label>
    </div>
    }

    @if(setting?.label25Req)
    {
    <div class="mb-2">
        <span class="{{required}}">{{setting?.label25||'Batch Management Process'}}:</span>
        <br />
        <div class="col-lg-3 col-md-8 col-sm-12">
            <kendo-dropdownlist [data]="bmProcesses"
                                [textField]="'value'"
                                [valueField]="'id'"
                                formControlName="bmProcessId"
                                [required]="f.batchEnabled.value"
                                [valuePrimitive]="true"
                                [ngClass]="{ 'k-invalid': submitted && (f.batchEnabled.value && !f.bmProcessId.value)}">
            </kendo-dropdownlist>
        </div>
        @if(submitted && f.batchEnabled.value && !f.bmProcessId.value)
        {
        <div class="invalid-feedback">
            <div>{{setting?.label25||'Batch Management Process'}} is required.</div>
        </div>
        }
    </div>
    }

    @if(setting?.label26Req)
    {
    <div class="mb-2">
        <span class="{{required}}">{{setting?.label26||'Payment Receive Management Process'}}:</span>
        <br />
        <div class="col-lg-3 col-md-8 col-sm-12">
            <kendo-dropdownlist [data]="prProcesses"
                                [textField]="'value'"
                                [valueField]="'id'"
                                formControlName="prProcessId"
                                [valuePrimitive]="true"
                                [ngClass]="{ 'k-invalid': submitted && f.prProcessId.errors}">
            </kendo-dropdownlist>
        </div>
        @if(submitted && f.prProcessId.errors)
        {
        <div class="invalid-feedback">
            <div>{{setting?.label26||'Payment Receive Management Process'}} is required.</div>
        </div>
        }
    </div>
    }

    @if(canEdit)
    {
    <hr class="osds" />
    <div class="mb-2">
        <button 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-floppy-o button-save" aria-hidden="true"></i>&nbsp;&nbsp;Save Now</span>
        </button>
    </div>
    }
</form>
