<div>
  <h2 i18n>Please set a new password.</h2>
  <h4 i18n>You will be redirected to the login page afterwards.</h4>
  <form #frm="ngForm"
        [formGroup]="userForm"
        novalidate>

    <!-- Old password -->
    <div class="form-group has-feedback">
      <div class="input-group">
        <input class="form-control"
               type="password"
               placeholder="Old password..."
               id="oldpassword"
               formControlName="oldpassword"
               autocomplete="new-password"
               autofocus>
        <span class="input-group-append">
          <button class="btn btn-outline-light btn-password"
                  cdPasswordButton="oldpassword">
          </button>
        </span>
      </div>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('oldpassword', frm, 'required')"
            i18n>This field is required.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
            i18n>The old and new passwords must be different.</span>
    </div>

    <!-- New password -->
    <div class="form-group has-feedback">
      <div class="input-group">
        <input class="form-control"
               type="password"
               placeholder="New password..."
               id="newpassword"
               autocomplete="new-password"
               formControlName="newpassword">
        <span class="input-group-append">
          <button type="button"
                  class="btn btn-outline-light btn-password"
                  cdPasswordButton="newpassword">
          </button>
        </span>
      </div>
      <div class="password-strength-level">
        <div class="{{ passwordStrengthLevelClass }}"
             data-toggle="tooltip"
             title="{{ passwordValuation }}">
        </div>
      </div>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('newpassword', frm, 'required')"
            i18n>This field is required.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
            i18n>The old and new passwords must be different.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
        {{ passwordValuation }}
      </span>
    </div>

    <!-- Confirm new password -->
    <div class="form-group has-feedback">
      <div class="input-group">
        <input class="form-control"
               type="password"
               autocomplete="new-password"
               placeholder="Confirm new password..."
               id="confirmnewpassword"
               formControlName="confirmnewpassword">
        <span class="input-group-append">
          <button class="btn btn-outline-light btn-password"
                  cdPasswordButton="confirmnewpassword">
          </button>
        </span>
      </div>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
            i18n>This field is required.</span>
      <span class="invalid-feedback"
            *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
            i18n>Password confirmation doesn't match the new password.</span>
    </div>
  </form>
  <div class="form-footer">
    <cd-submit-button class="full-width"
                      btnClass="btn-block"
                      (submitAction)="onSubmit()"
                      [form]="userForm"
                      i18n="form action button|Example: Create Pool@@formActionButton">
      {{ action | titlecase }} {{ resource | upperFirst }}
    </cd-submit-button>
    <button class="btn btn-light"
            (click)="onCancel()">
      <ng-container i18n>Cancel</ng-container>
    </button>
  </div>
</div>
