@let(ui = $ui.table())


<div {{ $props.except(['paginate']).toAttrs() }}>
  <div class="overflow-x-auto">
    <table
      class="min-w-full table-fixed text-white divide-y divide-neutral-800 whitespace-nowrap"
    >
      {{{ await $slots.main() }}}
    </table>
  </div>

  @if(paginate && paginate.hasPages)
    <div
      class="pt-3 border-t border-neutral-800 flex justify-between items-center max-sm:flex-col max-sm:gap-3 max-sm:items-end"
      data-ui-pagination=""
    >
      <div class="text-neutral-400 text-xs font-medium whitespace-nowrap">
        Showing {{ (paginate.currentPage - 1) * paginate.perPage + 1 }} to {{ (paginate.currentPage - 1) * paginate.perPage + paginate.perPage }} of {{ paginate.total }} results
      </div>

      <div
        class="flex items-center bg-neutral-900 border border-neutral-800 rounded-xl p-[1px]"
      >
        <button
          type="button"
          wire:click="previousPage('page')"
          aria-label="&amp;laquo; Previous"
          class="flex justify-center items-center size-6 rounded-lg text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors"
        >
          <svg
            class="shrink-0 [:where(&amp;)]:size-4"
            data-ui-icon=""
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
              clip-rule="evenodd"
            />
          </svg>
        </button>

        @if(paginate.currentPage > 3)
          <button
            wire:key="paginator-page-page1"
            class="text-xs h-6 px-2 rounded-lg text-neutral-400 font-medium hover:bg-neutral-800 hover:text-white transition-colors"
            wire:click="gotoPage(1, 'page')"
          >
            1
          </button>

          @if(paginate.currentPage > 4)
            <span class="text-xs px-2 text-neutral-500">...</span>
          @end
        @end

        @each(page in [...new Set([
          Math.max(1, paginate.currentPage - 2),
          Math.max(2, paginate.currentPage - 1),
          paginate.currentPage,
          Math.min(paginate.lastPage - 1, paginate.currentPage + 1),
          Math.min(paginate.lastPage, paginate.currentPage + 2)
        ])].filter(p => p >= 1 && p <= paginate.lastPage))
          <button
            wire:key="paginator-page-page{{ page }}"
            aria-current="{{ page === paginate.currentPage ? 'page' : undefined }}"
            class="{{ page === paginate.currentPage ? 'cursor-default flex justify-center items-center text-xs h-6 px-2 rounded-lg font-medium text-white' : 'text-xs h-6 px-2 rounded-lg text-neutral-400 font-medium hover:bg-neutral-800 hover:text-white transition-colors' }}"
            wire:click="gotoPage({{ page }}, 'page')"
          >
            {{ page }}
          </button>
        @endeach

        @if(paginate.currentPage < paginate.lastPage - 2)
          @if(paginate.currentPage < paginate.lastPage - 3)
            <span class="text-xs px-2 text-neutral-500">...</span>
          @end

          <button
            wire:key="paginator-page-page{{ paginate.lastPage }}"
            class="text-xs h-6 px-2 rounded-lg text-neutral-400 font-medium hover:bg-neutral-800 hover:text-white transition-colors"
            wire:click="gotoPage({{ paginate.lastPage }}, 'page')"
          >
            {{ paginate.lastPage }}
          </button>
        @end

        <button
          type="button"
          wire:click="nextPage('page')"
          aria-label="Next &amp;raquo;"
          class="flex justify-center items-center size-6 rounded-lg text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors"
        >
          <svg
            class="shrink-0 [:where(&amp;)]:size-4"
            data-ui-icon=""
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>
    </div>
  @end
</div>