<form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-5">
  <!-- Ligne Nom / Ville -->
  <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: Longchamp" formControlName="nom" />
      </z-form-control>
    </z-form-field>

    <z-form-field class="flex-1">
      <label z-form-label zRequired for="ville">Ville</label>
      <z-form-control [errorMessage]="invalid('ville') ? 'La ville est requise' : ''">
        <input z-input id="ville" type="text" placeholder="Ex: Paris" formControlName="ville" />
      </z-form-control>
    </z-form-field>
  </div>

  <!-- Pays -->
  <z-form-field>
    <label z-form-label zRequired for="pays">Pays</label>
    <z-form-control [errorMessage]="showPaysError() ? 'Le pays est requis' : ''">
      <z-select id="pays" placeholder="Sélectionner un pays" formControlName="pays">
        @for (c of countries; track c.value) {
        <z-select-item [zValue]="c.value">{{ c.label }}</z-select-item>
        }
      </z-select>
    </z-form-control>
  </z-form-field>

  <!-- Capacité -->
  <z-form-field>
    <label z-form-label for="capacite">Capacité (places)</label>
    <z-form-control
      [errorMessage]="invalid('capacite') ? 'La capacité doit être un nombre positif' : ''"
    >
      <input
        z-input
        id="capacite"
        type="number"
        placeholder="Ex: 15000"
        min="0"
        formControlName="capacite"
      />
    </z-form-control>
  </z-form-field>

  <!-- Description -->
  <z-form-field>
    <label z-form-label for="description">Description</label>
    <z-form-control>
      <textarea
        z-input
        id="description"
        rows="3"
        placeholder="Brève description de l’hippodrome"
        formControlName="description"
      ></textarea>
    </z-form-control>
  </z-form-field>

  <!-- Statut Actif -->
  <z-form-field>
    <label z-form-label for="actif">Statut</label>
    <div class="flex items-center gap-2 mt-1">
      <input
        type="checkbox"
        id="actif"
        formControlName="actif"
        class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500"
      />
      <label for="actif" class="text-sm text-gray-700 dark:text-gray-300">Actif</label>
    </div>
  </z-form-field>

  <!-- Actions (autonomes ou masquées dans modale) -->
  @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>
