<div>
  <div class="d-flex justify-content-center">
    @if (account$ | async; as account) {
      <div class="col-md-8">
        <h2 jhiTranslate="password.title" [translateValues]="{ username: account.login }">
          Palavra-passe para [<strong>{{ account.login }}</strong
          >]
        </h2>

        @if (success()) {
          <div class="alert alert-success" jhiTranslate="password.messages.success">
            <strong>Palavra-passe alterada com sucesso!</strong>
          </div>
        }
        @if (error()) {
          <div class="alert alert-danger" jhiTranslate="password.messages.error">
            <strong>Ocorreu um erro!</strong> A palavra-passe não pode ser alterada.
          </div>
        }
        @if (doNotMatch()) {
          <div class="alert alert-danger" jhiTranslate="global.messages.error.dontmatch">
            A palavra-passe e a sua confirmação devem ser iguais!
          </div>
        }

        <form name="form" (ngSubmit)="changePassword()" [formGroup]="passwordForm">
          <div class="mb-3">
            <label class="form-label" for="currentPassword" jhiTranslate="global.form.currentpassword.label">Palavra-passe actual</label>
            <input
              type="password"
              class="form-control"
              id="currentPassword"
              name="currentPassword"
              placeholder="{{ 'global.form.currentpassword.placeholder' | translate }}"
              formControlName="currentPassword"
              data-cy="currentPassword"
            />

            @if (
              passwordForm.get('currentPassword')!.invalid &&
              (passwordForm.get('currentPassword')!.dirty || passwordForm.get('currentPassword')!.touched)
            ) {
              <div>
                @if (passwordForm.get('currentPassword')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.required"
                    >A palavra-passe é obrigatória.</small
                  >
                }
              </div>
            }
          </div>

          <div class="mb-3">
            <label class="form-label" for="newPassword" jhiTranslate="global.form.newpassword.label">Nova palavra-passe</label>
            <input
              type="password"
              class="form-control"
              id="newPassword"
              name="newPassword"
              placeholder="{{ 'global.form.newpassword.placeholder' | translate }}"
              formControlName="newPassword"
              data-cy="newPassword"
            />

            @if (
              passwordForm.get('newPassword')!.invalid &&
              (passwordForm.get('newPassword')!.dirty || passwordForm.get('newPassword')!.touched)
            ) {
              <div>
                @if (passwordForm.get('newPassword')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.required"
                    >A palavra-passe é obrigatória.</small
                  >
                }

                @if (passwordForm.get('newPassword')?.errors?.minlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.minlength"
                    >A palavra-passe deve ter pelo menos 4 caracteres</small
                  >
                }

                @if (passwordForm.get('newPassword')?.errors?.maxlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.maxlength"
                    >A palavra-passe não pode ter mais de 50 caracteres</small
                  >
                }
              </div>
            }

            <jhi-password-strength-bar [passwordToCheck]="passwordForm.get('newPassword')!.value"></jhi-password-strength-bar>
          </div>

          <div class="mb-3">
            <label class="form-label" for="confirmPassword" jhiTranslate="global.form.confirmpassword.label"
              >Confirmação de nova palavra-passe</label
            >
            <input
              type="password"
              class="form-control"
              id="confirmPassword"
              name="confirmPassword"
              placeholder="{{ 'global.form.confirmpassword.placeholder' | translate }}"
              formControlName="confirmPassword"
              data-cy="confirmPassword"
            />

            @if (
              passwordForm.get('confirmPassword')!.invalid &&
              (passwordForm.get('confirmPassword')!.dirty || passwordForm.get('confirmPassword')!.touched)
            ) {
              <div>
                @if (passwordForm.get('confirmPassword')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.confirmpassword.required"
                    >A confirmação da palavra-passe é obrigatória.</small
                  >
                }

                @if (passwordForm.get('confirmPassword')?.errors?.minlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.confirmpassword.minlength"
                    >A confirmação da palavra-passe deve ter pelo menos 4 caracteres</small
                  >
                }

                @if (passwordForm.get('confirmPassword')?.errors?.maxlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.confirmpassword.maxlength"
                    >A confirmação da palavra-passe não pode ter mais de 50 caracteres</small
                  >
                }
              </div>
            }
          </div>

          <button
            type="submit"
            [disabled]="passwordForm.invalid"
            class="btn btn-primary"
            data-cy="submit"
            jhiTranslate="password.form.button"
          >
            Guardar
          </button>
        </form>
      </div>
    }
  </div>
</div>
