<admin-page-header [title]="'Profile'"></admin-page-header>

<!-- Profile Page-->
<div class="row">
  <div class="col-xl-3 col-lg-4 col-md-12">
    <div class="card user-pro-list overflow-hidden">
      <div class="card-body">
        <div class="user-pic text-center">
          @if (!admin) {
            <span class="icon-skeleton avatar-xxl rounded-circle mb-1"></span>
          }
          @if (admin) {
            <img [src]="Src" class="avatar-xxl rounded-circle mb-1" alt="default" loading="lazy"
              decoding="async">
          }
          <div class="pro-user mt-3">
            <h5 class="pro-user-username text-dark mb-1 fs-16">{{admin?.name}}</h5>
            <h6 class="pro-user-desc text-muted fs-12">{{admin?.email}}</h6>

            <h6 class="pro-user-desc text-muted fs-12">{{admin?.roles?.[0]?.name}}</h6>
            <ng-template #t let-fill="fill">
              <span class="profilerating" [class.full]="fill === 100">
                <span class="ratingstar" [style.width.%]="fill">&#x2605;</span>&#x2605;
              </span>
            </ng-template>

            <ngb-rating [rate]="rating" [starTemplate]="t" [max]="5" class="ng-rating"></ngb-rating>

          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title"> {{'Personal Details' | translate}}</h4>
      </div>
      <div class="card-body px-0 pb-0">

        <div class="table-responsive tr-lastchild">
          <table class="table mb-0 table-information">
            <tbody>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Employee ID' | translate}}</span>
                </td>
                <td class="py-2 ps-4">: {{admin?.empid}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Name' | translate}}</span>
                </td>
                <td class="py-2 ps-4">: {{admin?.name}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Role' | translate}}</span>
                </td>
                <td class="py-2 ps-4">: {{admin?.roles?.[0]?.name}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Email' | translate}}</span>
                </td>
                <td class="py-2 ps-4">: {{admin?.email}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Phone' | translate}}</span>
                </td>
                <td class="py-2 ps-4">: {{admin?.phone}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50">{{'Languages' | translate}}</span>
                </td>
                <td class="py-2 ps-4">: 
                  <ul class="custom-ul">
                    @if (admin?.languagues) {
                       @for (languagues of adminLang ; track languagues) {
                      <li class="tag mb-1 mx-1">
                      {{languagues}}</li>
                    }
                  }
                </ul>
              </td>
            </tr>
            <tr>
              <td class="py-2">
                <span class="font-weight-semibold w-50">{{'Skills' | translate}}</span>
              </td>
              <td class="py-2 ps-4">: 
                <ul class="custom-ul">
                  @if (admin?.skills) {
                    @for (skills of adminSkills ; track skills) {
                    <li class="tag mb-1 mx-1">{{skills}}
                    </li>
                  }
                }
              </ul>
            </td>
          </tr>
          <tr>
            <td class="py-2">
              <span class="font-weight-semibold w-50">{{'Location' | translate}}</span>
            </td>
            <td class="py-2 ps-4">: {{admin?.country}}</td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</div>
@if (setting?.SPRUKOADMIN_P == 'on') {
  <div class="card">
    <div class="card-header border-0">
      <h4 class="card-title"> {{'Personal Setting' | translate}}</h4>
    </div>
    <div class="card-body">
      <div class="switch_section">
        <div class="switch-toggle d-flex mt-4">
          <span class="onoffswitch2">
            <input type="checkbox" name="checkbox" id="myonoffswitch181"
              class=" toggle-class onoffswitch2-checkbox sprukoswitch"
              (change)="SwitchToDarkMode($event)" [checked]="admin?.darkmode == 1 ? true : false">
            <label for="myonoffswitch181" class="toggle-class onoffswitch2-label"></label>
          </span>
          <label class="form-label ps-3">{{'Switch to Dark-Mode' | translate}}</label>
        </div>
      </div>
    </div>
  </div>
}
<!-- Setting -->
<div class="card">
  <div class="card-header border-0">
    <h4 class="card-title"> {{'Setting' | translate}}</h4>
  </div>
  <div class="card-body">
    <div class="switch_section">
      <div class="switch-toggle d-flex mt-4">
        <span class="onoffswitch2">
          <input (change)="EmailNotificationOnOff($event)" type="checkbox" name="emailnotificationon"
            id="emailnotificationon" class=" toggle-class onoffswitch2-checkbox"
            [checked]="admin?.usetting?.emailnotifyon == 1 ? true : false">
          <label for="emailnotificationon" class="toggle-class onoffswitch2-label"></label>
        </span>
        <label class="form-label ps-3">{{'Email Notification On/Off' | translate}}</label>
      </div>
    </div>
  </div>
</div>
<!-- End Setting --->

</div>
<div class="col-xl-9 col-lg-8 col-md-12">
  @if (permission?.includes('Profile Edit')) {
    <!-- Edit Profile Page-->
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
          <div class="card-header border-0">
            <h4 class="card-title">{{'Edit Profile' | translate}}</h4>
          </div>
          <div class="card-body">
            <form #FormData="ngForm" (ngSubmit)="EditProfile(FormData, 'profileEdit')">
              <div class="row">
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'First Name' | translate}} </label>
                    <input [ngModel]="admin?.firstname" type="text" class="form-control "
                      required name="firstname">
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Last Name' | translate}}</label>
                    <input [ngModel]="admin?.lastname" type="text" class="form-control "
                      required name="lastname">
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Email' | translate}}
                      @if (permission?.includes('Email Update')) {
                        <a (click)="openModel(content, admin?.email)" class="action-btns1 ms-2 border-0" id="emailchange" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i class="feather feather-edit text-primary"></i></a>
                      }
                    </label>
                    <input [value]="admin?.email"
                      type="email" name="email" class="form-control" disabled>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Employee ID' | translate}} </label>
                    <input [value]="admin?.empid" type="text" name="empid" class="form-control"
                      disabled>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Mobile Number' | translate}} </label>
                    <ngx-mat-intl-tel-input [enablePlaceholder]="true" [enableSearch]="true"
                      [ngModel]="admin?.phone != null ? admin?.phone : ''"
                      class="form-control" name="phone"
                    describedBy="phoneInput"></ngx-mat-intl-tel-input>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Languages' | translate}}</label>
                    <ng-select class="form-control nodropdown" [items]="[]" [isOpen]="false"
                      [ngModel]="adminLang" name="languages"
                      placeholder="{{'Add Languages' | translate}}" [maxSelectedItems]="10"
                      [addTag]="true" [multiple]="true" [selectOnTab]="true">
                    </ng-select>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Skills' | translate}}</label>
                    <ng-select class="form-control nodropdown" [items]="[]"
                      [ngModel]="adminSkills" [maxSelectedItems]="10" name="skills"
                      [addTag]="true" placeholder="{{'Add Skills' | translate}}"
                      [multiple]="true" [isOpen]="false" [selectOnTab]="true">
                    </ng-select>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Country' | translate}}</label>
                    <ng-select class="form-control" #selectcountry [items]="countries"
                      [multiple]="false" [searchable]="false" clearable="false"
                      [ngModel]="admin?.country != 'null' ? admin.country : null"
                      placeholder="{{'Select Country' | translate}}" [virtualScroll]="true"
                      [loading]="!countries" (open)="dropdownSearch()" bindLabel="name"
                      bindValue="name" name="countrylist">
                      <ng-template ng-header-tmp>
                        <div style="display:flex;">
                          <input #filterInput class="form-control" type="text"
                            (input)="selectcountry.filter($any($event.target).value)" />
                          <i [hidden]="filterInput.value.length === 0"
                            class="material-icons"
                          (click)="selectcountry.filter(''); filterInput.value = ''">close</i>
                        </div>
                      </ng-template>
                    </ng-select>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">{{'Timezone' | translate}}</label>
                    <ng-select class="form-control timezoneWrapp" [items]="timezones" #select
                        [placeholder]="'Select Timezone' | translate" [virtualScroll]="true"
                        bindLabel="name" [multiple]="false" [searchable]="true"  clearable="false"
                        dropdownPosition="auto" bindValue="name" name="timezone" [(ngModel)]="timezone"  (ngModelChange)="timeZoneChanged($event)">
                          <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                              <div><span>{{item}}</span></div>
                          </ng-template>
                      </ng-select>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    @if (setting) {
                      <label class="form-label">{{'Upload Image' | translate}}</label>
                      <div class="input-group file-browser">
                        <input #imageHolder ngModel class="form-control" name="image"
                          type="file" (change)="image($event)" accept="jpeg,jpg,png"
                          size="5120">
                      </div>
                      <small class="text-muted"><span>{{'The file size should not be more than' | translate}} 5 {{'MB' | translate}}</span></small>
                      <div class="btn-list">
                        @if (permission?.includes('Profile Edit')) {
                          @if (admin?.image != null) {
                            <div class="file-image-1 removesprukoi4" #removesprukoi4>
                              <div class="product-image custom-ul">
                                <a href="javascript:;">
                                  <img [src]="Src" class="br-5" alt="profile"
                                    loading="lazy" decoding="async">
                                </a>
                                <ul class="icons">
                                  <li><a href="javascript:(0);"
                                    class="bg-danger delete-image"
                                    (click)="ProfileImageremove(removesprukoi4, imageHolder)"><i
                                  class="fe fe-trash"></i></a></li>
                                </ul>
                              </div>
                            </div>
                          }
                        }
                      </div>
                    }
                  </div>
                </div>
                <div class="col-md-12 card-footer">
                  <div class="form-group float-end mb-0">
                    <button [disabled]="sendingResponse['profileEdit'] || FormData.invalid"
                      type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['profileEdit']) {
                      <i
                      class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- End Edit Profile Page-->
  } @else {
    <div class="card ">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Profile Details' | translate}}</h4>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'First Name' | translate}}</label>
              <input type="text" class="form-control" name="firstname" [ngModel]="admin?.firstname"
                disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Last Name' | translate}}</label>
              <input type="text" class="form-control" name="lastname" [ngModel]="admin?.lastname"
                disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Email' | translate}}
                @if (permission?.includes('Email Update')) {
                  <a (click)="openModel(content, admin?.email)" class="action-btns1 ms-2 border-0" id="emailchange" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i class="feather feather-edit text-primary"></i></a>
                }
              </label>
              <input  type="email" class="form-control"
                [ngModel]="admin?.email" disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Employee ID' | translate}}</label>
              <input  type="email" class="form-control"
                [ngModel]="admin?.empid" disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Mobile Number' | translate}} </label>
              <input type="text" class="form-control " name="phone"
                [ngModel]="admin?.phone != null ? admin?.phone : ''" disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Languages' | translate}}</label>
              <input type="text" class="form-control" [ngModel]="admin?.languagues" name="languages"
                data-role="tagsinput" disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Skills' | translate}}</label>
              <input type="text" class="form-control" [ngModel]="admin?.skills" name="skills"
                data-role="tagsinput" disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Country' | translate}}</label>
              <input type="text" class="form-control" [ngModel]="admin?.country != 'null' ? admin?.country : ''" disabled>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Timezone' | translate}}</label>
              <input type="text" class="form-control" [ngModel]="admin?.timezone" disabled>
            </div>
          </div>
        </div>
      </div>
    </div>
  }
  @if (setting?.Employe_google_two_fact == 'on' || setting?.Employe_email_two_fact == 'on') {
    <div class="card">
      <div class="card-header border-bottom-0 pb-0">
        <div class="card-title">{{ 'Two Factor Authentication' | translate }}</div>
      </div>
      <div class="card-body">
        <div class="row justify-content-center">
          <div class="col-xl-12">
            <div class="row">
              <div class="col-xl-6">
                <div class="d-sm-flex d-block gap-3 align-items-center">
                  @if (setting?.Employe_google_two_fact == 'on') {
                    <div class="switch_section px-0">
                      <div class="switch-toggle d-flex align-items-center">
                        <span class="onoffswitch2">
                          <input #twofactorEle type="checkbox" name="twofactor"
                            id="twofactor" (change)="configureAuth(googleverifycontent)"
                            [checked]="admin?.twofactorauth == 'googletwofact' ? true : false"
                            [ngModel]="admin?.twofactorauth == 'googletwofact' ? true : false"
                            [value]="admin?.twofactorauth == 'googletwofact' ? true : false"
                            class=" toggle-class onoffswitch2-checkbox">
                          <label for="twofactor"
                          class="toggle-class onoffswitch2-label"></label>
                        </span>
                        <label class="form-label ps-3 mb-0">{{ 'Use Google Authenticator' |
                        translate }}</label>
                      </div>
                    </div>
                  }
                  @if (setting?.Employe_email_two_fact == 'on') {
                    <div class="switch_section px-0">
                      <div class="switch-toggle d-flex align-items-center">
                        <span class="onoffswitch2">
                          <input type="checkbox" #emailtwofactorEle name="emailtwofactor"
                            id="emailtwofactor"
                            [checked]="admin?.twofactorauth == 'emailtwofact' ? true : false"
                            (change)="sprukoemailtwofactor($event, mailverifycontent)"
                            [ngModel]="admin?.twofactorauth == 'emailtwofact' ? true : false"
                            [value]="admin?.twofactorauth == 'emailtwofact' ? true : false"
                            class=" toggle-class onoffswitch2-checkbox">
                          <label for="emailtwofactor"
                          class="toggle-class onoffswitch2-label"></label>
                        </span>
                        <label class="form-label ps-3 mb-0">{{ 'Use Email OTP' | translate
                        }}</label>
                      </div>
                    </div>
                  }
                </div>
              </div>
            </div>
            @if (autgoogleAuth.workprogress == 'workingmode' && workingmodeStatus) {
              <div id="emptwofactorapp"
                >
                <div class="d-flex align-items-start gap-4 mt-6 flex-wrap">
                  <div class="qr-code" [innerHTML]="sanitizeHtml(autgoogleAuth.QR_Image)"></div>
                  <div>
                    <h5 class="fw-semibold">{{'Set up Google Authenticator' | translate}}</h5>
                    <p class="mb-0">Set up your two factor authentication by scanning the QR code.
                    Alternatively, you can use the code </p>
                    <div class="mb-4 mt-2">
                      <span
                      class="badge fs-12 bg-light text-default p-2">{{autgoogleAuth.secret}}</span>
                    </div>
                    <div class="fs-13">{{'You must set up your Google Authenticator app before continuing. You will be unable to login otherwise' | translate}}</div>
                    <div class="mb-3 fs-13">{{'Please enter the' | translate}} <span
                      class="font-weight-bold">{{'OTP' | translate}}</span> {{'generated on your Authenticator App. Ensure you submit the current one because it refreshes every' | translate}} <span class="text-danger">30 {{'seconds' | translate}}<sup>*</sup></span>
                    </div>
                    <label for="one_time_password"
                    class="control-label text-success font-weight-semibold mb-1">{{'One Time Password' | translate}}</label>
                    <div class="d-flex align-item-end gap-3">
                      <div class="w-50">
                        <input id="secret_key_value" type="hidden" name="secret_key_value"
                          #securityKey value="{{autgoogleAuth.secret}}">
                        <input id="one_time_password" type="number" class="form-control"
                          #oneTimePswd name="one_time_password" required required autofocus
                          autocomplete="off">
                      </div>
                      <div>
                        <button type="button" class="btn btn-primary" id="otpverify" [disabled]="!oneTimePswd.value"
                          (click)="verifyGoogleAuth(oneTimePswd)">{{'Submit' |
                        translate}}</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            }
            @if (setting?.Employe_google_two_fact == 'on' && admin?.twofactorauth == 'googletwofact' && reconfigureStatus) {
              <div class="mt-5" id="configured" #configured>
                <div class="alert bg-success-transparent text-dark " role="alert">
                  <h5 class="mb-4">{{ 'Google two factor authentication is already configured.' |
                  translate }}</h5>
                  <button type="button" (click)="configureAuth(googleverifycontent, 'configStatus')"
                  class="btn btn-primary reconfig me-2">{{ 'Reconfigure'| translate}}</button>
                  <button (click)="removeAuth(googleverifycontent)" class="btn btn-danger removetf">{{ 'Remove'|
                  translate}}</button>
                </div>
              </div>
            }
            @if (setting?.Employe_email_two_fact == 'on' && admin?.twofactorauth == 'emailtwofact' && emailtwofactStatus) {
              <div class="mt-5 " #emailtwofac id="emailtwofac">
                <div class="alert bg-warning-transparent text-dark p-5" role="alert">
                  <h4 class="mb-2">{{ 'How does email otp authenticator work?' | translate }}</h4>
                  <p class="mb-0">{{ 'Two-Factor Authentication (2FA) is an option that provides an extra layer of security to your account in addition to your email and password. When Two-Factor Authentication is , your account cannot be accessed by anyone unauthorized, even if they have your password.' | translate }}</p>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </div>
  }
  <div class="card">
    <form #FormData="ngForm" (ngSubmit)="ChangePassword(FormData, 'changePswd')">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Change Password' | translate}}</h4>
      </div>
      <div class="card-body">
        <div class="form-group">
          <div class="row">
            <div class="col-md-3">
              <label class="form-label mb-0 mt-2">{{'Old Password' | translate}} <span
              class="text-red">*</span></label>
            </div>
            <div class="col-md-9">
              <input required type="password" class="form-control " ngModel
                [placeholder]="'Old Password' | translate" value="" name="current_password"
                autocomplete="current_password">
            </div>
          </div>
        </div>


        <div class="form-group">
          <div class="row">
            <div class="col-md-3">
              <label class="form-label mb-0 mt-2">{{'New Password' | translate}} <span
              class="text-red">*</span></label>
            </div>
            <div class="col-md-9">
              <div class="input-group">
                <input required type="{{NewPassword}}" class="form-control "
                  ngClass="{{EmailError ? 'is-invalid' : ''}}" ngModel="{{generatePassword}}"
                  [placeholder]="'New Password' | translate" value="" name="password">

                <div class="input-group-text p-0 ">
                  <button aria-label="show" type="button" class="btn btn-light-2  sprukovisipsd"
                    (click)="eyeClick()"><i class="fe "
                  [ngClass]="NewPassword == 'password' ? 'fe-eye' : 'fe-eye-off'"></i></button>
                  <button type="button" class="btn btn-light-2   br-br-5 br-tr-5 sprukogenratepsd"
                  (click)="GeneratePassword()">{{'Generate Password' | translate}}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="row">
            <div class="col-md-3">
              <label class="form-label mb-0 mt-2">{{'Confirm Password' | translate}} <span
              class="text-red">*</span></label>
            </div>
            <div class="col-md-9">
              <input required type="password" class="form-control " ngModel
                [placeholder]="'Confirm Password' | translate"
                ngClass="{{EmailError ? 'is-invalid' : ''}}" value="" name="password_confirmation"
                autocomplete="password_confirmation">
            </div>
          </div>
        </div>
        @if (EmailError) {
          <span class="invalid-feedback" role="alert">
            <strong>{{EmailError | translate}}</strong>
          </span>
        }
      </div>
      <div class="card-footer text-end">
        <button type="submit" [disabled]="FormData.invalid ||sendingResponse['changePswd']"
          class="btn btn-secondary">{{'Save Changes' | translate}} @if (sendingResponse['changePswd']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</div>
</div>
<!--End Profile Page-->



<!-- // Update email model start -->
<ng-template #content let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Email Update'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="adminemailchange(FormData, 'updateEmail')" >
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{'Enter Password' | translate | titlecase}}</label>
          <small>{{'To ensure additional security measures, kindly verify your password as we`re being extra safe.' | translate | titlecase}}</small>
          <input type="password" name="password" id="password" ngModel class="form-control" placeholder="Password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="sendingResponse['updateEmail']" class="btn btn-secondary" id="btnsave">{{'Submit' | translate | titlecase}}@if (sendingResponse['updateEmail']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Update email model end -->


<!-- //  email two factor model start -->
<ng-template #mailverifycontent let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Email Two Factor Verification'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="twofactoremail(FormData, 'disablemeailtowfactor')" >
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{'Enter Password' | translate | titlecase}}</label>
          <small>{{'To ensure additional security measures, kindly verify your password as we`re being extra safe.' | translate | titlecase}}</small>
          <input type="password" name="password" id="password" ngModel class="form-control" placeholder="Password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="sendingResponse['disablemeailtowfactor']" class="btn btn-secondary" id="btnsave">{{'Submit' | translate | titlecase}}@if (sendingResponse['disablemeailtowfactor']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- //  email two factor model end -->
<!-- // Google two factor model start -->
<ng-template #googleverifycontent let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Google Two Factor Verification'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="googleTwofactorDisable(FormData, 'disablemeailtowfactor')" >
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{'Enter Password' | translate | titlecase}}</label>
          <small>{{'To ensure additional security measures, kindly verify your password as we`re being extra safe.' | translate | titlecase}}</small>
          <input type="password" name="password" id="password" ngModel class="form-control" placeholder="Password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="sendingResponse['disablemeailtowfactor']" class="btn btn-secondary" id="btnsave">{{'Submit' | translate | titlecase}}@if (sendingResponse['disablemeailtowfactor']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Google two factor model end -->