{{--
    Listing card — docs/wireframes-v12/project-management.html: the card +
    toolbar shell every index page wraps its server-side DataTable in.

    This component is dumb — it renders no table and performs no authorisation.
    The <table> element always arrives through the default slot, which is
    intentionally unescaped so yajra's html builder output survives:

        <x-datatable :title="__('things.title')" class="mb-4">
            <x-slot:toolbar>
                <x-form.input name="search" ... />
                <select class="form-control filter-select">...</select>
            </x-slot:toolbar>
            @can('things.create')
                <x-slot:actions>
                    <a href="{{ route('things.create') }}" class="btn btn-primary">
                        <i class="fa-solid fa-plus"></i>Add New Thing
                    </a>
                </x-slot:actions>
            @endcan
            {!! $dataTable->table(['class' => 'data-table'], true) !!}
        </x-datatable>

    NO LISTING USES THIS COMPONENT ANY MORE, and a new module probably should
    not either. v12's management pages put the filter bar inside the listing
    card as its header strip with the table directly under it, and this
    component's card has a `.card-body` between them — so projects, units and
    unit_types each build that card inline instead. **Copy a live listing
    (`projects/index.blade.php`), not this example.** The component is kept
    because it is still the shape a card-bodied listing would want and its test
    still pins the two wrapper names below.

    The example above was Metronic vocabulary until the CR-2c review — a
    `form-select-solid filter-select-sm` select, a `me-2` on a button icon that
    `.btn`'s own `gap: 8px` already spaces, and Metronic's four table classes.
    `.filter-select-sm` is declared in theme-a.css and in no other stylesheet
    we ship, so this comment was the last thing in the codebase keeping that
    name alive; block 19b of the app-additions tail is corrected to match.

    Because the default slot is raw HTML, never interpolate user input into the
    table string yourself. Column *content* is safe by default — yajra escapes
    cell values unless a column is explicitly listed in rawColumns().

    Slots:
        toolbar — search box / filter selects (left side of the card toolbar)
        actions — the primary "Add …" button; the caller gates it with @can
        default — the table markup region

    The header is skipped entirely when none of title/toolbar/actions is given.
--}}
@props(['title' => null])

<x-card :title="$title" {{ $attributes }}>
    @if (isset($toolbar) || isset($actions))
        <x-slot:toolbar>
            <div class="d-flex flex-wrap align-items-center gap-3">
                @isset($toolbar)
                    {{ $toolbar }}
                @endisset
                @isset($actions)
                    <div class="ms-auto">{{ $actions }}</div>
                @endisset
            </div>
        </x-slot:toolbar>
    @endif

    {{-- Two names, both load-bearing. `table-wrapper` is the wireframe's own
         scroll box (style.css "Tables"); `table-responsive` is Bootstrap's,
         and stays because it is the hook the component tests and the
         DataTables dom string in nrems-custom.js both name. --}}
    <div class="table-wrapper table-responsive">
        {{ $slot }}
    </div>
</x-card>