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

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

{% block content %}
<div class="container px-4 mx-auto">
    <div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Parks</h1>
        {% if user.is_authenticated %}
            <a href="{% url 'parks:park_create' %}" class="btn-primary">
                <i class="mr-2 fas fa-plus"></i>Add Park
            </a>
        {% endif %}
    </div>

    <!-- Filters -->
    <div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <form id="park-filters" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5" 
              hx-get="{% url 'parks:park_list' %}"
              hx-trigger="change from:select, input from:input[type='text'] delay:500ms"
              hx-target="#parks-grid"
              hx-push-url="true">
            <div>
                <label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
                <input type="text" name="search" id="search" 
                       value="{{ current_filters.search }}"
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Search parks...">
            </div>
            <div>
                <label for="country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                <input type="text" name="country" id="country" 
                       value="{{ current_filters.country }}"
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Select country...">
            </div>
            <div>
                <label for="region" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">State/Region</label>
                <input type="text" name="region" id="region" 
                       value="{{ current_filters.region }}"
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Select state/region...">
            </div>
            <div>
                <label for="city" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
                <input type="text" name="city" id="city" 
                       value="{{ current_filters.city }}"
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Select city...">
            </div>
            <div>
                <label for="status" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
                <select name="status" id="status" 
                        class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Statuses</option>
                    <option value="OPERATING" {% if current_filters.status == 'OPERATING' %}selected{% endif %}>Operating</option>
                    <option value="CLOSED_TEMP" {% if current_filters.status == 'CLOSED_TEMP' %}selected{% endif %}>Temporarily Closed</option>
                    <option value="CLOSED_PERM" {% if current_filters.status == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
                    <option value="UNDER_CONSTRUCTION" {% if current_filters.status == 'UNDER_CONSTRUCTION' %}selected{% endif %}>Under Construction</option>
                    <option value="DEMOLISHED" {% if current_filters.status == 'DEMOLISHED' %}selected{% endif %}>Demolished</option>
                    <option value="RELOCATED" {% if current_filters.status == 'RELOCATED' %}selected{% endif %}>Relocated</option>
                </select>
            </div>
        </form>
    </div>

    <!-- Parks Grid -->
    <div id="parks-grid">
        {% include "parks/partials/park_list.html" %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
<style>
    .awesomplete {
        width: 100%;
    }
    .awesomplete > ul {
        @apply bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg;
    }
    .awesomplete > ul > li {
        @apply px-4 py-2 cursor-pointer text-gray-700 dark:text-gray-300;
    }
    .awesomplete > ul > li:hover,
    .awesomplete > ul > li[aria-selected="true"] {
        @apply bg-gray-100 dark:bg-gray-600;
    }
    .awesomplete mark {
        @apply bg-blue-100 dark:bg-blue-900;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const countryInput = document.getElementById('country');
    const regionInput = document.getElementById('region');
    const cityInput = document.getElementById('city');

    // Initialize Awesomplete for country
    if (countryInput) {
        const countryList = new Awesomplete(countryInput, {
            minChars: 1,
            maxItems: 10,
            autoFirst: true
        });

        countryInput.addEventListener('input', function() {
            fetch(`/parks/ajax/countries/?q=${encodeURIComponent(this.value)}`)
                .then(response => response.json())
                .then(data => {
                    countryList.list = data;
                });
        });
    }

    // Initialize Awesomplete for region
    if (regionInput) {
        const regionList = new Awesomplete(regionInput, {
            minChars: 1,
            maxItems: 10,
            autoFirst: true
        });

        regionInput.addEventListener('input', function() {
            const country = countryInput.value;
            fetch(`/parks/ajax/regions/?q=${encodeURIComponent(this.value)}&country=${encodeURIComponent(country)}`)
                .then(response => response.json())
                .then(data => {
                    regionList.list = data;
                });
        });
    }

    // Initialize Awesomplete for city
    if (cityInput) {
        const cityList = new Awesomplete(cityInput, {
            minChars: 1,
            maxItems: 10,
            autoFirst: true
        });

        cityInput.addEventListener('input', function() {
            const country = countryInput.value;
            const region = regionInput.value;
            fetch(`/parks/ajax/cities/?q=${encodeURIComponent(this.value)}&country=${encodeURIComponent(country)}&region=${encodeURIComponent(region)}`)
                .then(response => response.json())
                .then(data => {
                    cityList.list = data;
                });
        });
    }

    // Handle location link clicks
    document.querySelectorAll('.location-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const params = new URLSearchParams(this.getAttribute('href').split('?')[1]);
            
            // Update form inputs
            countryInput.value = params.get('country') || '';
            regionInput.value = params.get('region') || '';
            cityInput.value = params.get('city') || '';
            
            // Trigger form submission
            htmx.trigger('#park-filters', 'change');
        });
    });
});
</script>
{% endblock %}