<div class="container vertical-spacing">
  @if (loading) {
    <div class="align-content-center justify-content-center d-flex">
      <mat-spinner [color]="'blue'"></mat-spinner>
    </div>
  } @else {
    <div class="row">
      <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
        <!-- CODE FROM EMAIL FORM -->
        <form
          class="auth-form"
          autocomplete="off"
          (ngSubmit)="onSubmitTokenForm(newTokenForm)"
          #newTokenForm="ngForm"
          *ngIf="!token">
          <h1 class="heading heading--md heading--separator">Token (code from email)</h1>

          <!-- token -->
          <div class="form-group" [ngClass]="{ 'form-group-invalid': !code.valid && code.touched }">
            <label for="code">Token</label>
            <input
              type="text"
              class="form-control"
              name="code"
              id="code"
              required
              placeholder="{{ 'Action.Enter' | translate }} token..."
              ngModel
              #code="ngModel"
              [attr.aria-describedby]="'code_error'"
              [attr.aria-invalid]="!code.valid && code.touched" />

            <!-- token field validation error -->
            <small
              class="form-text text-danger"
              role="alert"
              id="code_error"
              *ngIf="!code.valid && code.touched"
              @toggleVertically>
              {{ 'Validation.Required' | translate }}
            </small>
          </div>

          <!-- submit form -->
          <div class="form-group clearfix">
            <button
              type="submit"
              class="btn"
              [ngClass]="!newTokenForm.valid ? 'btn-secondary disabled' : 'btn-primary'"
              [disabled]="!newTokenForm.valid">
              {{ 'Action.Save' | translate | uppercase }}
            </button>
          </div>
        </form>

        <!-- RESET PASSWORD -->
        <form
          class="auth-form"
          (ngSubmit)="onSubmitNewPassword()"
          [formGroup]="resetPasswordForm"
          autocomplete="off"
          *ngIf="token">
          <h1 class="heading heading--md heading--separator">
            {{ 'User.NewPasswordCreation' | translate }}
          </h1>

          <!-- RESET PASSWORD FORM-->
          <ng-container *ngIf="!passwordChanged">
            <!-- api notifications  -->
            <app-notifications aria-live="polite"></app-notifications>

            <!-- PASSWORD -->
            <div
              class="form-group"
              [ngClass]="{
                'form-group-invalid':
                  resetPasswordForm.controls.new_password1.invalid && resetPasswordForm.controls.new_password1.touched,
              }">
              <label for="new_password1">
                {{ 'User.NewPassword' | translate }}
              </label>

              <!-- New Password with hint (tooltip) -->
              <div style="position: relative">
                <input
                  type="password"
                  class="form-control"
                  id="new_password1"
                  placeholder="{{ 'Action.Enter' | translate }} {{ 'User.NewPassword' | translate | lowercase }}"
                  [attr.aria-describedby]="'password_policy password1_error'"
                  [attr.aria-invalid]="
                    resetPasswordForm.controls.new_password1.invalid && resetPasswordForm.controls.new_password1.touched
                  "
                  formControlName="new_password1"
                  (focus)="showPasswordHint = true"
                  (blur)="showPasswordHint = false"
                  (mouseenter)="showPasswordHint = true"
                  (mouseleave)="showPasswordHint = false" />

                <!-- New Password policy description -->
                <span class="hint" role="tooltip" id="password_policy" aria-live="polite" *ngIf="showPasswordHint">
                  <small>
                    {{ 'Validation.VarPasswordPolicy' | translate: { param: passwordMinLength } }}
                  </small>
                </span>
              </div>

              <!-- New Password - required error -->
              <small
                class="form-text text-danger"
                id="password1_error"
                *ngIf="
                  resetPasswordForm.controls.new_password1.invalid && resetPasswordForm.controls.new_password1.touched
                "
                @toggleVertically>
                {{ 'User.NewPassword' | translate }}
                {{ 'Validation.IsRequired' | translate }}
              </small>

              <!-- visual password validator -->
              <app-visual-password-validator
                [control]="resetPasswordForm.get('new_password1')"></app-visual-password-validator>
            </div>

            <!-- PASSWORD CONFIRMATION -->
            <div
              class="form-group"
              [ngClass]="{
                'form-group-invalid':
                  (resetPasswordForm.controls.new_password2.invalid &&
                    resetPasswordForm.controls.new_password2.touched) ||
                  resetPasswordForm.hasError('notEqualValues'),
              }">
              <label for="new_password2">
                {{ 'User.RetypePassword' | translate }}
              </label>

              <!-- Password confirmation -->
              <input
                type="password"
                class="form-control"
                id="new_password2"
                placeholder="{{ 'User.RetypePassword' | translate }}"
                formControlName="new_password2"
                autocomplete="off"
                [attr.aria-describedby]="'password2_error'"
                [attr.aria-invalid]="
                  (resetPasswordForm.controls.new_password2.invalid &&
                    resetPasswordForm.controls.new_password2.touched) ||
                  resetPasswordForm.hasError('notEqualValues')
                " />

              <!-- Password confirmation - required error -->
              <small
                class="form-text text-danger"
                id="password2_error"
                *ngIf="
                  (resetPasswordForm.controls.new_password2.invalid &&
                    resetPasswordForm.controls.new_password2.touched) ||
                  resetPasswordForm.hasError('notEqualValues')
                "
                @toggleVertically>
                {{ 'Validation.RequiredPasswordConfirmation' | translate }}
              </small>
            </div>

            <div class="form-check clearfix">
              <!-- fake button to indicate 'disabled' state -->
              <button
                type="button"
                class="btn btn-secondary disabled"
                aria-describedby="backend_notifications password1_error password2_error"
                [attr.aria-disabled]="true"
                *ngIf="!resetPasswordForm.valid">
                {{ 'User.ChangePassword' | translate | uppercase }}
              </button>

              <!-- submit -->
              <button type="submit" class="btn btn-primary" *ngIf="resetPasswordForm.valid">
                {{ 'User.CreatePassword' | translate | uppercase }}
              </button>
            </div>
          </ng-container>

          <!-- PASSWORD SUCCESSFULLY CHANGED -->
          <ng-container *ngIf="passwordChanged">
            <!-- success message -->
            <div role="alert" role="alert" aria-live="polite">
              <p class="alert alert-success">
                <strong>
                  {{ 'User.Congratulations' | translate }}
                </strong>
                {{ 'User.PasswordChanged' | translate }}
              </p>

              <!-- login page redirection -->
              <p class="text-center">
                <a [routerLink]="['/!user', '!login'] | localize">
                  {{ 'Action.Login' | translate }}
                </a>
              </p>
            </div>
          </ng-container>
        </form>
      </div>
    </div>
  }
</div>
