@props([
    'action' => url()->current(),
    'method' => 'GET',
    'showFromDate' => true,
    'fromDateName' => 'start_date',
    'showToDate' => true,
    'toDateName' => 'end_date',
    'buttonText' => 'Search',
    'clearText' => 'Clear',
])

<form action="{{ $action }}" method="{{ $method }}" class="w-full">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 items-end auto-rows-auto">

        {{ $slot }}

        {{-- Actions: occupy full row on xs to prevent overlap, stack buttons on xs and align inline on sm+ --}}
        <div class="col-span-full sm:col-span-2 md:col-span-1 lg:col-span-1 min-w-0 order-last sm:order-none">
            <div class="flex w-full">
                <div class="flex flex-col sm:flex-row sm:items-end gap-2 w-full sm:w-auto">
                    <x-buttons.primary type="submit" class="justify-center">
                        {{ __($buttonText) }}
                    </x-buttons.primary>

                    <x-buttons.secondary onclick="window.location.href='{{ $action }}'" class="justify-center">
                        {{ __($clearText) }}

                    </x-buttons.secondary>
                </div>
            </div>
        </div>
    </div>
</form>