<!-- Pagination responsive -->
<section class="flex justify-center mt-8 sm:mt-12" aria-label="Pagination">
  <ul class="flex flex-wrap gap-2 items-center justify-center">
    <li>
      <button
        class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 transition-colors dark:text-white text-gray-800"
        [class.opacity-50]="currentPage === 1"
        [class.pointer-events-none]="currentPage === 1"
        [class.hover:bg-gray-100]="currentPage > 1"
        (click)="goToPreviousPage()"
        type="button"
        [disabled]="currentPage === 1"
      >
        Précédent
      </button>
    </li>

    <li>
      <span class="px-4 py-2 rounded-lg bg-indigo-600 text-white font-medium">
        {{ currentPage }} / {{ filters.totalPages! }}
      </span>
    </li>

    <li>
      <button
        class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 transition-colors dark:text-white text-gray-800"
        [class.opacity-50]="currentPage >= filters.totalPages!"
        [class.pointer-events-none]="currentPage >= filters.totalPages!"
        [class.hover:bg-gray-100]="currentPage < filters.totalPages!"
        (click)="goToNextPage()"
        type="button"
        [disabled]="currentPage >= filters.totalPages!"
      >
        Suivant
      </button>
    </li>
  </ul>
</section>
