@props([
    'title',
    'subtitle' => null,
    'searchPlaceholder' => 'Search...',
    'drawerTarget' => null,
    'createLabel' => null,
    'createUrl' => null,
    'emptyMessage' => 'Nothing here yet.',
    'isEmpty' => false,
])

<section class="card" data-saruar-table aria-label="{{ $title }}">
    <div class="card-header bg-white">
        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
            <div class="me-auto">
                <h2 class="h6 mb-0">{{ $title }}</h2>
                @if ($subtitle)
                    <p class="small text-body-secondary mb-0">{{ $subtitle }}</p>
                @endif
            </div>

            @if ($drawerTarget)
                <button class="btn sm-btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ $drawerTarget }}" aria-controls="{{ $drawerTarget }}" data-saruar-drawer-create>{{ $createLabel }}</button>
            @elseif ($createUrl)
                <a class="btn sm-btn-primary" href="{{ $createUrl }}">{{ $createLabel }}</a>
            @endif
        </div>

        <form method="GET" class="row g-2">
            <div class="col-12 col-md">
                <input class="form-control" type="search" name="q" value="{{ request('q') }}" placeholder="{{ $searchPlaceholder }}" aria-label="{{ $searchPlaceholder }}" data-saruar-table-search>
            </div>
            {{ $filters ?? '' }}
        </form>
    </div>

    @if ($isEmpty)
        <div class="card-body text-center py-5">
            <i class="bi bi-inbox sm-empty-icon" aria-hidden="true"></i>
            <p class="mt-3 mb-0">{{ $emptyMessage }}</p>
            {{ $emptyAction ?? '' }}
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>{{ $head }}</thead>
                <tbody>{{ $slot }}</tbody>
            </table>
        </div>
        <p class="text-center text-body-secondary py-3 mb-0" data-saruar-table-no-match hidden>No matching rows on this page.</p>
        {{ $footer ?? '' }}
    @endif
</section>