@if (showChangePasswordButton) {
  <div class="form-group">
    <button
      class="btn btn-default"
      type="button"
      (click)="toggleChangePassword()"
      data-cy="c8y-new-password--change-button"
    >
      @if (!changePassword) {
        {{ 'Change password' | translate }}
      } @else {
        {{ 'Cancel password change' | translate }}
      }
    </button>
  </div>
}

@if (changePassword) {
  <div class="row content-flex-50">
    <div class="col-6">
      <c8y-form-group>
        <label
          for="newPassword"
          translate
        >
          Password
        </label>
        <c8y-password-input
          name="newPassword"
          required
          [id]="'newPassword'"
          #newPassword="ngModel"
          [(ngModel)]="model.newPassword"
          (change)="newPasswordChanged()"
          (input)="newPasswordConfirm.control.updateValueAndValidity()"
          c8yPasswordValidation
          [passwordStrengthEnforced]="passwordEnforced"
          [minLength]="effectiveMinLength"
          [autocomplete]="'new-password'"
        ></c8y-password-input>
      </c8y-form-group>

      <c8y-form-group>
        <label
          for="newConfirmPassword"
          translate
        >
          Confirm password
        </label>
        <c8y-password-input
          name="newPasswordConfirm"
          required
          [id]="'newConfirmPassword'"
          #newPasswordConfirm="ngModel"
          [(ngModel)]="model.newPasswordConfirm"
          passwordConfirm="newPassword"
          [autocomplete]="'new-password'"
        ></c8y-password-input>
      </c8y-form-group>
    </div>
    <div class="col-6">
      <c8y-password-check-list
        [password]="model.newPassword"
        [strengthEnforced]="passwordEnforced"
        (onRequirementsFulfilled)="updateValidity($event)"
      ></c8y-password-check-list>
    </div>
  </div>
}