{{-- Paginator styled with the application's own design system (the shipped
     default targets Tailwind, which this project does not use). --}}
@if ($paginator->hasPages())
    <nav class="u-flex u-items-center u-justify-between u-gap-4 u-flex-wrap" aria-label="Pagination">
        <p class="u-text-muted" style="font-size: var(--text-xs); margin: 0;">
            Showing {{ $paginator->firstItem() }}–{{ $paginator->lastItem() }} of {{ $paginator->total() }}
        </p>

        <div class="u-flex u-gap-2 u-items-center">
            @if ($paginator->onFirstPage())
                <span class="btn btn--secondary btn--sm" aria-disabled="true" style="opacity:.5;">&lsaquo; Previous</span>
            @else
                <a class="btn btn--secondary btn--sm" href="{{ $paginator->previousPageUrl() }}" rel="prev">&lsaquo; Previous</a>
            @endif

            <span class="u-text-secondary" style="font-size: var(--text-sm);">
                Page {{ $paginator->currentPage() }} of {{ $paginator->lastPage() }}
            </span>

            @if ($paginator->hasMorePages())
                <a class="btn btn--secondary btn--sm" href="{{ $paginator->nextPageUrl() }}" rel="next">Next &rsaquo;</a>
            @else
                <span class="btn btn--secondary btn--sm" aria-disabled="true" style="opacity:.5;">Next &rsaquo;</span>
            @endif
        </div>
    </nav>
@endif