<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">
              @if (!data) {
              <span
                class="icon-skeleton rounded-circle mb-1 header-brand"
              ></span>
              } @if (data?.title) {
              <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="pb-3 px-5 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>
            @if (status) { @if (data?.socialAuthSettings?.envato_status ==
            'enable' || data?.socialAuthSettings?.google_status == 'enable' ||
            data?.socialAuthSettings?.facebook_status == 'enable'||
            data?.socialAuthSettings?.twitter_status == 'enable') {
            <div
              class="login-icons card-body border br-7 mx-5 my-3 p-4 d-flex align-items-center justify-content-center"
            >
              @if (data?.socialAuthSettings?.envato_status == 'enable') {
              <a
                aria-label="login"
                href="javascript:;"
                (click)="socialLogin('envato')"
                class="social-icon brround me-3 bg-primary-transparent text-primary"
                [ngbTooltip]="'Login with Envato' | translate"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                  <path
                    fill="#7CB342"
                    d="M12.869.088c-.572-.281-3.474.04-5.566 2.047-3.296 3.291-3.217 7.627-3.217 7.627s-.109.446-.573-.201c-1.016-1.295-.484-4.274-.424-4.689.084-.585-.289-.602-.444-.409-3.672 5.098-.356 9.272 1.815 10.597 2.542 1.551 7.556 1.55 9.553-2.85C16.501 6.731 13.586.439 12.869.088z"
                  />
                </svg>
              </a>
              } @if (data?.socialAuthSettings?.google_status == 'enable') {
              <a
                aria-label="login"
                href="javascript:;"
                class="social-icon brround me-3 bg-primary-transparent text-primary"
                [ngbTooltip]="'Login with Google' | translate"
                (click)="socialLogin('google')"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="40"
                  height="40"
                  viewBox="0 0 47 48"
                >
                  <g fill="none" fill-rule="evenodd">
                    <path
                      fill="#FBBC05"
                      d="M9.827 24c0-1.524.253-2.986.705-4.356l-7.909-6.04A23.456 23.456 0 0 0 .213 24c0 3.737.868 7.26 2.407 10.388l7.905-6.05A13.885 13.885 0 0 1 9.827 24"
                    />
                    <path
                      fill="#EB4335"
                      d="M23.714 10.133c3.311 0 6.302 1.174 8.652 3.094L39.202 6.4C35.036 2.773 29.695.533 23.714.533a23.43 23.43 0 0 0-21.09 13.071l7.908 6.04a13.849 13.849 0 0 1 13.182-9.51"
                    />
                    <path
                      fill="#34A853"
                      d="M23.714 37.867a13.849 13.849 0 0 1-13.182-9.51l-7.909 6.038a23.43 23.43 0 0 0 21.09 13.072c5.732 0 11.205-2.036 15.312-5.849l-7.507-5.804c-2.118 1.335-4.786 2.053-7.804 2.053"
                    />
                    <path
                      fill="#4285F4"
                      d="M46.145 24c0-1.387-.213-2.88-.534-4.267H23.714V28.8h12.604c-.63 3.091-2.346 5.468-4.8 7.014l7.507 5.804c4.314-4.004 7.12-9.969 7.12-17.618"
                    />
                  </g>
                </svg>
              </a>
              } @if (data?.socialAuthSettings?.facebook_status == 'enable') {
              <a
                aria-label="login"
                href="javascript:;"
                class="social-icon brround me-3 bg-primary-transparent text-primary"
                [ngbTooltip]="'Login with Facebook' | translate"
                (click)="socialLogin('facebook')"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="100"
                  height="100"
                  viewBox="0 0 100 100"
                >
                  <g
                    data-name="facebook circle"
                    transform="translate(-126.445 -2.281)"
                  >
                    <circle
                      cx="50"
                      cy="50"
                      r="50"
                      fill="#3c5a9a"
                      data-name="Ellipse 2"
                      transform="translate(126.445 2.281)"
                    />
                    <path
                      fill="#fff"
                      d="M357.464,92.677H346.388c-6.573,0-13.884,2.765-13.884,12.292.032,3.32,0,6.5,0,10.078h-7.6v12.1h7.839v34.835h14.405V126.917h9.508l.86-11.9H346.9s.024-5.3,0-6.833c0-3.765,3.918-3.55,4.153-3.55,1.864,0,5.489.005,6.42,0V92.677Z"
                      data-name="Path 21"
                      transform="translate(-164.761 -75.049)"
                    />
                  </g>
                </svg>
              </a>
              } @if (data?.socialAuthSettings?.twitter_status == 'enable') {
              <a
                aria-label="login"
                href="javascript:;"
                class="social-icon brround me-3 bg-primary-transparent text-primary"
                [ngbTooltip]="'Login with Twitter' | translate"
                (click)="socialLogin('twitter')"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="100"
                  height="100"
                  viewBox="0 0 50 50"
                >
                  <path
                    d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"
                  />
                </svg>
              </a>
              } @if (data?.setting?.original?.only_social_logins != 'on') {
              <span class="text-center">Or</span>
              }
            </div>
            }
            <div class="card-body border-top-0 pt-3 pb-0">
              @if (data?.setting?.original?.login_disable == 'on') {
              <div
                class="alert alert-light-warning br-13 border-0 text-center"
                role="alert"
              >
                <span class="">{{
                  data?.setting?.original?.login_disable_statement
                }}</span>
              </div>
              } @if (data?.setting?.original?.only_social_logins != 'on') {
              <form
                id="login_form"
                name="login_form"
                #logincust="ngForm"
                (ngSubmit)="customerLogin(logincust, 'login')"
              >
                <div class="form-group">
                  <label class="form-label"
                    >{{ "Email" | translate }}
                    <span class="text-red">*</span></label
                  >
                  <input
                    class="form-control"
                    [placeholder]="'Email' | translate"
                    [class.is-valid]="emailField.valid"
                    type="email"
                    name="email"
                    #emailField="ngModel"
                    [class.is-invalid]="
                      emailField.invalid && emailField.touched
                    "
                    required
                    id="username"
                    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="form-group">
                  <label class="form-label"
                    >{{ "Password" | translate }}
                    <span class="text-red">*</span></label
                  >
                  <input
                    #password
                    class="form-control"
                    [placeholder]="'Password' | translate"
                    type="password"
                    id="password"
                    name="password"
                    #pswd="ngModel"
                    [class.is-invalid]="pswd.invalid && pswd.touched"
                    required
                    ngModel
                  />
                  @if ((pswd.invalid && pswd.touched) || pswd.dirty) {
                  <div>
                    @if (pswd.errors?.['required']) {
                    <small class="text-danger">{{
                      "Password is
                            required" | translate
                    }}</small>
                    }
                  </div>
                  }
                </div>
                <div class="form-group">
                  <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_LOGIN == 'yes') {
                <div class="form-group row">
                  <div class="col-md-12 mb-3">
                    <app-manualcaptcha
                      (captchaComplete)="manualCaptchEvent($event)"
                      required
                      [canvasId]="'customerLogin'"
                    ></app-manualcaptcha>
                    <div>
                      @if (captchaMessage) {
                      <span class="text-danger">{{
                        captchaMessage | translate
                      }}</span>
                      }
                    </div>
                  </div>
                </div>
                } @if (data?.setting?.original?.CAPTCHATYPE == 'google' &&
                data?.setting?.original?.RECAPTCH_ENABLE_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
                    [disabled]="logincust.invalid || sendingResponse['login']"
                    class="btn btn-secondary btn-block"
                    type="submit"
                  >
                    {{ "Login" | translate }}
                    @if (sendingResponse['login']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                  </button>
                </div>
                <div class="text-center mt-3">
                  <a
                    routerLink="/customer/forgot-password"
                    class="text-primary pb-2"
                    >{{ "Forgot Password?" | translate }}</a
                  >
                  @if (data?.setting?.original?.REGISTER_DISABLE == 'on') {
                  <p class="text-dark mb-0">
                    {{ "Don’t have account?" | translate }}
                  </p>
                  <a
                    class="text-primary ms-1"
                    routerLink="/customer/register"
                    >{{ "Register" | translate }}</a
                  >
                  }
                  <p class="text-dark mb-0">
                    <a class="text-primary ms-1" routerLink="/">{{
                      "Back to Home" | translate
                    }}</a>
                  </p>
                </div>
              </form>
              }
            </div>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
