{{--
    What a listing shows when it has nothing to show.

        <x-table.empty-state
            icon="box-seam"
            title="No assets match these filters"
            message="Try widening the date range or clearing the category filter.">
            <a href="{{ route('assets.create') }}" class="btn btn-primary">Add Asset</a>
        </x-table.empty-state>

    Every listing gets one. A blank box leaves the user unsure whether the
    system is empty, broken, or filtered — so the message always says which one
    it is, and offers the way forward.

    Placed in a full-width cell with `class="p-0"` so the state centres on the
    card rather than inside a single column.
--}}
@props([
    'title' => 'Nothing to show',
    'message' => null,
    'icon' => 'inbox',
])

<div {{ $attributes->merge(['class' => 'ams-empty-state']) }}>
    <div class="ams-empty-state__icon" aria-hidden="true">
        <i class="bi bi-{{ $icon }}"></i>
    </div>

    <div class="ams-empty-state__title">{{ $title }}</div>

    @if ($message)
        <p class="ams-empty-state__message">{{ $message }}</p>
    @endif

    @if (! $slot->isEmpty())
        <div class="ams-empty-state__actions">
            {{ $slot }}
        </div>
    @endif
</div>
