<form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-5">
  <!-- Code -->
  <z-form-field>
    <label z-form-label zRequired for="code">Code</label>
    <z-form-control [errorMessage]="invalid('code') ? 'Le code est requis' : ''">
      <input z-input id="code" type="text" placeholder="Ex: REU-001" formControlName="code" />
    </z-form-control>
  </z-form-field>

  <!-- Nom + Numéro -->
  <div class="flex gap-4 flex-col sm:flex-row">
    <z-form-field class="flex-1">
      <label z-form-label zRequired for="nom">Nom</label>
      <z-form-control [errorMessage]="invalid('nom') ? 'Le nom est requis' : ''">
        <input
          z-input
          id="nom"
          type="text"
          placeholder="Ex: Grand Prix de Bamako"
          formControlName="nom"
        />
      </z-form-control>
    </z-form-field>

    <z-form-field class="w-32">
      <label z-form-label zRequired for="numero">Numéro</label>
      <z-form-control [errorMessage]="invalid('numero') ? 'Numéro invalide' : ''">
        <input z-input id="numero" type="number" min="1" formControlName="numero" />
      </z-form-control>
    </z-form-field>
  </div>

  <!-- Date -->
  <z-form-field>
    <label z-form-label zRequired for="date">Date</label>
    <z-form-control [errorMessage]="invalid('date') ? 'La date est requise' : ''">
      <input z-input id="date" type="date" formControlName="date" />
    </z-form-control>
  </z-form-field>

  <!-- Hippodrome -->
  <z-form-field>
    <label z-form-label zRequired for="hippodrome">Hippodrome</label>
    <z-form-control
      [errorMessage]="invalid('hippodromeId') ? 'Veuillez sélectionner un hippodrome' : ''"
    >
      <z-select
        id="hippodrome"
        placeholder="Sélectionner un hippodrome"
        formControlName="hippodromeId"
        [zLabel]="selectedHippodromeLabel() || ''"
        (zSelectionChange)="onHippodromeSelectionChange($event)"
      >
        @if (loadingHippodromes()) {
        <z-select-item [zValue]="''" disabled>Chargement des hippodromes...</z-select-item>
        } @else { @for (h of hippodromes(); track h.id) {
        <z-select-item [zValue]="h.id">{{ h.nom }} ({{ h.ville }}, {{ h.pays }})</z-select-item>
        } }
      </z-select>
    </z-form-control>
  </z-form-field>

  <!-- Statut -->
  <z-form-field>
    <label z-form-label zRequired for="statut">Statut</label>
    <z-form-control>
      <z-select id="statut" placeholder="Sélectionner un statut" formControlName="statut">
        @for (s of statuts; track s.value) {
        <z-select-item [zValue]="s.value">{{ s.label }}</z-select-item>
        }
      </z-select>
    </z-form-control>
  </z-form-field>

  <!-- Total des courses -->
  <z-form-field>
    <label z-form-label for="totalCourses">Total des courses</label>
    <z-form-control [errorMessage]="invalid('totalCourses') ? 'Doit être un nombre positif' : ''">
      <input
        z-input
        id="totalCourses"
        type="number"
        min="1"
        placeholder="Ex: 8"
        formControlName="totalCourses"
      />
    </z-form-control>
  </z-form-field>

  <!-- Buttons -->
  @if (showInternalActions()) {
  <div class="flex justify-end gap-2 pt-4">
    <button z-button type="submit" [disabled]="submitting()">
      {{ submitting() ? 'Enregistrement…' : 'Enregistrer' }}
    </button>
    <button z-button zType="outline" type="button" (click)="cancel.emit()">Annuler</button>
  </div>
  }
</form>
