<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-0 px-5 pt-0 text-center">
              <h3 class="mb-2">{{'Reset Password' | translate}}</h3>
            </div>
            <form class="card-body pt-3 pb-0" #resetForm="ngForm" (ngSubmit)="resetPswd(resetForm, 'reset')">

              <div class="form-group">
                <label class="form-label" for="email">{{'Email' | translate}}</label>
                <input id="email"  type="email" class="form-control " 
                  name="email" value="{{data?.user?.email}}" autocomplete="email" autofocus readonly>
              </div>
              <div class="form-group">
                <label class="form-label" for="password">{{'New Password' | translate}}</label>
                <input #pswd="ngModel" [class.is-invalid]="pswd.invalid && pswd.touched" required class="form-control"
                  id="password" name="password" [placeholder]="'Password' | translate" type="password" 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="form-label" for="password-confirm">{{'Confirm Password' | translate}}</label>
                <input #cnfPswd="ngModel" [class.is-invalid]="cnfPswd.invalid && cnfPswd.touched" required
                  class="form-control" [placeholder]="'Password' | translate" id="password-confirm"
                  name="password_confirmation" type="password" ngModel>
                @if ((cnfPswd.invalid && cnfPswd.touched) || cnfPswd.dirty) {
                  <div>
                    @if (cnfPswd.errors?.['required']) {
                      <small class="text-danger">{{'Confirm password is required' |
                      translate}}</small>
                    }
                  </div>
                }
              </div>
              <div class="submit">
                <button type="submit" [disabled]="resetForm.invalid || sendingResponse['reset']"
                  class="btn btn-secondary btn-block">
                  {{'Reset Password' | translate}}@if (sendingResponse['reset']) {
                  <i
                  class="fa fa-spinner fa-spin mx-1"></i>
                }
              </button>
            </div>
            <div class="text-center mt-4">
              <p class="text-dark mb-0">{{'Remembered your password?'| translate}}<a class="text-primary ms-1"
              routerLink="/customer/login">{{'Login' | translate}}</a></p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</div>