<div
  class="flex flex-col sm:flex-row rounded-b-xl border border-gray-200 items-center justify-between gap-3 p-3 border-t dark:border-gray-800 text-sm"
>
  <!-- Affichage du total -->
  <div class="text-gray-600 dark:text-gray-400 text-center sm:text-left">
    Affichage de <strong>{{ (page() - 1) * perPage() + 1 }}</strong> à
    <strong>{{ page() * perPage() < total() ? page() * perPage() : total() }}</strong>
    sur <strong>{{ total() }}</strong> résultat{{ total() > 1 ? 's' : '' }}
  </div>

  <!-- Contrôles -->
  <div class="flex flex-wrap items-center justify-center gap-2">
    <!-- Sélecteur du nombre par page -->
    <label class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
      <span>Afficher</span>
      <select
        class="h-9 px-2 text-center text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 cursor-pointer"
        (change)="handlePerPageChange($event)"
        [value]="perPage()"
      >
        @for (s of pageSizes(); track s) {
        <option [value]="s">{{ s }}</option>
        }
      </select>
      <span>par page</span>
    </label>

    <!-- Pagination avancée -->
    <nav class="flex items-center gap-1 select-none" aria-label="Pagination">
      <!-- Bouton précédent -->
      <button
        class="flex items-center justify-center h-9 w-9 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
        (click)="prev()"
        [disabled]="page() <= 1"
        aria-label="Page précédente"
      >
        <i class="icon-chevron-left"></i>
      </button>

      <!-- Pages visibles -->
      @for (p of visiblePages(); track p) {
      <ng-container>
        @if (p === '...') {
        <span class="px-2 text-gray-400 dark:text-gray-500">…</span>
        } @else {
        <button
          class="h-9 min-w-[2rem] px-2 rounded-md border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition"
          [class.bg-indigo-600]="p === page()"
          [class.text-white]="p === page()"
          [class.border-indigo-500]="p === page()"
          (click)="goToPage(+p)"
        >
          {{ p }}
        </button>
        }
      </ng-container>
      }

      <!-- Bouton suivant -->
      <button
        class="flex items-center justify-center h-9 w-9 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
        (click)="next()"
        [disabled]="page() >= totalPages()"
        aria-label="Page suivante"
      >
        <i class="icon-chevron-right"></i>
      </button>
    </nav>

    <!-- Sélecteur de saut direct -->
    <label class="flex items-center gap-2 text-gray-700 dark:text-gray-300 ml-2">
      <span class="text-sm">Aller directement à la page :</span>
      <select
        class="h-9 px-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-indigo-500 focus:border-indigo-500 transition-all cursor-pointer"
        (change)="selectPage($event)"
        [value]="page()"
      >
        @for (p of totalPagesArray(); track p) {
        <option [value]="p">Page {{ p }}</option>
        }
      </select>
    </label>
  </div>
</div>
