@props(['params'=>null, 'icon'=>'fa-solid fa-magnifying-glass'])
<div x-ref="search" data-method="{{ Request::method() }}" 
@load.window="dispatchOpen()" 
{{ $attributes->merge(['class' => " bg-white border border-secondary-200 text-secondary-900 rounded-lg shadow-xs max-w-fit sm:w-base-wrap"]) }} >
    <div class="flex flex-col">
        <!-- header -->
        <div class="h-8 px-3 flex items-center justify-between " 
            @click="toggleOpen()"
            :class="{
                'bg-secondary-50':open, 'bg-secondary-300':!open, 
                'text-secondary-600':open,'text-secondary-800':!open, 
                'rounded-t':open,'rounded':!open }">
            <div class=" flex items-center">
                @if($icon != '')<i class="{{$icon}}"></i>@endif
            </div>
            <div class="search-toggle">
                <span x-show="open"><i class="fa-solid fa-caret-up fa-fw"></i></span>
                <span x-show="!open"><i class="fa-solid fa-caret-down fa-fw"></i></span>
            </div>
        </div>
        <!-- contents -->
        <div x-ref="cond" class="px-3 pt-1 pb-2">
            <div>
                <div class="min-w-fit">{{$slot}}</div>
                @isset($detail)
                <div x-show="more">
                    <hr class="my-1 border-1 border-secondary-400">
                    <div>{{$detail}}</div>
                </div>
                @endisset
            </div>
            @isset($action)
            <div class="flex items-center justify-between mt-1 pt-2.5 border-t">
                <div class="flex items-center gap-2">
                    @isset($subaction){{$subaction}}@endisset
                    @isset($detail)
                    <x-button.more x-show="!more" @click="toggleMore()" />
                    <x-button.less x-show="more"  @click="toggleMore()" />
                    @endisset
                </div>
                <div class="flex items-center gap-2">{{$action}}</div>
            </div>
            @endisset
        </div>
    </div>
    @isset($params->perpage)
    <input type="hidden" name="perpage" value="{{$params->perpage}}" />
    <input type="hidden" name="page" value="1" />
    @endisset
</div>