{{--
    Table Filters Bar
    Wraps search + filter controls above a data table.
    Usage:
      <x-tables.table-filters action="{{ route('add-route-name') }}">
          <x-forms.select name="role" :options="$roles" placeholder="All Roles" />
          <x-forms.select name="status" :options="['active'=>'Active','inactive'=>'Inactive']" />
      </x-tables.table-filters>
--}}
@props(['action' => ''])

<div class="mb-4 rounded-xl border border-border bg-card shadow-card">
    <div class="px-6 py-4">
        <form method="GET" action="{{ $action }}" class="flex flex-col sm:flex-row items-end gap-3">
            {{-- Search --}}
            <div class="flex-1 min-w-0">
                <x-tables.search-box name="search" :value="request('search')" />
            </div>

            {{-- Slot for extra filters --}}
            {{ $slot }}

            <div class="flex items-center gap-2 flex-shrink-0">
                <x-buttons.primary type="submit" size="sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" />
                    </svg>
                    Filter
                </x-buttons.primary>

                @if(request()->hasAny(['search', 'sort', 'dir']) || request()->except('page'))
                    <x-buttons.secondary href="{{ $action }}" size="sm">Reset</x-buttons.secondary>
                @endif
            </div>
        </form>
    </div>
</div>