<div class="page login-bg1">
  <div class="page-single">
    <div class="container">
      <div class="row justify-content-center py-4">
        <div class="col-sm-12">
          <div class="card authentication-card px-3 py-5 mx-auto">
            <div class="pb-0 px-5 pt-0 text-center">
              <h3 class="mb-2">{{'Update Your Email' | translate}}</h3>
              <p class="text-muted fs-13 mb-1">{{'Enter the new email address to update.' | translate}}
              </p>
            </div>
            @if(showmail){
            <form class="card-body pt-3 pb-0" #FormData="ngForm" (ngSubmit)="updateEmail(FormData, 'emailupdate')">
              <div class="form-group">
                <label class="form-label">{{'Enter Your New Email' | translate}}</label>
                <input ngModel class="form-control" name="email" placeholder="{{'Email' | translate}}"
                  #c_email="ngModel" [class.is-invalid]="c_email.invalid && c_email.touched"
                  pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}" type="email">@if ((c_email.invalid && c_email.touched) ||
                c_email.dirty) {
                <div>
                  @if (c_email.errors?.['required']) {
                  <small class="text-danger">
                    {{'Email address is required' | translate}}</small>
                  }
                  @if (c_email.errors?.['pattern']) {
                  <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                  }
                </div>
                }
              </div>
              <div class="submit">
                <button [disabled]="sendingResponse['emailupdate']" class="btn btn-secondary btn-block" type="submit"
                  id="emailbtnsave">{{'Submit' |
                  translate}} @if (sendingResponse['emailupdate']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }</button>
              </div>
              <div class="text-center mt-4">
                <p class="text-dark mb-0"><a class="text-primary ms-1" routerLink="/">
                    {{'Send me Back' | translate}}</a></p>
              </div>
            </form>
            }@else {
            <form class="card-body pt-3 pb-0 newone" id="newone" #FormData="ngForm"
              (ngSubmit)="checkOtp(FormData, 'otp')">
              <div class="form-group">
                <label class="form-label">{{'Enter OTP' | translate}}</label>
                <input ngModel class="form-control" name="otp" value="" placeholder="{{'OTP' }}" type="text" required />
              </div>
              <div class="submit">
                <button [disabled]="sendingResponse['otp']" class="btn btn-secondary btn-block" type="submit">{{'Submit'
                  | translate}} @if (sendingResponse['otp']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                  }
                </button>
              </div>
              <div class="text-center mt-4">
                <p class="text-dark mb-0"><a class="text-primary ms-1" routerLink="/">
                    {{'Send me Back' | translate}}</a></p>
              </div>
            </form>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</div>