@php
    $pageName = $pageName ?? $paginator->getPageName();
@endphp

@if ($paginator->hasPages())
    <section class="sect-pagination">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <nav aria-label="Pagination">
                        <ul class="pagination justify-content-center">
                            {{-- Previous Page Link --}}
                            <li class="page-item {{ $paginator->onFirstPage() ? 'disabled' : '' }}">
                                <button type="button"
                                    class="page-link"
                                    wire:click="previousPage('{{ $pageName }}')"
                                    wire:loading.attr="disabled"
                                    @if($paginator->onFirstPage()) disabled @endif>
                                    <i class="icon-chevron-left"></i>
                                </button>
                            </li>

                            {{-- Pagination Elements --}}
                            @foreach ($elements as $element)
                                @if (is_string($element))
                                    <li class="page-item disabled" aria-disabled="true">
                                        <span class="page-link">{{ $element }}</span>
                                    </li>
                                @endif

                                @if (is_array($element))
                                    @foreach ($element as $page => $url)
                                        @if ($page == $paginator->currentPage())
                                            <li class="page-item active" aria-current="page">
                                                <span class="page-link">{{ $page }}</span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <button type="button"
                                                    class="page-link"
                                                    wire:click="gotoPage({{ $page }}, '{{ $pageName }}')"
                                                    wire:key="paginator-page-{{ $pageName }}-{{ $page }}">
                                                    {{ $page }}
                                                </button>
                                            </li>
                                        @endif
                                    @endforeach
                                @endif
                            @endforeach

                            {{-- Next Page Link --}}
                            <li class="page-item {{ $paginator->hasMorePages() ? '' : 'disabled' }}">
                                <button type="button"
                                    class="page-link"
                                    wire:click="nextPage('{{ $pageName }}')"
                                    wire:loading.attr="disabled"
                                    @if(!$paginator->hasMorePages()) disabled @endif>
                                    <i class="icon-chevron-right"></i>
                                </button>
                            </li>
                        </ul>
                    </nav>
                    <div class="pagination-info mt-2">
                        <p class="text-muted">
                            {{ __('Showing :from-:to of :total items', [
                                'from' => $paginator->firstItem(),
                                'to' => $paginator->lastItem(),
                                'total' => $paginator->total(),
                            ]) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif