<!-- htmlhint doctype-first:false, tag-pair:false -->
<!-- Reusable Pagination Controls for Admin UI -->
<!--
  Usage:
    Set variables before including this template:
    - pagination: dict with page, per_page, total_items, total_pages, has_next, has_prev
    - base_url: string like '/admin/tools'
    - hx_target: string like '#tools-list'
    - hx_indicator: string like '#tools-loading'
    - table_name: string like 'tools' (for namespaced URL params)
    - query_params: optional dict of additional query parameters
-->

<div
  x-data="Admin.paginationData()"
  data-base-url="{{ base_url }}"
  data-current-page="{{ pagination.page }}"
  data-per-page="{{ pagination.per_page }}"
  data-total-items="{{ pagination.total_items }}"
  data-total-pages="{{ pagination.total_pages }}"
  data-has-next="{{ 'true' if pagination.has_next else 'false' }}"
  data-has-prev="{{ 'true' if pagination.has_prev else 'false' }}"
  data-hx-target="{{ hx_target | default('#tools-table') }}"
  data-hx-swap="{{ hx_swap | default('innerHTML') }}"
  data-table-name="{{ table_name | default('') }}"
  data-hx-indicator="{{ hx_indicator | default('#loading') }}"
  data-extra-params="{{ (query_params if query_params is defined and query_params else {}) | tojson_attr }}"
  class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 border-t border-gray-200 dark:border-gray-700"
>
  <!-- Page Size Selector -->
  <div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
    <span>Show:</span>
    <select
      x-model="perPage"
      @change="changePageSize($event.target.value)"
      class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400"
    >
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="500">500</option>
    </select>
    <span>per page</span>
  </div>

  <!-- Page Info -->
  <div class="text-sm text-gray-700 dark:text-gray-300">
    <span
      x-text="totalItems === 0 ? 'No items found' : `Showing ${Math.min((currentPage - 1) * perPage + 1, totalItems)} - ${pageItems !== null ? Math.min((currentPage - 1) * perPage + pageItems, totalItems) : Math.min(currentPage * perPage, totalItems)} of ${totalItems.toLocaleString()} items`"
    ></span>
  </div>

  <!-- Page Navigation (hidden when there are no pages) -->
  <template x-if="totalPages > 0">
    <div class="flex items-center gap-2">
      <!-- First Page Button -->
      <button
        @click="goToPage(1)"
        :disabled="!hasPrev"
        :class="hasPrev ? 'text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20' : 'text-gray-400 dark:text-gray-600 cursor-not-allowed'"
        class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 disabled:opacity-50 transition-colors"
        title="First Page"
      >
        ⏮️
      </button>

      <!-- Previous Page Button -->
      <button
        @click="prevPage()"
        :disabled="!hasPrev"
        :class="hasPrev ? 'text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20' : 'text-gray-400 dark:text-gray-600 cursor-not-allowed'"
        class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 disabled:opacity-50 transition-colors"
        title="Previous Page"
      >
        ◀️ Prev
      </button>

      <!-- Page Number Display -->
      <div class="flex items-center gap-1">
        <!-- Show first page if not near start -->
        <template x-if="currentPage > 3">
          <button
            @click="goToPage(1)"
            class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-700 dark:text-gray-300"
          >
            1
          </button>
        </template>

        <!-- Ellipsis if needed -->
        <template x-if="currentPage > 4">
          <span class="px-2 text-gray-500 dark:text-gray-500">...</span>
        </template>

        <!-- Show 2 pages before current -->
        <template x-for="i in [currentPage - 2, currentPage - 1]" :key="i">
          <button
            x-show="i >= 1"
            @click="goToPage(i)"
            class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-700 dark:text-gray-300"
            x-text="i"
          ></button>
        </template>

        <!-- Current Page (highlighted) -->
        <button
          class="px-3 py-1 rounded-md border-2 border-indigo-600 dark:border-indigo-400 bg-indigo-50 dark:bg-indigo-900/20 font-semibold text-indigo-700 dark:text-indigo-300"
          disabled
          x-text="currentPage"
        ></button>

        <!-- Show 2 pages after current -->
        <template x-for="i in [currentPage + 1, currentPage + 2]" :key="i">
          <button
            x-show="i <= totalPages"
            @click="goToPage(i)"
            class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-700 dark:text-gray-300"
            x-text="i"
          ></button>
        </template>

        <!-- Ellipsis if needed -->
        <template x-if="currentPage < totalPages - 3">
          <span class="px-2 text-gray-500 dark:text-gray-500">...</span>
        </template>

        <!-- Show last page if not near end -->
        <template x-if="currentPage < totalPages - 2">
          <button
            @click="goToPage(totalPages)"
            class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-700 dark:text-gray-300"
            x-text="totalPages"
          ></button>
        </template>
      </div>

      <!-- Next Page Button -->
      <button
        @click="nextPage()"
        :disabled="!hasNext"
        :class="hasNext ? 'text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20' : 'text-gray-400 dark:text-gray-600 cursor-not-allowed'"
        class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 disabled:opacity-50 transition-colors"
        title="Next Page"
      >
        Next ▶️
      </button>

      <!-- Last Page Button -->
      <button
        @click="goToPage(totalPages)"
        :disabled="!hasNext"
        :class="hasNext ? 'text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20' : 'text-gray-400 dark:text-gray-600 cursor-not-allowed'"
        class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 disabled:opacity-50 transition-colors"
        title="Last Page"
      >
        ⏭️
      </button>
    </div>
  </template>

  <!-- Keyboard Shortcuts Helper (Optional) -->
  <div class="hidden sm:block text-xs text-gray-500 dark:text-gray-500">
    <span class="inline-flex items-center gap-1">
      <kbd
        class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded"
        >←</kbd
      >
      <span>/</span>
      <kbd
        class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded"
        >→</kbd
      >
      <span>to navigate</span>
    </span>
  </div>
</div>
