<div th:fragment="pagination(context,prevUrl,nextUrl,totalPages,page,hasPrevious,hasNext)">
  <div class="mt-6 flex items-center justify-between" th:if="${hasPrevious || hasNext}">
    <a
      th:href="@{${prevUrl}}"
      class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
      th:classappend="${!hasPrevious ? 'pointer-events-none opacity-60' : ''}"
    >
      <span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
      <span th:text="#{common.previousPage}"></span>
    </a>
    <select id="pagination" class="bg-transparent text-sm text-gray-900 outline-none dark:text-slate-50">
      <option
        th:each="i : ${#numbers.sequence(1,totalPages)}"
        th:selected="${i == page}"
        th:value="${i}"
        th:text="|${i} / ${totalPages}|"
        class="bg-white text-gray-900 dark:bg-slate-700 dark:text-slate-50"
      ></option>
    </select>
    <a
      th:href="@{${nextUrl}}"
      class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
      th:classappend="${!hasNext ? 'pointer-events-none opacity-60' : ''}"
    >
      <span th:text="#{common.nextPage}"></span>
      <span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
    </a>
  </div>

  <script th:inline="javascript">
    document.addEventListener("DOMContentLoaded", () => {
      const paginationSelect = document.getElementById("pagination");

      if (!paginationSelect) {
        return;
      }

      paginationSelect.addEventListener("change", (event) => {
        const selectedPage = event.target.value;
        window.location.href = `[(${context})]page/${selectedPage}`;
      });
    });
  </script>
</div>
