@php
    $pageName = $paginator->getPageName();
    $scroll = "(\$el.closest('[data-table-top]') || document.querySelector('main')).scrollIntoView({ block: 'start' })";
@endphp

<div class="flex flex-col items-center justify-between gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row">
    <p class="text-sm text-slate-600">
        @if ($paginator->total() > 0)
            Showing <span class="font-medium text-slate-900">{{ number_format($paginator->firstItem()) }}</span>
            to <span class="font-medium text-slate-900">{{ number_format($paginator->lastItem()) }}</span>
            of <span class="font-medium text-slate-900">{{ number_format($paginator->total()) }}</span> results
        @else
            No results
        @endif
    </p>

    @if ($paginator->hasPages())
        <nav role="navigation" aria-label="Pagination" class="flex items-center gap-1">
            @if ($paginator->onFirstPage())
                <span class="btn-icon cursor-not-allowed opacity-40" aria-disabled="true"><x-icon name="chevron-left" class="size-4" /><span class="sr-only">Previous page</span></span>
            @else
                <button type="button" wire:click="previousPage('{{ $pageName }}')" x-on:click="{{ $scroll }}" wire:loading.attr="disabled" class="btn-icon" rel="prev">
                    <x-icon name="chevron-left" class="size-4" /><span class="sr-only">Previous page</span>
                </button>
            @endif

            @foreach ($elements as $element)
                @if (is_string($element))
                    <span class="px-2 text-sm text-slate-400" aria-hidden="true">…</span>
                @endif

                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <span aria-current="page" class="inline-flex size-9 items-center justify-center rounded-lg bg-brand-600 text-sm font-semibold text-white">{{ $page }}</span>
                        @else
                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $pageName }}')" x-on:click="{{ $scroll }}"
                                class="hidden size-9 items-center justify-center rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-100 sm:inline-flex" aria-label="Go to page {{ $page }}">
                                {{ $page }}
                            </button>
                        @endif
                    @endforeach
                @endif
            @endforeach

            @if ($paginator->hasMorePages())
                <button type="button" wire:click="nextPage('{{ $pageName }}')" x-on:click="{{ $scroll }}" wire:loading.attr="disabled" class="btn-icon" rel="next">
                    <x-icon name="chevron-right" class="size-4" /><span class="sr-only">Next page</span>
                </button>
            @else
                <span class="btn-icon cursor-not-allowed opacity-40" aria-disabled="true"><x-icon name="chevron-right" class="size-4" /><span class="sr-only">Next page</span></span>
            @endif
        </nav>
    @endif
</div>