<!-- Search Filters -->
<div>
    <div class="rounded-2xl border border-neutral-200/70 bg-white/80 p-4 shadow-sm backdrop-blur-xl dark:border-neutral-800 dark:bg-neutral-950/70 space-y-4">
        
        <!-- Filters Grid -->
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">

            <!-- Search -->
            <div class="xl:col-span-2">
                <label for="live-search" class="sr-only">
                    {{ __('search.search-hentai') }}
                </label>

                <div class="relative">
                    <!-- Search Icon -->
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                        <svg class="h-5 w-5 text-neutral-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                    </div>

                    <!-- Input -->
                    <input
                        wire:model.live.debounce.500ms="search"
                        type="search"
                        id="live-search"
                        placeholder="{{ __('search.search-hentai') }}"
                        class="w-full rounded-xl border border-neutral-300 bg-white py-5 pl-12 pr-12 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:placeholder-neutral-500"
                    />

                    <!-- Loading -->
                    <div wire:loading.class="opacity-100" class="opacity-0">
                        <div class="absolute inset-y-0 right-3 flex items-center">
                            <svg class="h-5 w-5 animate-spin text-rose-500" viewBox="0 0 24 24" fill="none">
                                <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-90" fill="currentColor"
                                    d="M22 12a10 10 0 0 1-10 10V18a6 6 0 0 0 6-6h4Z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Genres -->
            <button
                type="button"
                data-te-toggle="modal"
                data-te-target="#modalGenres"
                class="group flex items-center gap-3 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-left shadow-sm transition hover:border-rose-400 hover:bg-rose-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"
            >
                <i class="fa-solid fa-sliders text-neutral-400 group-hover:text-rose-500"></i>

                <div class="flex flex-col">
                    <span class="text-xs font-medium uppercase tracking-wide text-neutral-400">
                        Genres
                    </span>

                    <span class="text-sm text-neutral-700 dark:text-neutral-200">
                        @if($tagcount === 0)
                            Select Genres
                        @elseif($tagcount === 1)
                            1 Genre Selected
                        @else
                            {{ $tagcount }} Genres Selected
                        @endif
                    </span>
                </div>
            </button>

            <!-- Blacklist -->
            <button
                type="button"
                data-te-toggle="modal"
                data-te-target="#modalBlacklist"
                class="group flex items-center gap-3 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-left shadow-sm transition hover:border-rose-400 hover:bg-rose-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"
            >
                <i class="fa-solid fa-shield text-neutral-400 group-hover:text-rose-500"></i>

                <div class="flex flex-col">
                    <span class="text-xs font-medium uppercase tracking-wide text-neutral-400">
                        Blacklist
                    </span>

                    <span class="text-sm text-neutral-700 dark:text-neutral-200">
                        @if($blacklistcount === 0)
                            Select Blacklist
                        @elseif($blacklistcount === 1)
                            1 Item Selected
                        @else
                            {{ $blacklistcount }} Items Selected
                        @endif
                    </span>
                </div>
            </button>

            <!-- Studios -->
            <button
                type="button"
                data-te-toggle="modal"
                data-te-target="#modalStudios"
                class="group flex items-center gap-3 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-left shadow-sm transition hover:border-rose-400 hover:bg-rose-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"
            >
                <i class="fa-solid fa-microphone-lines text-neutral-400 group-hover:text-rose-500"></i>

                <div class="flex flex-col">
                    <span class="text-xs font-medium uppercase tracking-wide text-neutral-400">
                        Studios
                    </span>

                    <span class="text-sm text-neutral-700 dark:text-neutral-200">
                        @if($studiocount === 0)
                            Select Studios
                        @elseif($studiocount === 1)
                            1 Studio Selected
                        @else
                            {{ $studiocount }} Studios Selected
                        @endif
                    </span>
                </div>
            </button>
        </div>

        <!-- Bottom Controls -->
        <div class="mt-4 flex flex-col gap-4 border-t border-neutral-200 pt-4 dark:border-neutral-800 lg:flex-row lg:items-center lg:justify-between">

            <!-- Selects -->
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">

                <!-- Order -->
                <div class="relative">
                    <i class="fa-solid fa-sort pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400"></i>

                    <select
                        wire:model.live="order"
                        class="w-full appearance-none rounded-xl border border-neutral-300 bg-white py-3 pl-11 pr-10 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white"
                    >
                        <option value="az">A-Z</option>
                        <option value="za">Z-A</option>
                        <option value="recently-uploaded">{{ __('home.recently-uploaded') }}</option>
                        <option value="recently-released">{{ __('home.recently-released') }}</option>
                        <option value="oldest-uploads">{{ __('search.oldest-uploads') }}</option>
                        <option value="oldest-releases">{{ __('search.oldest-releases') }}</option>
                        <option value="view-count">{{ __('search.view-count') }}</option>
                    </select>
                </div>

                <!-- View -->
                <div class="relative">
                    <i class="fa-solid fa-list pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400"></i>

                    <select
                        wire:model.live="view"
                        class="w-full appearance-none rounded-xl border border-neutral-300 bg-white py-3 pl-11 pr-10 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white"
                    >
                        <option value="thumbnail">Thumbnail</option>
                        <option value="poster">Poster</option>
                    </select>
                </div>
            </div>

            <!-- Auth Options -->
            @auth
                <label
                    for="checkBoxHideWatched"
                    class="flex cursor-pointer items-center gap-3 text-sm text-neutral-700 dark:text-neutral-300"
                >
                    <input
                        id="checkBoxHideWatched"
                        type="checkbox"
                        wire:model.live="hideWatched"
                        class="h-4 w-4 rounded border-neutral-300 text-rose-600 focus:ring-rose-500 dark:border-neutral-700 dark:bg-neutral-800"
                    />

                    <span>Hide watched</span>
                </label>
            @endauth
        </div>
    </div>

    <!-- Modals -->
    @include('modals.filter-genres')
    @include('modals.filter-studios')
    @include('modals.filter-blacklist')
</div>