idk man

templates/parks/park_list.html

@@ -16,9 +16,9 @@
 
     <!-- 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" 
+        <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[type='text'] delay:500ms"
+              hx-trigger="change from:select, input from:input[type='text'] delay:500ms"
               hx-target="#parks-grid"
               hx-push-url="true">
             <div>
@@ -29,11 +29,25 @@
                        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 }}"
+                <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="Search locations...">
+                       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>
@@ -84,27 +98,79 @@
 <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, {
+    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
         });
 
-        locationInput.addEventListener('input', function() {
-            fetch(`/parks/ajax/locations/?q=${encodeURIComponent(this.value)}`)
+        countryInput.addEventListener('input', function() {
+            fetch(`/parks/ajax/countries/?q=${encodeURIComponent(this.value)}`)
                 .then(response => response.json())
                 .then(data => {
-                    locationList.list = data;
+                    countryList.list = data;
                 });
         });
+    }
 
-        // Trigger HTMX request when a location is selected
-        locationInput.addEventListener('awesomplete-select', function(event) {
-            htmx.trigger(this, 'change');
+    // 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 %}