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[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="location" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
                <input type="text" name="location" id="location" 
                       value="{{ current_filters.location }}"
                       class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       placeholder="Search locations...">
            </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() {
    var locationInput = document.getElementById('location');
    if (locationInput) {
        var locationList = new Awesomplete(locationInput, {
            minChars: 1,
            maxItems: 10,
            autoFirst: true
        });

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

        // Trigger HTMX request when a location is selected
        locationInput.addEventListener('awesomplete-select', function(event) {
            htmx.trigger(this, 'change');
        });
    }
});
</script>
{% endblock %}