<header class="recover-password-page__header text-center mb-4">
  <h1 id="recover-password-title" class="auth-title mb-3">Recuperar contraseña</h1>
  <p class="recover-password-page__description mb-0">
    Ingresá tu Email para restablecer tu Contraseña.
  </p>
</header>

<form
  class="recover-password-page__form d-grid gap-3"
  novalidate
  aria-labelledby="recover-password-title"
  [formGroup]="form"
  (ngSubmit)="onSubmit()"
>
  <div class="d-grid gap-1">
    <label class="visually-hidden" for="recover-password-email">Email</label>
    <app-input
      id="recover-password-email"
      type="email"
      placeholder="Email"
      [value]="form.controls.email.value"
      [invalid]="showEmailError()"
      (valueChange)="updateEmail($event)"
    />
    @if (getEmailError(); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
    @if (serverError(); as errorMessage) {
      <small class="text-danger" role="alert">{{ errorMessage }}</small>
    }
  </div>

  <div class="d-grid gap-2 text-center">
    <app-button
      type="submit"
      hostClass="w-100 d-block"
      buttonClass="w-100"
      [disabled]="isSubmitting()"
    >
      {{ isSubmitting() ? 'Enviando...' : 'Recuperar acceso' }}
    </app-button>

    <app-button
      type="button"
      variant="borderless"
      hostClass="w-100 d-block text-center"
      buttonClass="recover-password-page__back-action px-3 py-2"
      (click)="goToLogin()"
    >
      Volver
    </app-button>
  </div>
</form>
