<div>
    @if ($paginator->hasPages() && $paginator->total() > $paginator->perPage())
        <nav aria-label="Pagination Navigation" class="flex justify-end" role="navigation">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <span class="invisible ml-1 sm:ml-2 md:ml-3">
                    <x-jetstream.light-button disabled>
                        <span class="inline md:hidden">&lt;</span>
                        <span class="hidden md:inline">{{ __('Previous') }}</span>
                    </x-jetstream.light-button>
                </span>
            @else
                <x-jetstream.light-button class="ml-1 sm:ml-2 md:ml-3" x-on:click="$wire.previousPage('{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
                    <span class="inline md:hidden">&lt;</span>
                    <span class="hidden md:inline">{{ __('Previous') }}</span>
                </x-jetstream.light-button>
            @endif

            {{-- XS/SM: Only show current and last page --}}
            <div class="flex md:hidden items-center">
                {{-- Current Page --}}
                <span class="relative ml-1 sm:ml-2 inline-flex cursor-default items-center rounded-md border border-theme-brand bg-white px-3 sm:px-4 py-2 text-sm font-medium leading-5 text-theme-brand shadow-sm">
                    {{ $paginator->currentPage() }}
                </span>
                {{-- Last Page --}}
                @if ($paginator->currentPage() != $paginator->lastPage())
                    <x-jetstream.light-button class="ml-1 sm:ml-2" x-on:click="$wire.gotoPage({{ $paginator->lastPage() }}, '{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
                        {{ $paginator->lastPage() }}
                    </x-jetstream.light-button>
                @endif
            </div>

            {{-- SM+: Full paginator --}}
            <div class="hidden md:flex items-center">
                @php
                    $currentPage = $paginator->currentPage();
                    $lastPage = $paginator->lastPage();

                    if ($paginator->total() === 0) {
                        $start = 0;
                        $end = 0;
                    } else {
                        $start = max($currentPage - 1, 1);
                        $end = min($currentPage + 1, $lastPage);
                    }
                @endphp

                @if ($start > 0 && $end > 0)
                    {{-- First Page Link --}}
                    @if ($start > 1)
                        <x-jetstream.light-button class="ml-3" x-on:click="$wire.gotoPage(1, 'page'); $dispatch('scroll-to-top');">
                            1
                        </x-jetstream.light-button>
                        @if ($start > 2)
                            <span class="ml-3">
                                <x-jetstream.light-button disabled>
                                    ...
                                </x-jetstream.light-button>
                            </span>
                        @endif
                    @endif

                    {{-- Page Links --}}
                    @for ($page = $start; $page <= $end; $page++)
                        @if ($page == $paginator->currentPage())
                            <span class="relative ml-3 inline-flex cursor-default items-center rounded-md border border-theme-brand bg-white px-4 py-2 text-sm font-medium leading-5 text-theme-brand shadow-sm">
                                {{ $page }}
                            </span>
                        @else
                            <x-jetstream.light-button class="ml-3" x-on:click="$wire.gotoPage({{ $page }}, '{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
                                {{ $page }}
                            </x-jetstream.light-button>
                        @endif
                    @endfor

                    {{-- Last Page Link --}}
                    @if ($end < $lastPage)
                        @if ($end < $lastPage - 1)
                            <span class="ml-3">
                                <x-jetstream.light-button disabled>
                                    ...
                                </x-jetstream.light-button>
                            </span>
                        @endif
                        <x-jetstream.light-button class="ml-3" x-on:click="$wire.gotoPage({{ $lastPage }}, '{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
                            {{ $lastPage }}
                        </x-jetstream.light-button>
                    @endif
                @endif
            </div>

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <x-jetstream.light-button class="ml-1 sm:ml-2 md:ml-3" x-on:click="$wire.nextPage('{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
                    <span class="inline md:hidden">&gt;</span>
                    <span class="hidden md:inline">{{ __('Next') }}</span>
                </x-jetstream.light-button>
            @else
                <span class="invisible ml-1 sm:ml-2 md:ml-3">
                    <x-jetstream.light-button disabled>
                        <span class="inline md:hidden">&gt;</span>
                        <span class="hidden md:inline">{{ __('Next') }}</span>
                    </x-jetstream.light-button>
                </span>
            @endif
        </nav>
    @endif
</div>