{% extends "base/base.html" %}
{% load static %}

{% block title %}Parks - ThrillWiki{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    {# Enhanced Container with Modern Responsive Design #}
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
        <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8 max-w-7xl mx-auto">
            {# Enhanced Filters Sidebar with Sticky Positioning #}
            <aside class="xl:col-span-1 order-2 xl:order-1">
                <div class="sticky top-4 z-30 space-y-6">
                    {# Desktop Filter Content Container #}
                    <div id="desktop-filter-panel" class="hidden xl:block">
                        <div class="xl:max-h-[calc(100vh-2rem)] xl:overflow-y-auto xl:scrollbar-thin xl:scrollbar-thumb-gray-300 dark:xl:scrollbar-thumb-gray-600 xl:scrollbar-track-transparent">
                            {% include "core/search/filters.html" %}
                        </div>
                    </div>
                </div>
            </aside>

            {# Enhanced Results Section with Better Responsiveness #}
            <main class="xl:col-span-3 order-1 xl:order-2">
                <div id="results-container" class="space-y-6">
                    {# Mobile Filter Toggle and Panel - Moved to top for better UX #}
                    <div class="xl:hidden">
                        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg">
                            <button type="button"
                                    id="mobile-filter-toggle"
                                    class="w-full flex items-center justify-between p-4 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-xl transition-all duration-200"
                                    aria-expanded="false"
                                    aria-controls="mobile-filter-panel">
                                <span class="flex items-center">
                                    <svg class="w-5 h-5 mr-3 text-blue-600 dark:text-blue-400" 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.414A1 1 0 013 6.707V4z"/>
                                    </svg>
                                    Filters & Search
                                </span>
                                <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>
                            
                            {# Mobile Filter Panel - Adjacent to toggle for proper JavaScript functionality #}
                            <div id="mobile-filter-panel" class="hidden border-t border-gray-200/50 dark:border-gray-700/50">
                                <div class="p-4">
                                    {% block filter_section %}
                                    <!-- Mobile filter content -->
                                    {% include "core/search/filters.html" %}
                                    {% endblock %}
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Enhanced Header Section #}
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg">
                        <div class="p-4 lg:p-6">
                            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
                                <div class="flex items-center space-x-4">
                                    <h2 class="text-xl lg:text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
                                        Parks
                                        <span class="text-sm lg:text-base font-normal text-gray-500 dark:text-gray-400">
                                            ({{ page_obj.paginator.count }} found)
                                        </span>
                                    </h2>
                                </div>
                                
                                {% block list_actions %}
                                {# Custom actions can be added here by extending views #}
                                {% endblock %}
                            </div>
                        </div>
                    </div>

                    {# Enhanced Results Content #}
                    {% block results_list %}
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg overflow-hidden">
                        <div class="p-4 lg:p-6">
                            {% include results_template|default:"search/partials/generic_results.html" %}
                        </div>
                    </div>
                    {% endblock %}

                    {# Enhanced Pagination #}
                    {% if is_paginated %}
                    <div class="flex justify-center">
                        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg px-6 py-4">
                            {% include "search/components/pagination.html" %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </main>
        </div>
    </div>
</div>

{# Enhanced Mobile Filter Panel JavaScript #}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mobileToggle = document.getElementById('mobile-filter-toggle');
    const mobilePanel = document.getElementById('mobile-filter-panel');
    
    if (mobileToggle && mobilePanel) {
        mobileToggle.addEventListener('click', function() {
            const isExpanded = mobileToggle.getAttribute('aria-expanded') === 'true';
            const newState = !isExpanded;
            
            // Update aria-expanded
            mobileToggle.setAttribute('aria-expanded', newState.toString());
            
            // Toggle panel visibility with animation
            if (newState) {
                mobilePanel.classList.remove('hidden');
                mobilePanel.style.maxHeight = '0px';
                mobilePanel.style.overflow = 'hidden';
                mobilePanel.style.transition = 'max-height 0.3s ease-out';
                
                // Trigger reflow
                mobilePanel.offsetHeight;
                
                // Expand
                mobilePanel.style.maxHeight = mobilePanel.scrollHeight + 'px';
                
                // Clean up after animation
                setTimeout(() => {
                    mobilePanel.style.maxHeight = '';
                    mobilePanel.style.overflow = '';
                    mobilePanel.style.transition = '';
                }, 300);
            } else {
                mobilePanel.style.maxHeight = mobilePanel.scrollHeight + 'px';
                mobilePanel.style.overflow = 'hidden';
                mobilePanel.style.transition = 'max-height 0.3s ease-in';
                
                // Trigger reflow
                mobilePanel.offsetHeight;
                
                // Collapse
                mobilePanel.style.maxHeight = '0px';
                
                // Hide after animation
                setTimeout(() => {
                    mobilePanel.classList.add('hidden');
                    mobilePanel.style.maxHeight = '';
                    mobilePanel.style.overflow = '';
                    mobilePanel.style.transition = '';
                }, 300);
            }
            
            // Rotate arrow icon
            const arrow = mobileToggle.querySelector('svg:last-child');
            if (arrow) {
                arrow.style.transform = newState ? 'rotate(180deg)' : 'rotate(0deg)';
            }
        });
        
        // Close on escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && mobileToggle.getAttribute('aria-expanded') === 'true') {
                mobileToggle.click();
            }
        });
        
        // Close when clicking outside on mobile
        document.addEventListener('click', function(e) {
            if (window.innerWidth < 1280 && // xl breakpoint
                !mobileToggle.contains(e.target) &&
                !mobilePanel.contains(e.target) &&
                mobileToggle.getAttribute('aria-expanded') === 'true') {
                mobileToggle.click();
            }
        });
    }
});
</script>
{% endblock %}

{% block extra_scripts %}
<script>
    // Handle browser back/forward with HTMX
    document.body.addEventListener('htmx:beforeOnLoad', function(evt) {
        if (evt.detail.requestConfig.verb === "get") {
            history.replaceState(null, '', evt.detail.requestConfig.path);
        }
    });
</script>
{% endblock %}
