@if ($paginator->hasPages())
    {{-- Project pagination, styled with the design system rather than Laravel's defaults. --}}
    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}"
         class="flex flex-wrap items-center justify-between gap-4 border-t border-border pt-6">

        <p class="text-sm text-text-secondary">
            {{ __('Showing :first–:last of :total', [
                'first' => $paginator->firstItem(),
                'last' => $paginator->lastItem(),
                'total' => $paginator->total(),
            ]) }}
        </p>

        <div class="flex items-center gap-1">
            @if ($paginator->onFirstPage())
                <span class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-muted opacity-50"
                      aria-disabled="true">
                    <x-icon name="chevron-left" class="size-4" /> {{ __('Previous') }}
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
                   class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-primary">
                    <x-icon name="chevron-left" class="size-4" /> {{ __('Previous') }}
                </a>
            @endif

            <span class="mx-2 hidden items-center gap-1 sm:flex">
                @foreach ($elements as $element)
                    @if (is_string($element))
                        <span class="px-2 text-sm text-text-muted">{{ $element }}</span>
                    @endif

                    @if (is_array($element))
                        @foreach ($element as $page => $url)
                            @if ($page == $paginator->currentPage())
                                <span aria-current="page"
                                      class="inline-flex size-9 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-white">
                                    {{ $page }}
                                </span>
                            @else
                                <a href="{{ $url }}"
                                   class="inline-flex size-9 items-center justify-center rounded-lg text-sm text-text-secondary transition hover:bg-surface-muted hover:text-primary"
                                   aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
                                    {{ $page }}
                                </a>
                            @endif
                        @endforeach
                    @endif
                @endforeach
            </span>

            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" rel="next"
                   class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-secondary transition hover:bg-surface-muted hover:text-primary">
                    {{ __('Next') }} <x-icon name="chevron-right" class="size-4" />
                </a>
            @else
                <span class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-muted opacity-50"
                      aria-disabled="true">
                    {{ __('Next') }} <x-icon name="chevron-right" class="size-4" />
                </span>
            @endif
        </div>
    </nav>
@endif