{{-- resources/views/livewire/partials/pagination.blade.php --}}
@if($paginator->hasPages())
<div style="padding:10px 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
    <div style="font-size:11.5px;color:var(--text-3)">
        Showing {{ $paginator->firstItem() }}–{{ $paginator->lastItem() }} of {{ $paginator->total() }} results
    </div>
    <div style="display:flex;gap:4px;align-items:center">

        {{-- Prev --}}
        @if($paginator->onFirstPage())
            <span style="height:26px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:#f8faf8;color:var(--text-3);font-size:12px;display:inline-flex;align-items:center;cursor:not-allowed">
                <i class="bi bi-chevron-left"></i>
            </span>
        @else
            <button wire:click="previousPage" style="height:26px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text-2);font-size:12px;cursor:pointer;display:inline-flex;align-items:center">
                <i class="bi bi-chevron-left"></i>
            </button>
        @endif

        {{-- Page numbers --}}
        @foreach($paginator->getUrlRange(max(1,$paginator->currentPage()-2), min($paginator->lastPage(),$paginator->currentPage()+2)) as $page => $url)
            <button
                wire:click="gotoPage({{ $page }})"
                style="height:26px;width:26px;border:1px solid {{ $page == $paginator->currentPage() ? 'var(--green)' : 'var(--border)' }};border-radius:6px;background:{{ $page == $paginator->currentPage() ? 'var(--green)' : '#fff' }};color:{{ $page == $paginator->currentPage() ? '#fff' : 'var(--text-2)' }};font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center">
                {{ $page }}
            </button>
        @endforeach

        {{-- Next --}}
        @if($paginator->hasMorePages())
            <button wire:click="nextPage" style="height:26px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text-2);font-size:12px;cursor:pointer;display:inline-flex;align-items:center">
                <i class="bi bi-chevron-right"></i>
            </button>
        @else
            <span style="height:26px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:#f8faf8;color:var(--text-3);font-size:12px;display:inline-flex;align-items:center;cursor:not-allowed">
                <i class="bi bi-chevron-right"></i>
            </span>
        @endif

    </div>
</div>
@endif