<!-- CHANGE PASSWORD -->
<div class="row">
  <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
    <form class="auth-form" [formGroup]="changePasswordForm" (ngSubmit)="onSubmit()" autocomplete="off">
      <h1 class="heading heading--md heading--separator">
        {{ 'User.PasswordChange' | translate }}
      </h1>

      <!-- api notifications  -->
      <app-notifications aria-live="polite"></app-notifications>

      <!-- CURRENT PASSWORD -->
      <div
        class="form-group"
        [ngClass]="{
          'form-group-invalid':
            changePasswordForm.controls.old_password.invalid && changePasswordForm.controls.old_password.touched,
        }">
        <label for="old_password">
          {{ 'User.CurrentPassword' | translate }}
          <small>({{ 'Validation.RequiredField' | translate | lowercase }})</small>
        </label>

        <!-- Current Password field  -->
        <div style="position: relative">
          <input
            type="password"
            class="form-control"
            id="old_password"
            placeholder="{{ 'Action.Enter' | translate }} {{ 'User.CurrentPassword' | translate | lowercase }}"
            [attr.aria-describedby]="'old_password'"
            [attr.aria-invalid]="
              changePasswordForm.controls.old_password.invalid && changePasswordForm.controls.old_password.touched
            "
            formControlName="old_password" />
        </div>

        <!-- Current Password validation error -->
        <small
          class="form-text text-err"
          id="old_password"
          *ngIf="changePasswordForm.controls.old_password.invalid && changePasswordForm.controls.old_password.touched"
          @toggleVertically>
          "{{ 'User.CurrentPassword' | translate }}"
          {{ 'Validation.IsRequired' | translate }}
        </small>
      </div>

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

        <!-- 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]="
              changePasswordForm.controls.new_password1.invalid && changePasswordForm.controls.new_password1.touched
            "
            formControlName="new_password1"
            (focus)="showPasswordHint = true"
            (blur)="showPasswordHint = false"
            (mouseenter)="showPasswordHint = true"
            (mouseleave)="showPasswordHint = false" />

          <!-- 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>

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

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

      <!-- PASSWORD CONFIRMATION -->
      <div
        class="form-group"
        [ngClass]="{
          'form-group-invalid':
            (changePasswordForm.controls.new_password2nvalid && changePasswordForm.controls.new_password2.touched) ||
            changePasswordForm.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 password2_other_error'"
          [attr.aria-invalid]="
            (changePasswordForm.controls.new_password2nvalid && changePasswordForm.controls.new_password2.touched) ||
            changePasswordForm.hasError('notEqualValues')
          " />

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

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

        <!-- submit -->
        <button type="submit" class="btn btn-primary" *ngIf="changePasswordForm.valid">
          {{ 'User.ChangePassword' | translate | uppercase }}
        </button>
      </div>
    </form>
  </div>
</div>
