@props(['placeholder' => 'Search…', 'createLabel' => null, 'canCreate' => true])

<div class="mb-4 flex flex-wrap items-center gap-2">
    <x-ui.search-bar :placeholder="$placeholder" />

    {{ $filters ?? '' }}

    @if ($this->hasActiveFilters())
        <button type="button" wire:click="clearFilters" class="btn btn-ghost btn-sm">
            <x-ui.icon name="x" class="h-3.5 w-3.5" /> Clear
        </button>
    @endif

    <div class="ml-auto flex items-center gap-2">
        {{ $actions ?? '' }}

        @if ($createLabel && $canCreate)
            <x-ui.button variant="primary" wire:click="createResource" icon="plus">{{ $createLabel }}</x-ui.button>
        @endif
    </div>
</div>