@props(['placeholder' => null])

{{-- Filter card: live search box on the left, extra controls (slot) on the right. --}}
<x-admin.card class="mb-4">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
        <div class="relative flex-1">
            <i data-lucide="search"
               style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-text-subtle);"></i>
            {{-- Anti-autofill: Chrome otherwise offers the admin's saved email in
                 this search box (also enforced globally in app.js). --}}
            <input type="search" wire:model.live.debounce.400ms="search"
                   placeholder="{{ $placeholder ?? __('Search for…') }}"
                   autocomplete="off" data-lpignore="true" data-1p-ignore data-form-type="other"
                   class="rf-input" style="padding-left:36px;">
        </div>
        @isset($controls)
            <div class="flex flex-wrap items-center gap-2">{{ $controls }}</div>
        @endisset
    </div>
</x-admin.card>