@if($paginator->total() > 0)
<div class="flex items-center gap-5">
    <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' : '' }}"
                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>
        @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' : '' }}" data-url="{{ $url }}">
                        @if ($page == $paginator->currentPage())
                            <a class="page-link disabled">
                                {{ $page }}
                            </a>
                        @else
                            <a href="{{ $url }}" class="page-link">
                                {{ $page }}
                            </a>
                        @endif
                    </div>
                @endforeach
            @endif
        @endforeach
        <div class="paginate_button page-item next {{ $paginator->hasMorePages() ? '' : 'disabled' }}">
            <a class="pagination-btn {{ $paginator->hasMorePages() ? '' : 'disabled' }}"
                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>
</div>
@endif