{{ define "fragments/pagination" }}
  {{/* Params: Page (pagination.Page), TotalCount (int), BasePath (string), QueryParams (url.Values) */}}
  {{ $page := .Page }}
  {{ $totalCount := .TotalCount }}
  {{ $basePath := .BasePath }}
  {{ $queryParams := safeUrl .QueryParams.Encode }}

  {{ $prev := $page.Previous.Offset }}
  {{ $next := $page.Next.Offset }}
  {{ $lastPage := sub $totalCount (mod $totalCount $page.Limit) }}

  <div class="flex justify-center items-center mt-4 gap-5">
    <a
      class="
        flex items-center gap-1 no-underline hover:no-underline dark:text-white text-sm
        {{ if le $page.Offset 0 }}
          cursor-not-allowed opacity-50
        {{ end }}
      "
      {{ if gt $page.Offset 0 }}
        hx-boost="true"
        href="{{ $basePath }}?{{ $queryParams }}&offset={{ $prev }}&limit={{ $page.Limit }}"
      {{ end }}
    >
      {{ i "chevron-left" "w-4 h-4" }}
      Prev
    </a>

    {{ if gt $page.Offset 0 }}
      <a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset=0&limit={{ $page.Limit }}">
        1
      </a>
    {{ end }}

    {{ if gt $prev $page.Limit }}
      <span class="text-gray-400 dark:text-gray-500">—</span>
    {{ end }}

    {{ if gt $prev 0 }}
      <a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset={{ $prev }}&limit={{ $page.Limit }}">
        {{ add (div $prev $page.Limit) 1 }}
      </a>
    {{ end }}

    <span class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm">
      {{ add (div $page.Offset $page.Limit) 1 }}
    </span>

    {{ if lt $next $lastPage }}
      <a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}">
        {{ add (div $next $page.Limit) 1 }}
      </a>
    {{ end }}

    {{ if lt $next (sub $totalCount (mul 2 $page.Limit)) }}
      <span class="text-gray-400 dark:text-gray-500">—</span>
    {{ end }}

    {{ if lt $page.Offset $lastPage }} 
      <a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset={{ $lastPage }}&limit={{ $page.Limit }}">
        {{ add (div $lastPage $page.Limit) 1 }}
      </a>
    {{ end }}

    <a
      class="
        flex items-center gap-1 no-underline hover:no-underline dark:text-white text-sm
        {{ if lt $next $totalCount | not }}
            cursor-not-allowed opacity-50
        {{ end }}
      "
      {{ if lt $next $totalCount }}
        hx-boost="true"
        href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}"
      {{ end }}
    >
      Next
      {{ i "chevron-right" "w-4 h-4" }}
    </a>
  </div>
{{ end }}
