@props(['resource'])
<div
    class="flex flex-col  w-full  items-baseline justify-between px-4 py-4  text-end   sm:rounded-tl-md sm:rounded-tr-md">
    <div class="sm:flex-row flex flex-col w-full">
        <div class="w-full flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="relative mb-2 sm:mb-0">
                <span class="absolute top-1/2 left-4 -translate-y-1/2">
                    <svg class="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20"
                        fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M3.04175 9.37363C3.04175 5.87693 5.87711 3.04199 9.37508 3.04199C12.8731 3.04199 15.7084 5.87693 15.7084 9.37363C15.7084 12.8703 12.8731 15.7053 9.37508 15.7053C5.87711 15.7053 3.04175 12.8703 3.04175 9.37363ZM9.37508 1.54199C5.04902 1.54199 1.54175 5.04817 1.54175 9.37363C1.54175 13.6991 5.04902 17.2053 9.37508 17.2053C11.2674 17.2053 13.003 16.5344 14.357 15.4176L17.177 18.238C17.4699 18.5309 17.9448 18.5309 18.2377 18.238C18.5306 17.9451 18.5306 17.4703 18.2377 17.1774L15.418 14.3573C16.5365 13.0033 17.2084 11.2669 17.2084 9.37363C17.2084 5.04817 13.7011 1.54199 9.37508 1.54199Z"
                            fill="" />
                    </svg>
                </span>
                <x-ui.input.text id="search-input" icon="magnifying-glass" wire:model.live="search"
                    class="py-2.5 pe-14 ps-12"
                    placeholder="{{ __('dashboard.search') }} {{ __('dashboard.' . $resource->collectionTitle) }}..." />

                <button type="button" id="search-button"
                    class="absolute top-1/2 right-2.5 inline-flex -translate-y-1/2 items-center gap-0.5 rounded-lg border border-gray-200 bg-gray-50 px-[7px] py-[4.5px] text-xs -tracking-[0.2px] text-gray-500 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-400">
                    <span> ⌘ </span>
                    <span> K </span>
                </button>
            </div>
            <div class="flex items-center space-x-2 justify-end">
                @if (count($resource->selectedRecords))
                    <div class="gap-3 flex  items-center justify-start sm:justify-between  w-full sm:w-auto">
                        @if (isset($resource->filters['trashed']) && $resource->filters['trashed'] == 'Trashed')
                            @can('restoreAny', $resource->getModelClass())
                                <x-ui.button.success  wire:click="confirmBulkRestore" variant="primary"
                                    icon="arrow-path" class="cursor-pointer">
                                    {{ __('dashboard.restore') }}
                                </x-ui.button.success>
                            @endcan
                        @else
                            @can('deleteAny', $resource->getModelClass())
                                <x-ui.button.danger  wire:click="confirmBulkDeletion" variant="danger"
                                    icon="trash" class="cursor-pointer">
                                    {{ __('dashboard.delete') }}
                                </x-ui.button.danger>
                            @endcan
                        @endif

                        <div class="flex items-center  space-x-3 ">
                            <span class="hidden sm:flex text-gray-500 text-theme-sm dark:text-gray-400">
                                {{ count($resource->selectedRecords) . ' ' . __('dashboard.selected') }}
                            </span>

                            <x-ui.button.secondary wire:click="resetBulkDeleteState" class="cursor-pointer"
                                 variant="ghost">
                                {{ __('dashboard.deselect') }}</x-ui.button.secondary>
                        </div>
                    </div>
                @endif
                @if ($resource->filters)
                    <x-ui.button.secondary icon="trash"
                        wire:click="clearFilters">{{ __('dashboard.clear') }}</x-ui.button.secondary>
                @endif
                @if ($resource->showFilters)
                    <div x-data="{ openDropDown: false }" class="relative h-fit">
                        <x-ui.button.secondary @click="openDropDown = !openDropDown">
                            <svg class="stroke-current fill-white dark:fill-gray-800" width="20" height="20"
                                viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.29004 5.90393H17.7067" stroke="" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M17.7075 14.0961H2.29085" stroke="" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M12.0826 3.33331C13.5024 3.33331 14.6534 4.48431 14.6534 5.90414C14.6534 7.32398 13.5024 8.47498 12.0826 8.47498C10.6627 8.47498 9.51172 7.32398 9.51172 5.90415C9.51172 4.48432 10.6627 3.33331 12.0826 3.33331Z"
                                    fill="" stroke="" stroke-width="1.5" />
                                <path
                                    d="M7.91745 11.525C6.49762 11.525 5.34662 12.676 5.34662 14.0959C5.34661 15.5157 6.49762 16.6667 7.91745 16.6667C9.33728 16.6667 10.4883 15.5157 10.4883 14.0959C10.4883 12.676 9.33728 11.525 7.91745 11.525Z"
                                    fill="" stroke="" stroke-width="1.5" />
                            </svg>

                            {{ __('dashboard.filters') }}
                        </x-ui.button.secondary>
                        <div x-show="openDropDown" @click.outside="openDropDown = false"
                            class="absolute right-0 top-full mt-1 z-40 w-70 space-y-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark">
                            @if ($resource->enableTrashFilter)
                                <x-ui.input.select :label="__('dashboard.trashed')" wire:model.live="filters.trashed">
                                    <option>{{ __('dashboard.not_trashed') }}</option>
                                    <option>{{ __('dashboard.trashed') }}</option>
                                </x-ui.input.select>
                            @endif
                            {{ $slot }}
                        </div>
                    </div>
                @endif
            </div>

        </div>

    </div>
</div>