@php
if (! isset($scrollTo)) {
    $scrollTo = 'body';
}

$scrollIntoViewJsSnippet = ($scrollTo !== false)
    ? <<<JS
       (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
    JS
    : '';
@endphp

@if ($paginator->hasPages())
    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="pagination">
        <div class="paginate_button page-item previous {{ $paginator->onFirstPage() ? 'disabled' : '' }}">
            <a class="pagination-btn {{ $paginator->onFirstPage() ? 'disabled' : '' }}"
                wire:click="previousPage('{{ $paginator->getPageName() }}')"
                x-on:click="{{ $scrollIntoViewJsSnippet }}"
                wire:loading.attr="disabled"
                dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before"
                href="javascript:;"
                // href="{{ $paginator->onFirstPage() ? '' : $paginator->previousPageUrl() }}">
                <x-svg-icon icon="icon-arrow-left" />
                <p class="text-sm font-semibold">{{ trans('forms.lbl_previous') }}</p>
            </a>
        </div>
        <div class="flex">
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <div class="paginate_button page-item disabled">
                        <a class="page-link disabled">{{ $element }}</a>
                    </div>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        <div class="paginate_button page-item {{ $page == $paginator->currentPage() ? 'active' : '' }}">
                            @if ($page == $paginator->currentPage())
                                <a class="page-link">
                                    {{ $page }}
                                </a>
                            @else
                                <a
                                    wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')"
                                    x-on:click="{{ $scrollIntoViewJsSnippet }}"
                                    href="javascript:;"
                                    // href="{{ $url }}"
                                    class="page-link">
                                    {{ $page }}
                                </a>
                            @endif
                        </div>
                    @endforeach
                @endif
            @endforeach
        </div>
        <div class="paginate_button page-item next {{ $paginator->hasMorePages() ? '' : 'disabled' }}">
            <a
                class="pagination-btn {{ $paginator->hasMorePages() ? '' : 'disabled' }}"
                wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}"
                dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after"
                href="javascript:;"
                // href="{{ $paginator->hasMorePages() ? $paginator->nextPageUrl() : '' }}">
                <p class="text-sm font-semibold">{{ trans('forms.lbl_next') }}</p>
                <x-svg-icon icon="icon-arrow-right" />
            </a>
        </div>
    </nav>
@endif