<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>
            <div class="px-4 pb-4 pt-0 text-center">
              <h3 class="mb-2">{{'Login' | translate}}</h3>
              <p class="text-muted fs-13 mb-1">{{'Sign In to your account' | translate}}</p>
            </div>
            <form class="card-body pt-3 pb-0" id="login" #loginMd="ngForm"
              (ngSubmit)="AdminLogin(loginMd, 'loginform')">

              <label class="form-label">{{'Email' | translate}} <span class="text-red">*</span></label>
              <input  type="email" class="form-control" name="email"
                #emailfield="ngModel" [class.is-invalid]="emailfield.invalid && emailfield.touched"
                [class.is-valid]="emailfield.valid" required autocomplete 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>
              }

              <label class="form-label mt-2">{{'Password' | translate}} <span class="text-red">*</span></label>
              <input #password type="password" class="form-control" name="password" #passwordfield="ngModel"
                [class.is-invalid]="passwordfield.invalid && passwordfield.touched" required ngModel>
              @if ((passwordfield.invalid && passwordfield.touched) || passwordfield.dirty) {
                <div>
                  @if (passwordfield.errors?.['required']) {
                    <small class="text-danger">{{'Password is required' |
                    translate}}</small>
                  }
                </div>
              }

              <div class="form-group my-2">
                <label class="custom-control form-checkbox">
                  <input type="checkbox" class="custom-control-input" name="remember" id="remember" ngModel>
                  <span class="custom-control-label">{{'Remember Me' | translate}}</span>
                </label>
              </div>

              @if (data?.setting?.original?.CAPTCHATYPE=='manual' && data?.setting?.original?.RECAPTCH_ENABLE_ADMIN_LOGIN == 'yes') {
                <div class="form-group row">
                  <div class="col-md-12">
                    <div class="captcha d-flex border">
                      <app-manualcaptcha (captchaComplete)="manualCaptchEvent($event)" required [canvasId]="'AdminLogin'"></app-manualcaptcha>
                    </div>
                    <div>
                      @if (captchaMessage) {
                        <span class="text-danger">{{captchaMessage | translate}}</span>
                      }
                    </div>
                  </div>
                </div>
              }
              <!-- - if Enable the Google ReCaptcha - -->
              @if (data?.setting?.original?.CAPTCHATYPE=='google' && data?.setting?.original?.RECAPTCH_ENABLE_ADMIN_LOGIN == 'yes') {
                <div class="form-group">
                  <re-captcha #googlerecaptcha name="g-recaptcha-response"  required (resolved)="resolved($event || '')" [siteKey]="data?.setting?.original?.GOOGLE_RECAPTCHA_KEY"></re-captcha>

                  <!-- You can use ngModel on a hidden input field to capture the reCAPTCHA response -->
                  <input type="hidden" name="g-recaptcha-response" [(ngModel)]="captcha" #captchaControl="ngModel"/>
                </div>
              }
              <div class="submit">
                <button class="btn btn-secondary btn-block" type="submit"
                  [disabled]="loginMd.invalid || sendingResponse['loginform']">{{'Login' |
                  translate}}@if (sendingResponse['loginform']) {
                  <i class="fa fa-spinner fa-spin ms-2"></i>
                }</button>
              </div>
              <div class="text-center mt-3">
                <p class="mb-0"><a routerLink="/admin/forgot-password">{{'Forgot Password?' | translate}}</a></p>
              </div>
            </form>

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