{% load i18n %}
<form hx-get="{% url 'index' %}" hx-target="#recipe-grid" hx-swap="outerHTML" hx-push-url="true" hx-trigger="change delay:500ms, keyup delay:500ms from:#search, submit, uploaderChange from:body">
    <div class="grid">
        <!-- Main Search Bar -->
        <div class="s12">
            <div class="field prefix suffix border round primary-container">
                <i class="front">search</i>
                <input id="search" type="text" name="q" placeholder="{% trans 'Search by title...' %}" value="{{ request.GET.q|default:'' }}">
                <a class="circle plain" onclick="toggleAdvanced()" title="{% trans 'Advanced Search' %}">
                    <i id="advanced-icon">filter_list</i>
                </a>
            </div>
        </div>

        <!-- Collapsible Advanced Search Panel -->
        <div id="advanced-search" class="s12 hidden" style="display: none;">
            <div class="padding surface border round">
                <div class="grid">
                    <div class="s12 m6 l3">
                        <div class="field label border round">
                            <input type="date" name="date_start" value="{{ request.GET.date_start|default:'' }}">
                            <label>{% trans "Start Date" %}</label>
                        </div>
                    </div>
                    <div class="s12 m6 l3">
                        <div class="field label border round">
                            <input type="date" name="date_end" value="{{ request.GET.date_end|default:'' }}">
                            <label>{% trans "End Date" %}</label>
                        </div>
                    </div>

                    <!-- Custom Uploader Dropdown with Avatar -->
                    <div class="s12 m6 l3">
                        <div class="field label border round suffix relative" onclick="toggleUploaderMenu(event)">
                            <input type="text" id="uploader-display" readonly value="{{ request.GET.uploader|default:'' }}" placeholder="{% trans 'All Uploaders' %}" style="cursor: pointer;">
                            <label>{% trans "Uploader" %}</label>
                            <i class="chevron-down">arrow_drop_down</i>

                            <div id="uploader-menu" class="absolute surface elevate round left top-round bottom-round scroll" style="top: 100%; left: 0; right: 0; max-height: 300px; display: none; z-index: 20;">
                                <a class="row padding hover pointer" onclick="selectUploader('', '{% trans 'All Uploaders' %}')">
                                    <span>{% trans "All Uploaders" %}</span>
                                </a>
                                {% for u in uploaders %}
                                <a class="row padding hover pointer align-center" onclick="selectUploader('{{ u.username }}', '{{ u.username }}')">
                                    {% if u.avatar %}
                                    <img src="{{ u.avatar.url }}" class="circle tiny margin-right">
                                    {% else %}
                                    <i class="tiny circle surface margin-right">person</i>
                                    {% endif %}
                                    <span>{{ u.username }}</span>
                                </a>
                                {% endfor %}
                            </div>
                        </div>
                        <input type="hidden" name="uploader" id="uploader-hidden" value="{{ request.GET.uploader|default:'' }}">
                    </div>

                    <div class="s12 m6 l3">
                         <div class="field label border round suffix relative" onclick="toggleTagMenu(event)">
                            <input type="text" id="tag-display" readonly placeholder="{% trans 'All Tags' %}" style="cursor: pointer;">
                            <label>{% trans "Tags" %}</label>
                            <i class="chevron-down">arrow_drop_down</i>

                            <div id="tag-menu" class="absolute surface elevate round left top-round bottom-round scroll" style="top: 100%; left: 0; right: 0; max-height: 300px; display: none; z-index: 20;" onclick="event.stopPropagation()">
                                {% for t in tags %}
                                <label class="row padding hover pointer align-center">
                                    <input type="checkbox" class="margin-right" onchange="updateSelectedTags()" value="{{ t.name }}" {% if t.name in selected_tags %}checked{% endif %}>
                                    <span>{{ t.name }}</span>
                                </label>
                                {% endfor %}
                            </div>
                        </div>
                        <div id="tag-hidden-container">
                             {% for t in selected_tags %}
                            <input type="hidden" name="tag" value="{{ t }}">
                            {% endfor %}
                        </div>
                    </div>

                    {% if user.is_authenticated %}
                    <div class="s12 m6 l3">
                        <div class="field middle-align">
                            <label class="checkbox">
                                <input type="checkbox" name="favorites" {% if request.GET.favorites == 'on' %}checked{% endif %}>
                                <span>{% trans "My Favorites" %}</span>
                            </label>
                        </div>
                    </div>
                    {% endif %}

                    <div class="s12 m6 l3">
                        <div class="field label border round">
                           <select name="sort">
                               <option value="date_desc" {% if request.GET.sort == 'date_desc' %}selected{% endif %}>{% trans "Newest" %}</option>
                               <option value="date_asc" {% if request.GET.sort == 'date_asc' %}selected{% endif %}>{% trans "Oldest" %}</option>
                               <option value="rating" {% if request.GET.sort == 'rating' %}selected{% endif %}>{% trans "Highest Rated" %}</option>
                               <option value="user" {% if request.GET.sort == 'user' %}selected{% endif %}>{% trans "Uploader (A-Z)" %}</option>
                           </select>
                           <label>{% trans "Sort By" %}</label>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</form>
