<header class="reset-password-page__header text-center mb-4">
  <h1 id="reset-password-title" class="auth-title">Restablecer contraseña</h1>
</header>

<form
  class="reset-password-page__form d-grid gap-3"
  novalidate
  aria-labelledby="reset-password-title"
  [formGroup]="form"
  (ngSubmit)="onSubmit()"
>
  <div class="d-grid gap-1">
    <label class="visually-hidden" for="reset-password-new">Nueva Contraseña</label>
    <app-input
      id="reset-password-new"
      type="password-toggle"
      placeholder="Nueva Contraseña"
      [value]="form.controls.password.value"
      [invalid]="showControlError('password')"
      [visible]="passwordVisible()"
      (valueChange)="updatePassword('password', $event)"
      (visibleChange)="setPasswordVisibility($event)"
    />
    @if (getControlError('password'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>

  <div class="d-grid gap-1">
    <label class="visually-hidden" for="reset-password-confirmation">
      Repetir Nueva Contraseña
    </label>
    <app-input
      id="reset-password-confirmation"
      type="password-toggle"
      placeholder="Repetir Nueva Contraseña"
      [value]="form.controls.password_confirmation.value"
      [invalid]="showControlError('password_confirmation')"
      [visible]="passwordVisible()"
      (valueChange)="updatePassword('password_confirmation', $event)"
      (visibleChange)="setPasswordVisibility($event)"
    />
    @if (getControlError('password_confirmation'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>

  @if (serverError(); as errorMessage) {
    <small class="text-danger" role="alert">{{ errorMessage }}</small>
  }

  <app-button
    type="submit"
    hostClass="w-100 d-block"
    buttonClass="w-100"
    [disabled]="isSubmitting()"
  >
    {{ isSubmitting() ? 'Guardando...' : 'Guardar' }}
  </app-button>
</form>
