<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">Réunions</h1>
    <button z-button (click)="openCreate()">Nouvelle réunion</button>
  </div>

  <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 réunions</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">Réunions à venir</div>
      <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-1">
        {{ upcomingReunions() }}
      </div>
    </z-card>

    <z-card class="text-center py-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Réunions passées</div>
      <div class="text-3xl font-bold text-amber-600 dark:text-amber-400 mt-1">
        {{ pastReunions() }}
      </div>
    </z-card>

    <z-card class="text-center py-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Hippodromes concernés</div>
      <div class="text-3xl font-bold text-green-600 dark:text-green-400 mt-1">
        {{ uniqueHippodromes() }}
      </div>
    </z-card>
  </div>

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

  <div class="rounded-2xl overflow-hidden">
    <app-data-table
      [columns]="cols"
      [data]="rows()"
      [loading]="loading()"
      [sort]="sort()"
      (sortChange)="sort.set($event)"
    >
      <ng-template #rowActions let-row>
        <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)"
          >
            <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)"
          >
            <lucide-angular name="trash-2" class="size-5"></lucide-angular>
          </button>
        </div>
      </ng-template>
    </app-data-table>

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

  @if (modalOpen()) {
  <app-modal [open]="modalOpen()" [title]="modalTitle()" size="md" (close)="closeModal()">
    <app-reunion-form
      [value]="editingItem()"
      (save)="onFormSave($event)"
      (cancel)="closeModal()"
    ></app-reunion-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>
