@if ($paginator->hasPages())
    <ul class="pagination justify-content-center m-0">
        {{-- Prev --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                <span class="page-link" aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
            </li>
        @else
            <li class="page-item">
                <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev"
                    aria-label="@lang('pagination.previous')">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        @endif

        {{-- Numbers --}}
        @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"><a class="page-link" href="{{ $url }}">{{ $page }}</a>
                        </li>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next --}}
        @if ($paginator->hasMorePages())
            <li class="page-item">
                <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next"
                    aria-label="@lang('pagination.next')">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
        @else
            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                <span class="page-link" aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
            </li>
        @endif
    </ul>
@endif

@push('style')
    <style>
        /* --- simple minimal pagination --- */
        :root {
            --pg-size: 34px;
            /* tombol */
            --pg-radius: 999px;
            /* pill */
            --pg-gap: 6px;
            /* jarak antar tombol */
        }

        /* tata letak ringkas */
        .pagination {
            gap: var(--pg-gap);
        }

        /* tombol dasar */
        .pagination .page-link {
            min-width: var(--pg-size);
            height: var(--pg-size);
            padding: 0 .6rem;
            /* biar angka 2 digit muat */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--pg-radius);
            border: 1px solid #dee2e6;
            background: #fff;
            color: var(--primary-color);
            line-height: 1;
            font-weight: 500;
        }

        /* ikon chevron ukuran normal */
        .pagination .page-link i.bi {
            font-size: 1rem;
        }

        /* hover sederhana (tanpa animasi/transform) */
        .pagination .page-link:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }

        /* state aktif & disabled */
        .pagination .page-item.active .page-link {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }

        .pagination .page-item.disabled .page-link {
            opacity: .5;
            pointer-events: none;
        }

        /* responsif kecil */
        @media (max-width: 576px) {
            :root {
                --pg-size: 30px;
                --pg-gap: 4px;
            }

            .pagination .page-link {
                padding: 0 .5rem;
            }
        }
    </style>
@endpush