<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">{{'Forgot Password?' | translate}}</h3>
              <p class="text-muted fs-13 mb-1">{{'Enter the email address that is linked to your account.' | translate}}</p>
            </div>
            <form class="card-body pt-3 pb-0" id="forgot" #forgotPsw="ngForm" (ngSubmit)="forgotPassword(forgotPsw, 'forgot')">
              <div class="form-group">
                <label class="form-label">{{'Email' | translate}}</label>
                <input required  #emailField="ngModel" [class.is-invalid]="emailField.invalid && emailField.touched" [class.is-valid]="emailField.valid" class="form-control" name="email" [placeholder]="'Email' | translate"   type="email" ngModel pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
                @if ((emailField.invalid && emailField.touched) || emailField.dirty) {
                  <div>
                    @if (emailField.errors?.['required']) {
                      <small class="text-danger">{{'Email address is required' | translate}}</small>
                    }
                    @if (emailField.errors?.['pattern']) {
                    <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                    }
                  </div>
                }
              </div>
              <div class="submit">
                <button [disabled]="forgotPsw.invalid || sendingResponse['forgot']" class="btn btn-secondary btn-block" type="submit" >
                  {{'Submit' | translate}}
                  @if (sendingResponse['forgot']) {
                    <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>