<form [formGroup]="form" class="space-y-4 p-4">
  <!-- Header -->
  <div class="flex items-center justify-between gap-2 pb-3 border-b">
    <div>
      <h3 class="font-semibold text-sm">{{ course.nom }}</h3>
      <p class="text-xs text-gray-500">
        {{ course.nom }}
      </p>
    </div>
    <span class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-700">
      {{ reqLen() }} chevaux / {{ maxNum() }} partants
    </span>
  </div>

  <!-- Action Buttons -->
  <div class="flex gap-x-3">
    <button
      type="button"
      class="flex-1 px-3 py-2 text-sm rounded bg-blue-400 text-white hover:bg-blue-600 disabled:opacity-50"
      (click)="onSave()"
      [disabled]="!canSave()">
      Enregistrer
    </button>
    <button
      type="button"
      class="flex-1 px-3 py-2 text-sm rounded border border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100 disabled:opacity-50"
      (click)="validate.emit()"
      [disabled]="!canValidate()">
      Valider
    </button>
    <button
      type="button"
      class="flex-1 px-3 py-2 text-sm rounded border border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 disabled:opacity-50"
      (click)="confirm.emit()"
      [disabled]="!canConfirm()"
    >
      Confirmer
    </button>
  </div>

  <!-- Places List -->
  <div class="space-y-3">
    @for (pg of places.controls; track $index; let i = $index) {
    <div
      class="border rounded p-3"
      [class.bg-blue-50]="hasExAequoAtPlace(i)"
      [class.border-blue-300]="hasExAequoAtPlace(i)"
      [class.opacity-50]="isPlaceSkipped(i)"
      [class.pointer-events-none]="isPlaceSkipped(i)"
    >
      <div class="flex items-center justify-between mb-2">
        <div class="flex items-center gap-2">
          @if (!isPlaceSkipped(i)) {
          <span
            class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold"
            [class.bg-blue-500]="hasExAequoAtPlace(i)"
            [class.text-white]="hasExAequoAtPlace(i)"
          >
            {{ getActualPlaceNumber(i) }}
          </span>
          <span class="text-sm font-medium">Place {{ getActualPlaceNumber(i) }}</span>
          @if (hasExAequoAtPlace(i)) {
          <span class="text-xs px-1.5 py-0.5 rounded bg-blue-200 text-blue-700">Ex-aequo</span>
          } } @else {
          <span
            class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-xs font-semibold text-gray-400"
          >
            —
          </span>
          <span class="text-sm font-medium text-gray-400">Place sautée</span>
          }
        </div>
        @if (!isPlaceSkipped(i)) {
        <button
          type="button"
          class="text-xs px-2 py-1 rounded border hover:bg-gray-50"
          (click)="addTie(i)"
        >
          + Ex æquo
        </button>
        }
      </div>

      @if (!isPlaceSkipped(i)) {
      <!-- Selected Horses -->
      @if (hasHorsesAtPlace(i)) {
      <div class="flex flex-wrap gap-2 mb-2">
        @for (ctrl of picksAt(i).controls; track $index; let j = $index) { @if (typeof ctrl.value
        === 'number') {
        <div
          class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-mono"
          [class.bg-blue-500]="hasExAequoAtPlace(i)"
          [class.text-white]="hasExAequoAtPlace(i)"
          [class.bg-emerald-500]="!hasExAequoAtPlace(i)"
          [class.text-white]="!hasExAequoAtPlace(i)"
        >
          {{ ctrl.value }}
          <button type="button" class="ml-1 hover:opacity-70" (click)="removePick(i, j)">×</button>
        </div>
        } }
      </div>
      }

      <!-- Select Dropdowns -->
      <div class="space-y-2">
        @for (ctrl of picksAt(i).controls; track $index; let j = $index) {
        <div class="flex items-center gap-2">
          <z-select [formControl]="ctrl" [zPlaceholder]="(j + 1).toString()" class="flex-1">
            @for (num of optionsForPlace(i, j); track num) {
            <z-select-item [zValue]="num.toString()">{{ num }}</z-select-item>
            }
          </z-select>
          @if (ctrl.invalid && ctrl.touched) {
          <span class="text-xs text-red-500">Requis</span>
          }
        </div>
        }
      </div>
      }
    </div>
    }
  </div>

  <!-- Combinations Display -->
  @if (combinations().length > 0) {
  <div class="p-3 bg-blue-50 rounded border border-blue-200">
    <div class="text-sm font-semibold mb-2 text-blue-900">
      {{ combinations().length }} combinaisons
    </div>
    <div class="flex flex-wrap gap-2">
      @for (combo of combinations(); track $index) {
      <span class="px-2 py-1 bg-white rounded border border-blue-200 text-xs font-mono">{{
        combo.join('-')
      }}</span>
      }
    </div>
  </div>
  }
</form>
