{% load app_tags %}
{% load widget_tweaks %}

{% if filter.form and show_filters %}

    <div x-data="{ filterOpen: false }" class="border-b border-slate-200">
        <form 
            id="htmx-data-filter"
            hx-get="{{ request.path }}"
            hx-target="#htmx-data-container"
            hx-indicator="#htmx-data-loader"
            hx-swap="innerHTML"
            hx-trigger="submit, change from:.htmx-data-filter select, keyup delay:500ms from:.htmx-data-filter input:not([name='q'])"
            class="relative htmx-data-filter">

            {# Quick Search + Action Buttons #}
            <div class="flex flex-col gap-3 sm:flex-row items-center bg-white p-3">

                {# Quick Search #}
                {% if filter.form.q %}
                <div class="relative w-full lg:w-96 group">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-indigo-500 transition-colors">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    {% render_field filter.form.q class="block w-full h-10 pl-10 pr-4 placeholder-gray-400 text-sm font-medium" placeholder="Search and press Enter..." %}
                </div>
                {% endif %}

                {# Action Buttons #}
                <div class="flex items-center gap-3 ml-auto w-full sm:w-auto">
                    {% if per_page_options %}
                    <div class="flex items-center gap-2 border-r border-gray-100 pr-3">
                        <label class="hidden text-sm lg:block font-bold text-gray-600">Show</label>
                        <select name="per_page" class="h-10 text-sm bg-gray-50/50">
                            <option value="" disabled selected>Limit</option>
                            {% for per_page in per_page_options %}
                                <option value="{{ per_page }}" {% if request.GET.per_page == per_page|stringformat:"s" %}selected{% endif %}>
                                    {{ per_page }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}

                    <button type="button"
                            @click="filterOpen = !filterOpen"
                            :class="filterOpen ? 'bg-indigo-50 border-indigo-200 text-indigo-700' : 'bg-white border-gray-200 text-gray-700'"
                            class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-semibold shadow-xs hover:bg-gray-50 ">
                        <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 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                        </svg>
                        <span>Filters</span>
                    </button>

                    <button type="button"
                            hx-get="{% app_filter_url %}"
                            hx-target="#htmx-data-container"
                            @click="filterOpen = false; document.getElementById('htmx-data-filter').reset()"
                            class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-semibold shadow-xs hover:bg-indigo-50 focus:ring-indigo-500/10 focus:border-indigo-500 ">
                        Reset
                    </button>
                </div>
            </div>

            {# Advanced Filters #}
            <div x-show="filterOpen"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 -translate-y-2"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-cloak
                class="mt-2 p-4 bg-white border-b border-gray-200">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {% for field in filter.form.visible_fields %}
                    {% if field.name != 'q' and field.name != 'per_page' %}
                            <div class="flex flex-col gap-1.5">
                                <label for="{{ field.id_for_label }}" class="text-[13px] tracking-wider font-semibold text-gray-600 ml-1">{{ field.label }}</label>
                                {{ field|add_class:"block w-full h-9 text-sm px-3" }}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="flex items-center justify-between pt-4">
                    <p class="text-xs text-gray-400 font-medium">Advanced filtering options</p>
                    <div class="flex gap-2">
                        <button type="button"
                                hx-get="{% app_filter_url %}"
                                hx-target="#htmx-data-container"
                                @click="filterOpen = true; document.getElementById('htmx-data-filter').reset()"
                                class="px-4 py-2 text-xs font-bold text-gray-500 hover:text-gray-700 transition-colors uppercase tracking-wider">Clear All</button>
                        <button type="button"
                                @click="filterOpen = false"
                                class="px-4 py-2 bg-gray-900 text-white text-xs font-bold rounded-lg hover:bg-gray-800 transition-all uppercase tracking-wider">Close</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

{% endif %}