@props([
    'title' => null,
    'sticky' => true,
    'tableId' => 'example',
    'datatable' => true,
    'export' => true,
    'responsive' => false,
    'stateSave' => null,
])

<div {{ $attributes->merge(['class' => 'chm-table-wrap']) }}>
    @if(isset($toolbar) || isset($bulkActions) || $title)
        <div class="chm-table-toolbar d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div class="d-flex align-items-center gap-2">
                @if($title)
                    <h6 class="mb-0 fw-semibold">{{ $title }}</h6>
                @endif
                {{ $toolbar ?? '' }}
            </div>
            @isset($bulkActions)
                <div class="chm-table-bulk-actions d-flex flex-wrap gap-2">{{ $bulkActions }}</div>
            @endisset
        </div>
    @endif

    <div class="chm-table-scroll">
        <table
            id="{{ $tableId }}"
            data-export-title="{{ $title }}"
            @unless($datatable) data-chm-no-datatable="true" @endunless
            @if($responsive) data-responsive="true" @else data-responsive="false" @endif
            @if($stateSave === false) data-state-save="false" @endif
            class="table table-striped table-hover align-middle mb-0 {{ $sticky ? 'chm-table-sticky' : '' }} {{ $datatable ? 'chm-datatable' : '' }} {{ $datatable && $export ? 'chm-datatable-export' : '' }}"
        >
            {{ $slot }}
        </table>
    </div>
</div>