<app-announcement-holiday-banner
[setting]="data?.setting?.original"
[user]="data?.user"
[announcement]="data?.announcement"
[announcements]="data?.announcements"
[holidays]="data?.holidays"
[hideAlertsUntil]="hideAlertsUntil"
></app-announcement-holiday-banner>

<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="pt-0 pb-1 text-center">
              <a class="header-brand ms-0" routerLink="/">
                @if (data?.title?.logoimage != null) {
                  <img [src]="data?.title?.logoimage" class="header-brand-img custom-logo-dark" alt="logo" loading="lazy" decoding="async">
                }
                @if (data?.title?.logoimage1 != null;) {
                  <img [src]="data?.title?.logoimage1" class="header-brand-img custom-logo" alt="logo" loading="lazy" decoding="async">
                }
              </a>
            </div>


            <!--Forgot Password -->
            <div class="pb-0 px-5 pt-0 text-center">
              <h1 class="mb-2">{{'Forgot Password?' | translate}}</h1>
              <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" #forgotForm="ngForm" (ngSubmit)="ForgetPassword(forgotForm, 'forgot')">

              <div class="form-group">
                <label class="form-label">{{'Email' | translate}}</label>
                <input class="form-control" required  #emailfield="ngModel" [class.is-invalid]="emailfield.invalid && emailfield.touched" [class.is-valid]="emailfield.valid" name="email" value="" [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]="forgotForm.invalid || sendingResponse['forgot']" type="submit" class="btn btn-secondary btn-block">{{'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" href="javascript:;" routerLink="/admin/login">{{'Send me Back' | translate}}</a>
                </p>
              </div>
            </form>
            <!--End Forgot Password -->


          </div>
        </div>
      </div>
    </div>
  </div>
</div>