<form
  (ngSubmit)="save()"
  [formGroup]="formGroup()!"
  class="console-app__password-input-form"
>
  @if (displayOldPasswordField()) {
  <div class="console-app__password-input-form-field">
    <mat-form-field appearance="outline">
      <mat-label>Old password: </mat-label>
      <input
        matInput
        type="password"
        formControlName="oldPassword"
        required
        autocomplete="current-password"
      />
      @if (hasError('oldPassword'); as errorText) {
      <mat-error>{{ errorText }}</mat-error>
      }
    </mat-form-field>
  </div>
  }
  <div class="console-app__password-input-form-field">
    <mat-form-field appearance="outline">
      <mat-label>New password: </mat-label>
      <input
        matInput
        type="password"
        formControlName="newPassword"
        required
        autocomplete="new-password"
      />
      @if (hasError('newPassword'); as errorText) {
      <mat-error>{{ errorText }}</mat-error>
      }
    </mat-form-field>
  </div>
  <div class="console-app__password-input-form-field">
    <mat-form-field appearance="outline">
      <mat-label>Confirm new password: </mat-label>
      <input
        matInput
        type="password"
        formControlName="newPasswordRepeat"
        required
        autocomplete="new-password"
      />
      @if (hasError('newPasswordRepeat'); as errorText) {
      <mat-error>{{ errorText }}</mat-error>
      }
    </mat-form-field>
  </div>
  <button
    mat-flat-button
    color="primary"
    [disabled]="!formGroup()?.valid"
    aria-label="Save new password"
    type="submit"
    class="console-app__password-input-form-save"
  >
    Save
  </button>
</form>
