<!-- Reusable Filter Panel Component -->
<div class="filter-panel {% if panel_classes %}{{ panel_classes }}{% endif %}">
    <form id="{{ form_id|default:'filters-form' }}" 
          method="get" 
          {% if hx_target %}hx-get="{{ hx_url }}" hx-trigger="{{ hx_trigger|default:'change, submit' }}" hx-target="{{ hx_target }}" hx-swap="{{ hx_swap|default:'none' }}" hx-push-url="false"{% endif %}
          class="space-y-4">
        
        <!-- Search Input -->
        {% if show_search %}
        <div>
            <label for="{{ form_id }}-search" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ search_label|default:"Search" }}
            </label>
            <div class="relative">
                <input type="text" 
                       name="q" 
                       id="{{ form_id }}-search" 
                       class="w-full pl-10 pr-4 py-2 border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="{{ search_placeholder|default:'Search by name, location, or keyword...' }}"
                       value="{{ request.GET.q|default:'' }}"
                       {% if search_hx_url %}
                       hx-get="{{ search_hx_url }}"
                       hx-trigger="input changed delay:500ms"
                       hx-target="{{ search_hx_target|default:'#search-results' }}"
                       hx-indicator="{{ search_hx_indicator|default:'#search-loading' }}"
                       {% endif %}>
                <i class="absolute left-3 top-1/2 transform -translate-y-1/2 fas fa-search text-gray-400"></i>
                {% if search_hx_url %}
                <div id="{{ search_hx_indicator|default:'search-loading' }}" class="htmx-indicator absolute right-3 top-1/2 transform -translate-y-1/2">
                    <div class="w-4 h-4 border-2 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
                </div>
                {% endif %}
            </div>
            {% if search_hx_url %}
            <div id="{{ search_hx_target|default:'search-results' }}" class="mt-2"></div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Location Type Filters -->
        {% if show_location_types %}
        <div>
            <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Location Types</label>
            <div class="flex flex-wrap gap-2">
                <label class="filter-chip {% if 'park' in location_types %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="types" value="park" class="hidden" 
                           {% if 'park' in location_types %}checked{% endif %}>
                    <i class="mr-2 fas fa-tree"></i>Parks
                </label>
                <label class="filter-chip {% if 'ride' in location_types %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="types" value="ride" class="hidden"
                           {% if 'ride' in location_types %}checked{% endif %}>
                    <i class="mr-2 fas fa-rocket"></i>Rides
                </label>
                <label class="filter-chip {% if 'company' in location_types %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="types" value="company" class="hidden"
                           {% if 'company' in location_types %}checked{% endif %}>
                    <i class="mr-2 fas fa-building"></i>Companies
                </label>
            </div>
        </div>
        {% endif %}

        <!-- Park Status Filters -->
        {% if show_park_status and 'park' in location_types %}
        <div>
            <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Park Status</label>
            <div class="flex flex-wrap gap-2">
                <label class="filter-chip {% if 'OPERATING' in park_statuses %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="park_status" value="OPERATING" class="hidden"
                           {% if 'OPERATING' in park_statuses %}checked{% endif %}>
                    <i class="mr-2 fas fa-check-circle"></i>Operating
                </label>
                <label class="filter-chip {% if 'CLOSED_TEMP' in park_statuses %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="park_status" value="CLOSED_TEMP" class="hidden"
                           {% if 'CLOSED_TEMP' in park_statuses %}checked{% endif %}>
                    <i class="mr-2 fas fa-clock"></i>Temporarily Closed
                </label>
                <label class="filter-chip {% if 'CLOSED_PERM' in park_statuses %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="park_status" value="CLOSED_PERM" class="hidden"
                           {% if 'CLOSED_PERM' in park_statuses %}checked{% endif %}>
                    <i class="mr-2 fas fa-times-circle"></i>Permanently Closed
                </label>
                <label class="filter-chip {% if 'UNDER_CONSTRUCTION' in park_statuses %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="park_status" value="UNDER_CONSTRUCTION" class="hidden"
                           {% if 'UNDER_CONSTRUCTION' in park_statuses %}checked{% endif %}>
                    <i class="mr-2 fas fa-hard-hat"></i>Under Construction
                </label>
                <label class="filter-chip {% if 'DEMOLISHED' in park_statuses %}active{% else %}inactive{% endif %}">
                    <input type="checkbox" name="park_status" value="DEMOLISHED" class="hidden"
                           {% if 'DEMOLISHED' in park_statuses %}checked{% endif %}>
                    <i class="mr-2 fas fa-ban"></i>Demolished
                </label>
            </div>
        </div>
        {% endif %}

        <!-- Location Filters -->
        {% if show_location_filters %}
        <div class="grid grid-cols-1 gap-4 md:grid-cols-{{ location_filter_columns|default:'3' }}">
            {% if show_country %}
            <div>
                <label for="{{ form_id }}-country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                <input type="text" 
                       name="country" 
                       id="{{ form_id }}-country" 
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Filter by country..."
                       value="{{ request.GET.country|default:'' }}">
            </div>
            {% endif %}
            
            {% if show_state %}
            <div>
                <label for="{{ form_id }}-state" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">State/Region</label>
                <input type="text" 
                       name="state" 
                       id="{{ form_id }}-state" 
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Filter by state..."
                       value="{{ request.GET.state|default:'' }}">
            </div>
            {% endif %}
            
            {% if show_city %}
            <div>
                <label for="{{ form_id }}-city" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
                <input type="text" 
                       name="city" 
                       id="{{ form_id }}-city" 
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Filter by city..."
                       value="{{ request.GET.city|default:'' }}">
            </div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Distance/Radius Filter -->
        {% if show_radius %}
        <div>
            <label for="{{ form_id }}-radius" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ radius_label|default:"Search Radius" }} (miles)
            </label>
            <div class="flex items-center space-x-4">
                <input type="range" 
                       name="radius" 
                       id="{{ form_id }}-radius" 
                       min="{{ radius_min|default:'1' }}" 
                       max="{{ radius_max|default:'500' }}" 
                       value="{{ request.GET.radius|default:'50' }}"
                       class="flex-1"
                       oninput="document.getElementById('{{ form_id }}-radius-value').textContent = this.value">
                <span id="{{ form_id }}-radius-value" class="text-sm font-medium text-gray-700 dark:text-gray-300 min-w-16">
                    {{ request.GET.radius|default:'50' }}
                </span>
            </div>
        </div>
        {% endif %}

        <!-- Sorting -->
        {% if show_sort %}
        <div>
            <label for="{{ form_id }}-sort" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
            <select name="sort" 
                    id="{{ form_id }}-sort" 
                    class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                {% for value, label in sort_options %}
                    <option value="{{ value }}" {% if request.GET.sort == value %}selected{% endif %}>{{ label }}</option>
                {% empty %}
                    <option value="name" {% if request.GET.sort == 'name' %}selected{% endif %}>Name (A-Z)</option>
                    <option value="-name" {% if request.GET.sort == '-name' %}selected{% endif %}>Name (Z-A)</option>
                    <option value="location" {% if request.GET.sort == 'location' %}selected{% endif %}>Location</option>
                    <option value="-created_at" {% if request.GET.sort == '-created_at' %}selected{% endif %}>Recently Added</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}

        <!-- Map Options -->
        {% if show_map_options %}
        <div>
            <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Map Options</label>
            <div class="space-y-2">
                {% if show_clustering_toggle %}
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" 
                           name="cluster" 
                           value="true" 
                           id="{{ form_id }}-cluster" 
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700" 
                           {% if enable_clustering %}checked{% endif %}>
                    <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Group Nearby Locations</span>
                </label>
                {% endif %}
                
                {% if show_satellite_toggle %}
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" 
                           name="satellite" 
                           value="true" 
                           id="{{ form_id }}-satellite" 
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700">
                    <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Satellite View</span>
                </label>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Custom Filter Sections -->
        {% if custom_filters %}
            {% for filter_section in custom_filters %}
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{ filter_section.title }}</label>
                    {% if filter_section.type == 'checkboxes' %}
                        <div class="flex flex-wrap gap-2">
                            {% for option in filter_section.options %}
                                <label class="filter-chip {% if option.value in filter_section.selected %}active{% else %}inactive{% endif %}">
                                    <input type="checkbox" name="{{ filter_section.name }}" value="{{ option.value }}" class="hidden"
                                           {% if option.value in filter_section.selected %}checked{% endif %}>
                                    {% if option.icon %}<i class="mr-2 {{ option.icon }}"></i>{% endif %}{{ option.label }}
                                </label>
                            {% endfor %}
                        </div>
                    {% elif filter_section.type == 'select' %}
                        <select name="{{ filter_section.name }}" 
                                class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                            <option value="">{{ filter_section.placeholder|default:"All" }}</option>
                            {% for option in filter_section.options %}
                                <option value="{{ option.value }}" {% if option.value == filter_section.selected %}selected{% endif %}>
                                    {{ option.label }}
                                </option>
                            {% endfor %}
                        </select>
                    {% elif filter_section.type == 'range' %}
                        <div class="flex items-center space-x-4">
                            <input type="range" 
                                   name="{{ filter_section.name }}" 
                                   min="{{ filter_section.min }}" 
                                   max="{{ filter_section.max }}" 
                                   value="{{ filter_section.value }}"
                                   class="flex-1"
                                   oninput="document.getElementById('{{ filter_section.name }}-value').textContent = this.value">
                            <span id="{{ filter_section.name }}-value" class="text-sm font-medium text-gray-700 dark:text-gray-300 min-w-16">
                                {{ filter_section.value }}
                            </span>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        {% endif %}

        <!-- Action Buttons -->
        <div class="flex gap-3 pt-2">
            {% if show_submit_button %}
            <button type="submit" 
                    class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
                <i class="mr-2 fas fa-search"></i>{{ submit_text|default:"Apply Filters" }}
            </button>
            {% endif %}
            
            {% if show_clear_button %}
            <a href="{{ clear_url|default:request.path }}" 
               class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                <i class="mr-2 fas fa-times"></i>{{ clear_text|default:"Clear All" }}
            </a>
            {% endif %}
            
            <!-- Custom Action Buttons -->
            {% if custom_actions %}
                {% for action in custom_actions %}
                    <a href="{{ action.url }}" 
                       class="px-4 py-2 text-sm font-medium {{ action.classes|default:'text-gray-700 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600' }} rounded-lg transition-colors">
                        {% if action.icon %}<i class="mr-2 {{ action.icon }}"></i>{% endif %}{{ action.text }}
                    </a>
                {% endfor %}
            {% endif %}
        </div>
    </form>
</div>

<!-- Filter Panel Styles -->
<style>
.filter-panel {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow p-4;
}

.filter-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-all;
}

.filter-chip.active {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100;
}

.filter-chip.inactive {
    @apply bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600;
}

.filter-chip:hover {
    transform: translateY(-1px);
}

/* Custom range slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
    background: #e5e7eb;
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #3b82f6;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -6px;
}

input[type="range"]::-moz-range-track {
    background: #e5e7eb;
    height: 4px;
    border-radius: 2px;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    background: #3b82f6;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.dark input[type="range"]::-webkit-slider-track {
    background: #4b5563;
}

.dark input[type="range"]::-moz-range-track {
    background: #4b5563;
}
</style>

<!-- Filter Panel JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const formId = '{{ form_id|default:"filters-form" }}';
    const form = document.getElementById(formId);
    
    if (!form) return;
    
    // Handle filter chip toggles
    form.querySelectorAll('.filter-chip').forEach(chip => {
        const checkbox = chip.querySelector('input[type="checkbox"]');
        
        chip.addEventListener('click', (e) => {
            e.preventDefault();
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                chip.classList.toggle('active', checkbox.checked);
                chip.classList.toggle('inactive', !checkbox.checked);
                
                // Trigger form change for HTMX
                form.dispatchEvent(new Event('change'));
            }
        });
    });
    
    // Auto-submit form on most changes (except search input)
    form.addEventListener('change', function(e) {
        if (e.target.name !== 'q' && !e.target.closest('.no-auto-submit')) {
            {% if hx_target %}
                // HTMX will handle the submission
            {% else %}
                this.submit();
            {% endif %}
        }
    });
    
    // Handle search input separately with debouncing
    const searchInput = form.querySelector('input[name="q"]');
    if (searchInput) {
        let searchTimeout;
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                {% if not search_hx_url %}
                form.dispatchEvent(new Event('change'));
                {% endif %}
            }, 500);
        });
    }
    
    // Custom event for filter updates
    form.addEventListener('filtersUpdated', function(e) {
        // Custom logic when filters are updated
        console.log('Filters updated:', e.detail);
    });
    
    // Emit initial filter state
    window.addEventListener('load', function() {
        const formData = new FormData(form);
        const filters = {};
        for (let [key, value] of formData.entries()) {
            if (filters[key]) {
                if (Array.isArray(filters[key])) {
                    filters[key].push(value);
                } else {
                    filters[key] = [filters[key], value];
                }
            } else {
                filters[key] = value;
            }
        }
        
        const event = new CustomEvent('filtersInitialized', {
            detail: filters
        });
        form.dispatchEvent(event);
    });
});
</script>