@props([
    'title',
    'total'    => null,
    'limpiarUrl' => null,
])

<x-layouts::app :title="$title">
    <div class="p-6 space-y-4">

        {{-- Cabecera: título + slot de filtros --}}
        <div class="flex flex-wrap items-center justify-between gap-4">
            <h1 class="text-2xl font-bold text-zinc-800">{{ $title }}</h1>

            <div class="flex flex-wrap items-center gap-2">
                {{ $filters ?? '' }}

                @if($limpiarUrl)
                    <a href="{{ $limpiarUrl }}"
                       class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm text-zinc-500 hover:bg-zinc-50">
                        Limpiar
                    </a>
                @endif

                @if(!is_null($total))
                    <span class="text-sm text-zinc-400">{{ $total }} {{ Str::lower($title) }}</span>
                @endif
            </div>
        </div>

        {{-- Tabla --}}
        {{ $slot }}

        {{-- Paginación --}}
        @isset($pagination)
            <div>{{ $pagination }}</div>
        @endisset

    </div>
</x-layouts::app>