{% load i18n %}
<div class="filter-component" id="{{ component.filter_id }}">
    <!-- 过滤器触发按钮 -->
    <div class="filter-trigger-container" id="filter-trigger-{{ component.filter_id }}">
        <button type="button" class="filter-trigger-btn" aria-expanded="false" aria-controls="filter-dropdown-{{ component.filter_id }}">
            <span class="filter-trigger-icon">{% translate "Filters" %}</span>
            <span class="filter-trigger-text">{% translate "Filters" %}</span>
            {% if component.filters %}
                <span class="filter-count" data-filter-count="0">0</span>
            {% endif %}
            <span class="filter-trigger-arrow">▾</span>
        </button>
    </div>
    
    <!-- 过滤器下拉面板 -->
    <div class="filter-dropdown" id="filter-dropdown-{{ component.filter_id }}" aria-labelledby="filter-trigger-{{ component.filter_id }}">
        <div class="filter-dropdown-header">
            <h4>{{ component.title }}</h4>
            <button type="button" class="filter-dropdown-close" aria-label="{% translate 'Close filters' %}">×</button>
        </div>
        <div class="filter-dropdown-content">
            {% if component.filters %}
                <form class="filter-form" method="get">
                    {% for filter in component.filters %}
                    <div class="filter-field">
                        <label for="filter_{{ filter.name }}">{{ filter.label }}</label>
                        
                        {% if filter.type == "select" %}
                            <select name="{{ filter.name }}" id="filter_{{ filter.name }}" class="filter-select select2-filter">
                                 {% for option in filter.options %}
                                 <option value="{{ option.value }}" {% if option.value == filter.current_value %}selected{% endif %}>
                                     {{ option.label }}
                                 </option>
                                 {% endfor %}
                             </select>
                        
                        {% elif filter.type == "multi_select" %}
                             <select name="{{ filter.name }}[]" id="filter_{{ filter.name }}" class="filter-multi-select select2-filter" multiple>
                                  {% for option in filter.options %}
                                  <option value="{{ option.value }}" {% if option.value in filter.current_value %}selected{% endif %}>
                                      {{ option.label }}
                                  </option>
                                  {% endfor %}
                             </select>
                        
                        {% elif filter.type == "date_range" %}
                             <div class="date-range-filter">
                                  <select name="{{ filter.name }}" id="filter_{{ filter.name }}" class="filter-date-range select2-filter">
                                      <option value="all_time" {% if filter.current_value == "all_time" %}selected{% endif %}>{% translate "All time" %}</option>
                                      <option value="today" {% if filter.current_value == "today" %}selected{% endif %}>{% translate "Today" %}</option>
                                      <option value="yesterday" {% if filter.current_value == "yesterday" %}selected{% endif %}>{% translate "Yesterday" %}</option>
                                      <option value="last_7_days" {% if filter.current_value == "last_7_days" %}selected{% endif %}>{% translate "Last 7 days" %}</option>
                                      <option value="last_30_days" {% if filter.current_value == "last_30_days" %}selected{% endif %}>{% translate "Last 30 days" %}</option>
                                      <option value="this_month" {% if filter.current_value == "this_month" %}selected{% endif %}>{% translate "This month" %}</option>
                                      <option value="last_month" {% if filter.current_value == "last_month" %}selected{% endif %}>{% translate "Last month" %}</option>
                                      <option value="this_year" {% if filter.current_value == "this_year" %}selected{% endif %}>{% translate "This year" %}</option>
                                      <option value="last_year" {% if filter.current_value == "last_year" %}selected{% endif %}>{% translate "Last year" %}</option>
                                      <option value="custom" {% if filter.current_value == "custom" %}selected{% endif %}>{% translate "Custom range" %}</option>
                                  </select>
                                
                                 <div class="custom-date-range" style="{% if filter.current_value != 'custom' %}display: none;{% endif %}">
                                     <div class="date-range-calendar">
                                         <input type="date" name="{{ filter.name }}_start" class="date-start" placeholder="{% translate 'Start date' %}"
                                                value="{{ filter.start_date|default:'' }}" title="{% translate 'Select start date' %}">
                                         <span class="date-range-separator">–</span>
                                         <input type="date" name="{{ filter.name }}_end" class="date-end" placeholder="{% translate 'End date' %}"
                                                value="{{ filter.end_date|default:'' }}" title="{% translate 'Select end date' %}">
                                     </div>
                                 </div>
                            </div>
                        
                        {% elif filter.type == "text" %}
                             <input type="text" name="{{ filter.name }}" id="filter_{{ filter.name }}" 
                                    class="filter-text" value="{{ filter.current_value|default:'' }}" 
                                    placeholder="{{ filter.placeholder|default:'' }}">
                        
                        {% elif filter.type == "number" %}
                             <input type="number" name="{{ filter.name }}" id="filter_{{ filter.name }}" 
                                    class="filter-number" value="{{ filter.current_value|default:'' }}" 
                                    placeholder="{{ filter.placeholder|default:'' }}">
                        
                        {% elif filter.type == "number_range" %}
                             <div class="number-range-filter">
                                  <div class="number-range-inputs">
                                      <input type="number" name="{{ filter.name }}_min" class="number-range-min" 
                                             placeholder="{% translate 'Min' %}" value="{{ filter.min_value|default:'' }}">
                                      <span class="number-range-separator">–</span>
                                      <input type="number" name="{{ filter.name }}_max" class="number-range-max" 
                                             placeholder="{% translate 'Max' %}" value="{{ filter.max_value|default:'' }}">
                                  </div>
                             </div>
                        
                        {% elif filter.type == "checkbox" %}
                            <div class="checkbox-filter">
                                {% for option in filter.options %}
                                <label class="checkbox-option">
                                     <input type="checkbox" name="{{ filter.name }}[]" value="{{ option.value }}"
                                            {% if option.value in filter.current_value %}checked{% endif %}>
                                    {{ option.label }}
                                </label>
                                {% endfor %}
                            </div>
                        
                        {% else %}
                            <p class="filter-not-supported">{% translate "Filter type not supported:" %} {{ filter.type }}</p>
                        {% endif %}
                    </div>
                    {% endfor %}
                    
                    <div class="filter-actions">
                        <button type="submit" class="filter-apply">{% translate "Apply Filters" %}</button>
                        <button type="button" class="filter-reset">{% translate "Reset" %}</button>
                    </div>
                </form>
            {% else %}
                <p class="no-filters">{% translate "No filters configured." %}</p>
            {% endif %}
        </div>
    </div>
</div>