{% extends "core/search/layouts/filtered_list.html" %}
{% load static %}

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

{% block list_actions %}
{# Simple View Toggle #}
<div class="flex items-center space-x-4">
    <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
        <button hx-get="{% url 'parks:park_list' %}?view_mode=grid{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}"
                hx-target="#results-container"
                hx-push-url="true"
                class="px-3 py-1 rounded-md text-sm font-medium transition-all {% if request.GET.view_mode == 'grid' or not request.GET.view_mode %}bg-white dark:bg-gray-600 shadow-sm text-blue-600 dark:text-blue-400{% else %}text-gray-700 dark:text-gray-300{% endif %}">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
            </svg>
        </button>
        <button hx-get="{% url 'parks:park_list' %}?view_mode=list{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}"
                hx-target="#results-container"
                hx-push-url="true"
                class="px-3 py-1 rounded-md text-sm font-medium transition-all {% if request.GET.view_mode == 'list' %}bg-white dark:bg-gray-600 shadow-sm text-blue-600 dark:text-blue-400{% else %}text-gray-700 dark:text-gray-300{% endif %}">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
            </svg>
        </button>
    </div>
    
    {% if user.is_authenticated %}
    <a href="{% url 'parks:park_create' %}"
       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
        </svg>
        Add Park
    </a>
    {% endif %}
</div>
{% endblock %}

{% block results_list %}
<div id="park-results"
     class="overflow-hidden transition-all duration-300"
     data-view-mode="{{ view_mode|default:'grid' }}">
    
    {# Results Content with Adaptive Grid #}
    <div class="p-6">
        {% if parks %}
            {# Enhanced Responsive Grid Container #}
            <div class="{% if view_mode == 'list' %}space-y-4{% else %}grid gap-6 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4{% endif %} transition-all duration-300">
                {% include "parks/partials/park_list_item.html" with parks=parks view_mode=view_mode|default:'grid' %}
            </div>
        {% else %}
            {# Enhanced No Results Found Section #}
            <div class="text-center py-16 px-4">
                <div class="mx-auto w-32 h-32 text-gray-300 dark:text-gray-600 mb-8">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                </div>
                
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">No parks found</h3>
                
                {% if request.GET.search %}
                    <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
                        No parks match your search for <span class="font-semibold text-gray-900 dark:text-white">"{{ request.GET.search }}"</span>.
                        <br>Try searching with different keywords or check your spelling.
                    </p>
                {% elif request.GET.park_type or request.GET.has_coasters or request.GET.min_rating or request.GET.big_parks_only %}
                    <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
                        No parks match your current filter criteria.
                        <br>Try adjusting your filters or removing some restrictions.
                    </p>
                {% else %}
                    <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
                        No parks are currently available in the database.
                    </p>
                {% endif %}
                
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    {% if request.GET.search or request.GET.park_type or request.GET.has_coasters or request.GET.min_rating or request.GET.big_parks_only %}
                        <button type="button"
                                onclick="clearAllFilters()"
                                class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            Clear All Filters
                        </button>
                        
                        <a href="{% url 'parks:park_list' %}"
                           class="inline-flex items-center px-6 py-3 text-sm font-semibold text-blue-700 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>
                            View all parks
                        </a>
                    {% endif %}
                    
                    {% if user.is_authenticated %}
                        <a href="{% url 'parks:park_create' %}"
                           class="inline-flex items-center px-6 py-3 text-sm font-semibold text-green-700 dark:text-green-300 hover:text-green-800 dark:hover:text-green-200 transition-colors duration-200">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            Add a new park
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>

<script>
// Enhanced clear all filters function
function clearAllFilters() {
    const form = document.getElementById('filter-form');
    if (!form) return;
    
    // Clear all form inputs
    const inputs = form.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
        if (input.type === 'checkbox' || input.type === 'radio') {
            input.checked = false;
        } else if (input.type !== 'hidden') {
            input.value = '';
        }
    });
    
    // Clear search input as well
    const searchInput = document.querySelector('input[name="search"]');
    if (searchInput) {
        searchInput.value = '';
    }
    
    // Submit form to reload without filters
    htmx.trigger(form, 'submit');
}

// Smooth scroll to results after filter changes
document.addEventListener('htmx:afterSwap', function(event) {
    if (event.detail.target.id === 'results-container') {
        // Add a subtle scroll to results with a small delay for content to settle
        setTimeout(() => {
            const resultsElement = document.getElementById('park-results');
            if (resultsElement) {
                resultsElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start',
                    inline: 'nearest'
                });
            }
        }, 100);
        
        // Flash effect to indicate content update
        const resultsContainer = event.detail.target;
        resultsContainer.style.opacity = '0.8';
        setTimeout(() => {
            resultsContainer.style.opacity = '1';
        }, 150);
    }
});
</script>
{% endblock %}
