<form [formGroup]="form" class="space-y-4 p-4">
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-3">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
        Déclarer les non-partants
      </h3>
      <span
        class="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300"
      >
        {{ chosenNumbers().length }} sélection(s) / {{ partantsMax() }} partants
      </span>
    </div>
    <button
      z-button
      zType="default"
      type="button"
      (click)="addRow()"
      [disabled]="!hasFreeSlots()"
      title="Ajouter une ligne"
    >
      ➕ Ajouter
    </button>
  </div>

  <div formArrayName="nonPartants" class="space-y-3">
    @for (row of rows.controls; track $index) {
    <div
      class="grid grid-cols-1 md:grid-cols-3 gap-3 border rounded-xl p-4 bg-gray-50 dark:bg-gray-800/50 relative"
      [formGroupName]="$index"
    >
      <z-form-field>
        <label z-form-label>Numéro (1–{{ partantsMax() }})</label>
        <z-form-control>
          <z-select formControlName="numero" placeholder="Choisir un numéro">
            @for (num of optionsForRow($index); track num) {
            <z-select-item [zValue]="num.toString()">{{ num }}</z-select-item>
            }
          </z-select>
        </z-form-control>
        @if (rows.at($index).get('numero')?.errors?.['range']) {
        <div class="text-red-500 text-xs mt-1">Numéro en dehors de la plage autorisée.</div>
        } @if (rows.at($index).get('numero')?.hasError('required') &&
        rows.at($index).get('numero')?.touched) {
        <div class="text-red-500 text-xs mt-1">Ce champ est obligatoire.</div>
        }
      </z-form-field>

      <z-form-field>
        <label z-form-label>Motif</label>
        <z-form-control>
          <input z-input formControlName="motif" placeholder="Blessure, forfait..." />
        </z-form-control>
      </z-form-field>

      <z-form-field>
        <label z-form-label>Déclaré par</label>
        <z-form-control>
          <input z-input formControlName="declarePar" readonly />
        </z-form-control>
      </z-form-field>

      <button
        type="button"
        class="absolute top-2 right-2 text-red-600 hover:text-red-800 text-sm font-semibold"
        (click)="removeRow($index)"
        *ngIf="rows.length > 1"
        title="Supprimer la ligne"
      >
        ✖
      </button>
    </div>
    }
  </div>
</form>
