thrillwiki_django_no_react/templates/parks/park_list.html

{% 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 class="grid grid-cols-1 gap-4 md:grid-cols-3" 
              hx-get="{% url 'parks:park_list' %}"
              hx-trigger="change from:select, input from:input[type='text']"
              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="location" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
                <select name="location" id="location" 
                        class="w-full border-gray-300 rounded-lg form-select 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 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 %}