<header class="register-page__header text-center mb-4">
  <h1 id="register-title" class="auth-title">CREAR CUENTA</h1>
</header>

<form
  class="register-page__form d-grid gap-3"
  novalidate
  aria-labelledby="register-title"
  [formGroup]="form"
  (ngSubmit)="onSubmit()"
>
  <div class="d-grid gap-3">
    <label class="visually-hidden" for="register-full-name">Nombre y Apellido</label>
    <app-input
      id="register-full-name"
      placeholder="Nombre y Apellido"
      [value]="form.controls.nombre_apellido.value"
      [invalid]="showControlError('nombre_apellido')"
      (valueChange)="updateField('nombre_apellido', $event)"
    />
    @if (getControlError('nombre_apellido'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }

    <label class="visually-hidden" for="register-email">Email</label>
    <app-input
      id="register-email"
      type="email"
      placeholder="Email"
      [value]="form.controls.email.value"
      [invalid]="showControlError('email')"
      (valueChange)="updateField('email', $event)"
    />
    @if (getControlError('email'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }

    <label class="visually-hidden" for="register-password">Contraseña</label>
    <app-input
      id="register-password"
      type="password"
      placeholder="Contraseña"
      [value]="form.controls.password.value"
      [invalid]="showControlError('password')"
      (valueChange)="updateField('password', $event)"
    />
    @if (getControlError('password'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }

    <label class="visually-hidden" for="register-password-repeat">Repetir Contraseña</label>
    <app-input
      id="register-password-repeat"
      type="password"
      placeholder="Repetir Contraseña"
      [value]="form.controls.password_confirmation.value"
      [invalid]="showControlError('password_confirmation')"
      (valueChange)="updateField('password_confirmation', $event)"
    />
    @if (getControlError('password_confirmation'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>

  <div class="d-grid gap-2 text-center">
    @if (serverError(); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
    <app-button
      type="submit"
      hostClass="w-100 d-block"
      buttonClass="w-100"
      [disabled]="isSubmitting()"
    >
      {{ isSubmitting() ? 'Creando cuenta...' : 'Crear Cuenta' }}
    </app-button>
    <app-button
      type="button"
      variant="borderless"
      hostClass="w-100 d-block text-center"
      buttonClass="register-page__back-action px-3 py-2"
      [disabled]="isSubmitting()"
      (click)="goToLogin()"
    >
      Volver
    </app-button>
  </div>
</form>
