<div class="min-h-screen flex flex-col gap-2">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Hippodromes</h1>
    <button z-button (click)="openCreate()">Nouvel hippodrome</button>
  </div>

  <!-- Cartes statistiques des hippodromes -->
  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <z-card class="text-center py-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Total des hippodromes</div>
      <div class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">
        {{ total() }}
      </div>
    </z-card>

    <z-card class="text-center py-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Pays représentés</div>
      <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-1">
        {{ uniqueCountries() }}
      </div>
    </z-card>

    <z-card class="text-center py-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Villes uniques</div>
      <div class="text-3xl font-bold text-emerald-600 dark:text-emerald-400 mt-1">
        {{ uniqueCities() }}
      </div>
    </z-card>

    <z-card class="text-center py-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Moyenne par pays</div>
      <div class="text-3xl font-bold text-amber-600 dark:text-amber-400 mt-1">
        {{ averageByCountry() }}
      </div>
    </z-card>
  </div>

  <app-search-bar placeholder="Rechercher (nom, ville, pays…)" (search)="onSearch($event)" />

  <div class="rounded-2xl overflow-hidden">
    <app-data-table
      [columns]="cols"
      [data]="rows()"
      [loading]="loading()"
      [sort]="sort()"
      (sortChange)="onSort($event)"
    >
      <!-- Template pour Statut -->
      <ng-template #statutTpl let-row>
        <span
          class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full"
          [class.bg-green-100]="row.actif"
          [class.text-green-800]="row.actif"
          [class.bg-red-100]="!row.actif"
          [class.text-red-800]="!row.actif"
        >
          <span
            class="h-2 w-2 rounded-full"
            [class.bg-green-500]="row.actif"
            [class.bg-red-500]="!row.actif"
          ></span>
          {{ row.actif ? 'Actif' : 'Inactif' }}
        </span>
      </ng-template>

      <!-- Template pour Date -->
      <ng-template #dateTpl let-row>
        <span class="text-gray-700 dark:text-gray-300">
          {{ row.createdAt | date : 'shortDate' }}
        </span>
      </ng-template>

      <!-- Actions par ligne avec le row injecté -->
      <ng-template #rowActions let-row let-i="index">
        <div class="flex flex-row gap-2">
          <button
            class="p-1 rounded text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-gray-800 cursor-pointer"
            (click)="openEdit(row)"
            aria-label="Modifier"
            title="Modifier"
          >
            <lucide-angular name="folder-pen" class="size-5"></lucide-angular>
          </button>
          <button
            class="p-1 rounded text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-gray-800 cursor-pointer"
            (click)="remove(row)"
            aria-label="Supprimer"
            title="Supprimer"
          >
            <lucide-angular name="trash-2" class="size-5"></lucide-angular>
          </button>
        </div>
      </ng-template>
    </app-data-table>

    <app-paginator
      [page]="page()"
      [perPage]="perPage()"
      [total]="total()"
      (pageChange)="page.set($event - 1)"
      (perPageChange)="onPerPage($event)"
      [pageSizes]="pageSize"
    />
  </div>

  <!-- MODALE CRÉATION / ÉDITION -->
  <app-modal [open]="modalOpen()" [title]="modalTitle()" size="md" (close)="closeModal()">
    <app-hippodrome-form
      [value]="editingItem()"
      (save)="onFormSave($event)"
      (cancel)="closeModal()"
      [showInternalActions]="false"
    ></app-hippodrome-form>

    <div modal-actions class="flex gap-2 justify-end">
      <z-button zType="destructive" (click)="closeModal()">Annuler</z-button>
      <z-button zType="default" (click)="submitChildForm()">Enregistrer</z-button>
    </div>
  </app-modal>
</div>
