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

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

{% block content %}
<div class="container mx-auto px-4">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Theme Parks & Amusement Parks</h1>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Filters</h2>
        <form hx-get="{% url 'parks:park_list' %}"
              hx-target="#parks-grid"
              hx-push-url="true"
              hx-trigger="change from:select, keyup[target.name=='search'] delay:500ms from:input"
              class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search</label>
                <input type="text" 
                       name="search"
                       value="{{ current_filters.search }}"
                       placeholder="Search parks..."
                       class="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Location</label>
                <select name="location"
                        class="form-select w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Locations</option>
                    {% for location in locations %}
                        <option value="{{ location }}" {% if current_filters.location == location %}selected{% endif %}>{{ location }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                <select name="status"
                        class="form-select w-full rounded-lg border-gray-300 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>
                </select>
            </div>
        </form>
    </div>

    <!-- Parks Grid -->
    <div id="parks-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% include 'parks/partials/park_list.html' %}
    </div>
</div>
{% endblock %}