{% load rest_framework %}

<form method="GET" action="{{ request.path }}" class="space-y-4">

    {% for field in filter_form %}
    <div class="space-y-2">
        {# Field Label #}
        <label for="{{ field.id_for_label }}"
               class="block text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center">
            {{ field.label }}
            {% if field.field.required %}
            <span class="ml-1 text-red-500">*</span>
            {% endif %}
            {% if field.help_text %}
            <span class="ml-2 group relative">
                <svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
                    {{ field.help_text }}
                </span>
            </span>
            {% endif %}
        </label>

        {# Field Input #}
        {% if field.field.widget.input_type == 'select' %}
            {# Select dropdown #}
            <select id="{{ field.id_for_label }}"
                    name="{{ field.name }}"
                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
                {% if not field.field.required %}
                <option value="">---------</option>
                {% endif %}
                {% for value, label in field.field.choices %}
                <option value="{{ value }}" {% if field.value == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>

        {% elif field.field.widget.input_type == 'checkbox' %}
            {# Checkbox #}
            <div class="flex items-center">
                <input type="checkbox"
                       id="{{ field.id_for_label }}"
                       name="{{ field.name }}"
                       {% if field.value %}checked{% endif %}
                       class="w-5 h-5 text-purple-600 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-purple-500 transition-all">
                <label for="{{ field.id_for_label }}" class="ml-3 text-sm text-gray-700 dark:text-gray-300">
                    {{ field.label }}
                </label>
            </div>

        {% elif field.field.widget.input_type == 'textarea' %}
            {# Textarea #}
            <textarea id="{{ field.id_for_label }}"
                      name="{{ field.name }}"
                      rows="3"
                      placeholder="{{ field.field.widget.attrs.placeholder|default:'' }}"
                      class="w-full px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all resize-y">{{ field.value|default:'' }}</textarea>

        {% else %}
            {# Text input (default) #}
            <div class="relative">
                <input type="{{ field.field.widget.input_type|default:'text' }}"
                       id="{{ field.id_for_label }}"
                       name="{{ field.name }}"
                       value="{{ field.value|default:'' }}"
                       placeholder="{{ field.field.widget.attrs.placeholder|default:'' }}"
                       class="w-full px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all
                              {% if field.errors %}border-red-500 dark:border-red-500{% endif %}">

                {# Clear button for text inputs #}
                {% if field.value %}
                <button type="button"
                        onclick="document.getElementById('{{ field.id_for_label }}').value = ''"
                        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                </button>
                {% endif %}
            </div>
        {% endif %}

        {# Field Errors #}
        {% if field.errors %}
        <div class="text-sm text-red-600 dark:text-red-400 flex items-center mt-1">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
            {{ field.errors|first }}
        </div>
        {% endif %}
    </div>
    {% endfor %}

    {# Action Buttons #}
    <div class="flex items-center space-x-2 pt-4 border-t border-gray-200 dark:border-gray-700">
        <button type="submit"
                class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium">
            Apply
        </button>

        <a href="{{ request.path }}"
           class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg font-medium">
            Reset
        </a>
    </div>

    {# Active Filters Summary #}
    {% if request.GET %}
    <div class="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
        <p class="text-sm font-medium text-blue-900 dark:text-blue-300 mb-2">Active Filters:</p>
        <div class="flex flex-wrap gap-2">
            {% for key, value in request.GET.items %}
                {% if value and key != 'page' %}
                <span class="inline-flex items-center px-2 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 rounded text-xs">
                    <span class="font-medium">{{ key }}:</span>
                    <span class="ml-1">{{ value }}</span>
                    <a href="?{% for k, v in request.GET.items %}{% if k != key %}{{ k }}={{ v }}{% if not forloop.last %}&{% endif %}{% endif %}{% endfor %}"
                       class="ml-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200">
                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </a>
                </span>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
</form>