<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="pb-0 px-5 pt-0 text-center">
              <h3 class="mb-2">{{'Reset Password'| translate}}</h3>
              <p class="text-muted fs-13 mb-1">{{'Enter the email address registered on your account'| translate}}</p>
              @if (data?.session?.status) {
                <div class="alert alert-success" role="alert">
                  {{ data?.session?.status | translate }}
                </div>
              }
            </div>

            <form class="card-body pt-3 pb-0" #resetPsw="ngForm" (ngSubmit)="resetForm(resetPsw, 'resetPswd')">
              <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?.users?.email}}" autocomplete="email" placeholder="john@gmail.com"
                  autofocus readonly>
              </div>
              <div class="form-group">
                <label class="form-label" for="password">{{'New Password' | translate}}</label>
                <input #newPswd="ngModel" [class.is-invalid]="newPswd.invalid && newPswd.touched" required
                  class="form-control" id="password" name="password" [placeholder]="'Password' | translate"
                  type="password" ngModel>
                @if ((newPswd.invalid && newPswd.touched) || newPswd.dirty) {
                  <div>
                    @if (newPswd.errors?.['required']) {
                      <small class="text-danger">{{'New Password is required' |
                      translate}}</small>
                    }
                  </div>
                }
              </div>
              <div class="form-group">
                <label class="form-label" for="password-confirm">{{'Confirm Password' | translate}}</label>
                <input #confPswd="ngModel" [class.is-invalid]="confPswd.invalid && confPswd.touched" required
                  class="form-control" [placeholder]="'Password' | translate" id="password-confirm"
                  name="password_confirmation" type="password" ngModel>
                @if ((confPswd.invalid && confPswd.touched) || confPswd.dirty) {
                  <div>
                    @if (confPswd.errors?.['required']) {
                      <small class="text-danger">{{'Confirm Password is required' |
                      translate}}</small>
                    }
                  </div>
                }
              </div>
              <div class="submit">
                <button [disabled]="resetPsw.invalid || sendingResponse['resetPswd']" type="submit"
                  class="btn btn-secondary btn-block">
                  {{'Reset Password' | translate}}
                  @if (sendingResponse['resetPswd']) {
                    <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" href="javascript:;" routerLink="/admin/login">{{'Login' | translate}}</a>
                </p>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>