{{--
    Card-wrapped table: toolbar, header, rows and footer in one frame.

        <x-table.wrapper>
            <x-slot:toolbar>
                <x-filter-bar :action="route('assets.index')" :active="$hasFilters">
                    <x-filter.search :value="$filters['search']" placeholder="Search…" />
                    <x-filter.select name="status" :options="…" placeholder="Any status" />
                </x-filter-bar>
            </x-slot:toolbar>

            <x-slot:head>
                <tr><th>Asset Tag</th><th>Name</th></tr>
            </x-slot:head>

            @forelse ($assets as $asset)
                <tr>...</tr>
            @empty
                <tr><td colspan="2" class="p-0"><x-table.empty-state ... /></td></tr>
            @endforelse

            <x-slot:footer>
                <x-table.count :paginator="$assets" />
                {{ $assets->withQueryString()->links() }}
            </x-slot:footer>
        </x-table.wrapper>

    The toolbar lives INSIDE the card, separated by a hairline rather than by a
    gap. A search bar floating in its own card above a table is the clearest
    single tell of an admin template: the controls belong to the data they
    filter, so they sit in its frame.

    The scroll container is on the table, not the page: a wide asset listing
    scrolls inside its own card and the page body never scrolls sideways.

    Cell classes available inside a row — use them rather than ad-hoc utilities,
    so every listing in every module weights its columns identically:

        .ams-cell-primary     the record's name; one per row
        .ams-cell-secondary    supporting detail
        .ams-cell-code         an identifier (tag, code, serial)
--}}
@props([
    'toolbar' => null,
    'head' => null,
    'footer' => null,
])

<div {{ $attributes->merge(['class' => 'card ams-table-card']) }}>
    @if ($toolbar)
        <div class="ams-table-toolbar ams-no-print">
            {{ $toolbar }}
        </div>
    @endif

    <div class="ams-table-scroll ams-scroll-thin">
        <table class="table table-sm table-hover align-middle ams-table">
            @if ($head)
                <thead>
                    {{ $head }}
                </thead>
            @endif

            <tbody>
                {{ $slot }}
            </tbody>
        </table>
    </div>

    @if ($footer)
        <div class="ams-table-footer ams-no-print">
            {{ $footer }}
        </div>
    @endif
</div>
