{{ $paginator := . }}
{{ $currentPage := .PageNumber }}
{{ $totalPages := .TotalPages }}

{{ if gt $totalPages 1 }}
<nav aria-label="Pagination" class="bg-white shadow-lg rounded-lg p-6 sm:p-8 my-4">
  <div class="flex items-center justify-center">
    <div class="flex items-center space-x-2 sm:space-x-3">
      <!-- Previous Button -->
      {{ if .HasPrev }}
        <a href="{{ .Prev.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150">
          <span class="sr-only">Précédent</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <span class="ml-1 hidden sm:inline">Précédent</span>
        </a>
      {{ else }}
        <span class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <span class="ml-1 hidden sm:inline">Précédent</span>
        </span>
      {{ end }}

      <!-- First Page -->
      {{ if gt $totalPages 1 }}
        <a href="{{ .First.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $currentPage 1 }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
          1
        </a>
      {{ end }}

      <!-- Ellipsis after first page if current page > 4 -->
      {{ if gt $currentPage 4 }}
        <span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500">
          ...
        </span>
      {{ end }}

      <!-- Pages around current page -->
      {{ range .Pagers }}
        {{ $pageNumber := .PageNumber }}
        {{ if and (gt $pageNumber 1) (lt $pageNumber $totalPages) (ge $pageNumber (sub $currentPage 1)) (le $pageNumber (add $currentPage 1)) }}
          {{ if ne $pageNumber 1 }}
            {{ if ne $pageNumber $totalPages }}
              <a href="{{ .URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $pageNumber $currentPage }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
                {{ $pageNumber }}
              </a>
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}

      <!-- Ellipsis before last page if current page < totalPages - 3 -->
      {{ if lt $currentPage (sub $totalPages 3) }}
        <span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500">
          ...
        </span>
      {{ end }}

      <!-- Last Page -->
      {{ if gt $totalPages 1 }}
        <a href="{{ .Last.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $currentPage $totalPages }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
          {{ $totalPages }}
        </a>
      {{ end }}

      <!-- Next Button -->
      {{ if .HasNext }}
        <a href="{{ .Next.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150">
          <span class="mr-1 hidden sm:inline">Suivant</span>
          <span class="sr-only">Suivant</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      {{ else }}
        <span class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
          <span class="mr-1 hidden sm:inline">Suivant</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </span>
      {{ end }}
    </div>
  </div>
</nav>
{{ end }}