{{-- ============================================================
     Paginado del panel.

     **Es la vista de Livewire, publicada a propósito**: los dieciséis listados del
     Manager llaman a `$algo->links()` y todos resuelven aquí, así que el paginado se
     arregla en un sitio y no en dieciséis.

     Lo que tenía la vista por defecto y estaba mal:

     - **Estaba en inglés**: «Showing 1 to 15 of 18 results». No hay ficheros de idioma
       para `pagination.*`, así que `__('pagination.previous')` habría devuelto la clave
       tal cual; los textos van escritos aquí y no dependen de un `lang/` que no existe.
     - **Colores a pelo de Tailwind** (`text-gray-700`, `ring-blue-300`) y bloques
       `dark:` que este panel no usa: se quedaba fuera del sistema de diseño.
     - **El resumen y los botones se iban a los extremos de la tarjeta.** Con
       `justify-between`, en una tabla ancha quedaban tan separados que no parecían
       parte de lo mismo.

     Ahora: resumen y botones **juntos**, como un solo grupo alineado a la derecha,
     con los tokens del sistema (`resources/css/design-system/`) y a la misma altura.
     ============================================================ --}}
@php
    if (! isset($scrollTo)) {
        $scrollTo = 'body';
    }

    $scrollIntoViewJsSnippet = ($scrollTo !== false)
        ? "(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()"
        : '';

    // Un botón de página: cuadrado, mínimo 30 px, y el actual en oscuro. Se define una
    // vez porque hay cuatro sitios que pintan botones (anterior, números, siguiente y
    // la versión estrecha) y con las clases repetidas dejan de parecerse al mes
    // siguiente.
    $base = 'inline-flex items-center justify-center rounded-md border text-[12.5px] font-semibold transition-colors';
    $caja = 'min-w-[30px] px-2 py-1';
    $normal = 'border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);';
    $activo = 'border-color:var(--neutral-800); background:var(--neutral-800); color:#fff;';
    $apagado = 'border-color:var(--border-subtle); background:var(--surface-page); color:var(--text-subtle);';
@endphp

@if ($paginator->hasPages())
    {{-- El resumen y los botones **juntos**, no uno en cada extremo: con
         `justify-between` los dos trozos se iban a los bordes de una tarjeta que
         puede ser muy ancha y quedaban sin relación entre ellos. Van como un solo
         grupo alineado a la derecha, que es donde ya estaban los botones. --}}
    <nav role="navigation" aria-label="Paginación"
         class="flex flex-wrap items-center justify-end gap-x-4 gap-y-2">

        {{-- El resumen. Va aquí y no en cada pantalla: antes había listados que lo
             pintaban por su cuenta y acababan diciéndolo dos veces, una en español y
             otra en inglés. --}}
        <span class="text-[12.5px]" style="color:var(--text-muted);">
            Mostrando
            <strong class="font-semibold" style="color:var(--text-strong);">{{ $paginator->firstItem() }}</strong>–<strong class="font-semibold" style="color:var(--text-strong);">{{ $paginator->lastItem() }}</strong>
            de {{ $paginator->total() }}
        </span>

        {{-- ============ Pantalla estrecha: solo anterior y siguiente ============
             Diez números no caben en un móvil, y este panel se usa en portátil. --}}
        <div class="flex items-center gap-2 sm:hidden">
            @if ($paginator->onFirstPage())
                <span class="{{ $base }} {{ $caja }} cursor-default" style="{{ $apagado }}">Anterior</span>
            @else
                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')"
                        x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
                        class="{{ $base }} {{ $caja }}" style="{{ $normal }}">Anterior</button>
            @endif

            <span class="text-[12px]" style="color:var(--text-muted);">
                {{ $paginator->currentPage() }} de {{ $paginator->lastPage() }}
            </span>

            @if ($paginator->hasMorePages())
                <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')"
                        x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
                        class="{{ $base }} {{ $caja }}" style="{{ $normal }}">Siguiente</button>
            @else
                <span class="{{ $base }} {{ $caja }} cursor-default" style="{{ $apagado }}">Siguiente</span>
            @endif
        </div>

        {{-- ============ Pantalla ancha: flechas y números ============ --}}
        <div class="hidden items-center gap-1 sm:flex">

            @if ($paginator->onFirstPage())
                <span class="{{ $base }} {{ $caja }} cursor-default" style="{{ $apagado }}" aria-disabled="true" aria-label="Página anterior">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                </span>
            @else
                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')"
                        x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
                        dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}"
                        class="{{ $base }} {{ $caja }}" style="{{ $normal }}" aria-label="Página anterior">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                </button>
            @endif

            @foreach ($elements as $element)
                {{-- Los puntos suspensivos: no son un botón, así que no se pintan como
                     uno. --}}
                @if (is_string($element))
                    <span class="px-1 text-[12.5px]" style="color:var(--text-subtle);">{{ $element }}</span>
                @endif

                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <span class="{{ $base }} {{ $caja }} cursor-default" style="{{ $activo }}" aria-current="page">{{ $page }}</span>
                        @else
                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')"
                                    x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
                                    class="{{ $base }} {{ $caja }}" style="{{ $normal }}"
                                    aria-label="Ir a la página {{ $page }}">{{ $page }}</button>
                        @endif
                    @endforeach
                @endif
            @endforeach

            @if ($paginator->hasMorePages())
                <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')"
                        x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
                        dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}"
                        class="{{ $base }} {{ $caja }}" style="{{ $normal }}" aria-label="Página siguiente">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </button>
            @else
                <span class="{{ $base }} {{ $caja }} cursor-default" style="{{ $apagado }}" aria-disabled="true" aria-label="Página siguiente">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </span>
            @endif
        </div>
    </nav>
@endif