@if ($paginator->hasPages())
    <div class="flex">
        <div class="flex mx-auto gap-4">

            {{-- Previous Page Link (only show if not on first page) --}}
            @if (!$paginator->onFirstPage())
                <a href="{{ $paginator->previousPageUrl() }}" wire:click.prevent="previousPage"
                   class="text-neutral-600 text-lg font-bold hover:text-neutral-800">Prev</a>
            @endif

            {{-- Page Number Links --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <span class="text-neutral-400 text-lg font-bold">{{ $element }}</span>
                @endif

                {{-- Page Numbers --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <span class="text-violet-900 text-lg font-bold">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" wire:click.prevent="gotoPage({{ $page }})"
                               class="text-neutral-600 text-lg font-bold hover:text-neutral-800">{{ $page }}</a>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link (only show if there are more pages) --}}
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" wire:click.prevent="nextPage"
                   class="text-neutral-600 text-lg font-bold hover:text-neutral-800">
                    Next <i class="fa-solid fa-angles-right ml-1 fa-xs"></i>
                </a>
            @endif
        </div>
    </div>
@endif