@if ($paginator->hasPages())
@once('pagination-styles')
<style>
.pag-nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pag-item {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:32px; height:32px; padding:0 8px;
    border-radius:6px;
    border:1px solid var(--border, var(--border-color, #252525));
    background:var(--bg-card, var(--bg-secondary, #141414));
    color:var(--text, var(--text-primary, #f0f0f0));
    font-size:13px; font-weight:500; line-height:1;
    text-decoration:none; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
    user-select:none;
}
a.pag-item:hover {
    background:var(--border-light, var(--border-color, #2e2e2e));
    border-color:var(--border-light, var(--border-color, #303030));
    color:var(--text, var(--text-primary, #f0f0f0));
}
.pag-item.active {
    background:var(--brand, var(--brand-red, #e61e1e));
    border-color:var(--brand, var(--brand-red, #e61e1e));
    color:#fff;
    cursor:default;
}
.pag-item.disabled {
    opacity:.35; cursor:default; pointer-events:none;
}
.pag-item.dots {
    border-color:transparent; background:transparent;
    color:var(--text-2, var(--text-secondary, #888));
    pointer-events:none;
}
</style>
@endonce
<nav class="pag-nav" aria-label="Pagination">

    {{-- Prev --}}
    @if ($paginator->onFirstPage())
        <span class="pag-item disabled" aria-disabled="true">
            <i class="bi bi-chevron-left" style="font-size:11px;"></i>
        </span>
    @else
        <a class="pag-item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="Previous">
            <i class="bi bi-chevron-left" style="font-size:11px;"></i>
        </a>
    @endif

    {{-- Page numbers --}}
    @foreach ($elements as $element)
        @if (is_string($element))
            <span class="pag-item dots">{{ $element }}</span>
        @endif
        @if (is_array($element))
            @foreach ($element as $page => $url)
                @if ($page == $paginator->currentPage())
                    <span class="pag-item active" aria-current="page">{{ $page }}</span>
                @else
                    <a class="pag-item" href="{{ $url }}">{{ $page }}</a>
                @endif
            @endforeach
        @endif
    @endforeach

    {{-- Next --}}
    @if ($paginator->hasMorePages())
        <a class="pag-item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="Next">
            <i class="bi bi-chevron-right" style="font-size:11px;"></i>
        </a>
    @else
        <span class="pag-item disabled" aria-disabled="true">
            <i class="bi bi-chevron-right" style="font-size:11px;"></i>
        </span>
    @endif

</nav>
@endif