pagination

              <nav class="relative z-0" aria-label="Pagination">
  <ol role="list" class="inline-flex items-center gap-1.5">
    <!-- Previous -->
    <li>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-zinc-500 bg-white hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 size-8 p-0.5 text-xs rounded-md"
        disabled
        aria-label="Go to previous page"
      >
        <span class="sr-only">Previous</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-chevron-left size-3"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M15 6l-6 6l6 6"></path>
        </svg>
      </button>
    </li>
    <!-- Page numbers -->
    <li>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-zinc-500 bg-white hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 size-8 p-0.5 text-xs rounded-md"
        aria-current="page"
        aria-label="Page 1, current page"
      >
        1
      </button>
    </li>
    <li>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-zinc-500 bg-white hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 size-8 p-0.5 text-xs rounded-md"
        aria-label="Go to page 2"
      >
        2
      </button>
    </li>
    <!-- Ellipsis -->
    <li aria-hidden="true" class="px-1 text-zinc-500">…</li>
    <li>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-zinc-500 bg-white hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 size-8 p-0.5 text-xs rounded-md"
        aria-label="Go to page 9"
      >
        9
      </button>
    </li>
    <li>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-zinc-500 bg-white hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 size-8 p-0.5 text-xs rounded-md"
        aria-label="Go to page 10"
      >
        10
      </button>
    </li>
    <!-- Next -->
    <li>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-zinc-500 bg-white hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 size-8 p-0.5 text-xs rounded-md"
        aria-label="Go to next page"
      >
        <span class="sr-only">Next</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-chevron-right size-3"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M9 6l6 6l-6 6"></path>
        </svg>
      </button>
    </li>
  </ol>
</nav>