<form
  class="checkout-form"
  novalidate
  [formGroup]="form()"
  (ngSubmit)="submit()"
>
  <div class="checkout-form__fields">
    <div class="form-group">
      <label for="checkout-nombre">
        Nombre y Apellido <span class="required" aria-hidden="true">*</span>
      </label>
      <app-input
        id="checkout-nombre"
        type="text"
        [value]="form().controls.nombre.value"
        [invalid]="showControlError('nombre')"
        [disabled]="form().controls.nombre.disabled"
        (valueChange)="updateField('nombre', $event)"
      />
      @if (getControlError('nombre'); as errorMessage) {
        <small class="error">{{ errorMessage }}</small>
      }
    </div>

    <div class="form-group">
      <label for="checkout-email">
        Email <span class="required" aria-hidden="true">*</span>
      </label>
      <app-input
        id="checkout-email"
        type="email"
        [value]="form().controls.email.value"
        [invalid]="showControlError('email')"
        [disabled]="form().controls.email.disabled"
        (valueChange)="updateField('email', $event)"
      />
      @if (getControlError('email'); as errorMessage) {
        <small class="error">{{ errorMessage }}</small>
      }
    </div>

    <div class="form-group">
      <label for="checkout-dni">
        DNI <span class="required" aria-hidden="true">*</span>
      </label>
      <app-input
        id="checkout-dni"
        type="text"
        [value]="form().controls.dni.value"
        [invalid]="showControlError('dni')"
        [disabled]="form().controls.dni.disabled"
        (valueChange)="updateField('dni', $event)"
      />
      @if (getControlError('dni'); as errorMessage) {
        <small class="error">{{ errorMessage }}</small>
      }
    </div>

    <div class="form-group">
      <label for="checkout-telefono">
        Telefono <span class="required" aria-hidden="true">*</span>
      </label>
      <app-input
        id="checkout-telefono"
        type="text"
        [value]="form().controls.telefono.value"
        [invalid]="showControlError('telefono')"
        [disabled]="form().controls.telefono.disabled"
        (valueChange)="updateField('telefono', $event)"
      />
      @if (getControlError('telefono'); as errorMessage) {
        <small class="error">{{ errorMessage }}</small>
      }
    </div>
  </div>

  <div class="checkout-form__actions">
    <app-button
      type="button"
      variant="cancel"
      hostClass="checkout-form__action-btn"
      buttonClass="w-100"
      (click)="cancelStep.emit()"
    >
      Cancelar
    </app-button>
    <app-button
      type="submit"
      hostClass="checkout-form__action-btn"
      buttonClass="w-100"
    >
      Continuar
    </app-button>
  </div>
</form>
