<header class="recover-password-code-page__header text-center mb-4">
  <h1 id="recover-password-code-title" class="auth-title mb-4">Ingresá el código</h1>
  <p class="recover-password-code-page__description mb-0">
    Te enviamos un código a <strong>{{ email }}</strong>
  </p>
  <p class="recover-password-code-page__description fst-italic mb-0">
    Recordá revisar en Correo no deseado.
  </p>
</header>

<form
  class="recover-password-code-page__form d-grid gap-4"
  novalidate
  aria-labelledby="recover-password-code-title"
  [formGroup]="form"
  (ngSubmit)="onSubmit()"
>
  <div>
    <fieldset class="border-0 p-0 m-0">
      <legend class="visually-hidden">Código de recuperación de cuatro dígitos</legend>
      <div class="recover-password-code-page__inputs d-flex justify-content-center gap-2">
        <app-input
          id="recover-password-code-digit-1"
          type="text"
          [maxlength]="1"
          [value]="form.controls.digit1.value"
          [invalid]="isCodeInvalid()"
          (valueChange)="updateDigit('digit1', $event)"
          (pasteEvent)="pasteCode($event)"
        />
        <app-input
          id="recover-password-code-digit-2"
          type="text"
          [maxlength]="1"
          [value]="form.controls.digit2.value"
          [invalid]="isCodeInvalid()"
          (valueChange)="updateDigit('digit2', $event)"
          (pasteEvent)="pasteCode($event)"
        />
        <app-input
          id="recover-password-code-digit-3"
          type="text"
          [maxlength]="1"
          [value]="form.controls.digit3.value"
          [invalid]="isCodeInvalid()"
          (valueChange)="updateDigit('digit3', $event)"
          (pasteEvent)="pasteCode($event)"
        />
        <app-input
          id="recover-password-code-digit-4"
          type="text"
          [maxlength]="1"
          [value]="form.controls.digit4.value"
          [invalid]="isCodeInvalid()"
          (valueChange)="updateDigit('digit4', $event)"
          (pasteEvent)="pasteCode($event)"
        />
      </div>
    </fieldset>

    @if (isCodeInvalid()) {
      <small class="text-danger d-block text-center mt-2">
        Ingresá los cuatro dígitos del código.
      </small>
    }

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

    <div class="text-center">
      <app-button
        type="button"
        variant="borderless"
        buttonClass="recover-password-code-page__resend-action px-3 py-2"
        [disabled]="isResending()"
        (click)="resendCode()"
      >
        {{ isResending() ? 'Reenviando...' : 'Reenviar Código' }}
      </app-button>
    </div>
  </div>

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

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