From de8b6f67a30f6c8accac75dc11eed152f8fbc931 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Fri, 26 Sep 2025 15:25:12 -0400
Subject: [PATCH] Refactor ride filters and forms to use AlpineJS for state
 management and HTMX for AJAX interactions

- Enhanced filter sidebar with AlpineJS for collapsible sections and localStorage persistence.
- Removed custom JavaScript in favor of AlpineJS for managing filter states and interactions.
- Updated ride form to utilize AlpineJS for handling manufacturer, designer, and ride model selections.
- Simplified search script to leverage AlpineJS for managing search input and suggestions.
- Improved error handling for HTMX requests with minimal JavaScript.
- Refactored ride form data handling to encapsulate logic within an AlpineJS component.
---
 .clinerules/thrillwiki-simple.md              |   2 +
 templates/maps/partials/location_card.html    |  88 +--
 templates/parks/partials/location_widget.html | 502 ++++++++--------
 templates/parks/roadtrip_planner.html         | 431 +++++---------
 templates/rides/partials/filter_sidebar.html  | 220 +++----
 templates/rides/partials/ride_form.html       |  39 +-
 templates/rides/partials/search_script.html   | 538 ++++--------------
 templates/rides/ride_form.html                |  58 +-
 8 files changed, 706 insertions(+), 1172 deletions(-)

diff --git a/.clinerules/thrillwiki-simple.md b/.clinerules/thrillwiki-simple.md
index fd58890e..f27b9f9c 100644
--- a/.clinerules/thrillwiki-simple.md
+++ b/.clinerules/thrillwiki-simple.md
@@ -51,4 +51,6 @@ tailwindcss, django, django-cotton, htmx, alpinejs, django-rest-framework, postg
 - RichChoiceField over Django choices
 - Progressive enhancement required
 
+- We prefer to edit existing files instead of creating new ones.
+
 YOU ARE STRICTLY AND ABSOLUTELY FORBIDDEN FROM IGNORING, BYPASSING, OR AVOIDING THESE RULES IN ANY WAY WITH NO EXCEPTIONS!!!
\ No newline at end of file
diff --git a/templates/maps/partials/location_card.html b/templates/maps/partials/location_card.html
index 96851c66..bdbfe7d4 100644
--- a/templates/maps/partials/location_card.html
+++ b/templates/maps/partials/location_card.html
@@ -3,7 +3,8 @@
      {% if location.id %}data-location-id="{{ location.id }}"{% endif %}
      {% if location.type %}data-location-type="{{ location.type }}"{% endif %}
      {% if location.latitude and location.longitude %}data-lat="{{ location.latitude }}" data-lng="{{ location.longitude }}"{% endif %}
-     {% if clickable %}onclick="{{ onclick_action|default:'window.location.href=\''|add:location.get_absolute_url|add:'\'' }}"{% endif %}>
+     x-data="locationCard()"
+     {% if clickable %}@click="handleCardClick('{{ location.get_absolute_url }}')"{% endif %}>
     
     <!-- Card Header -->
     <div class="flex items-start justify-between mb-3">
@@ -69,7 +70,7 @@
         {% endif %}
         
         {% if show_map_action %}
-            <button onclick="showOnMap('{{ location.type }}', {{ location.id }})" 
+            <button @click="showOnMap('{{ location.type }}', {{ location.id }})" 
                     class="px-3 py-2 text-sm text-green-600 border border-green-600 rounded-lg hover:bg-green-50 dark:hover:bg-green-900 transition-colors"
                     title="Show on map">
                 <i class="fas fa-map-marker-alt"></i>
@@ -77,7 +78,7 @@
         {% endif %}
         
         {% if show_trip_action %}
-            <button onclick="addToTrip({{ location|safe }})" 
+            <button @click="addToTrip({{ location|safe }})" 
                     class="px-3 py-2 text-sm text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 transition-colors"
                     title="Add to trip">
                 <i class="fas fa-plus"></i>
@@ -297,50 +298,55 @@ This would be in templates/maps/partials/park_card_content.html
 }
 </style>
 
-<!-- Location Card JavaScript -->
 <script>
-// Global functions for location card actions
-window.showOnMap = function(type, id) {
-    // Emit custom event for map integration
-    const event = new CustomEvent('showLocationOnMap', {
-        detail: { type, id }
-    });
-    document.dispatchEvent(event);
-};
-
-window.addToTrip = function(locationData) {
-    // Emit custom event for trip integration
-    const event = new CustomEvent('addLocationToTrip', {
-        detail: locationData
-    });
-    document.dispatchEvent(event);
-};
-
-// Handle location card selection
-document.addEventListener('DOMContentLoaded', function() {
-    document.addEventListener('click', function(e) {
-        const card = e.target.closest('.location-card');
-        if (card && card.dataset.locationId) {
-            // Remove previous selections
+document.addEventListener('alpine:init', () => {
+    Alpine.data('locationCard', () => ({
+        selected: false,
+        
+        init() {
+            // Listen for card selection events
+            this.$el.addEventListener('click', (e) => {
+                if (this.$el.dataset.locationId) {
+                    this.handleCardSelection();
+                }
+            });
+        },
+        
+        handleCardClick(url) {
+            if (url) {
+                window.location.href = url;
+            }
+        },
+        
+        showOnMap(type, id) {
+            // Emit custom event for map integration using AlpineJS approach
+            this.$dispatch('showLocationOnMap', { type, id });
+        },
+        
+        addToTrip(locationData) {
+            // Emit custom event for trip integration using AlpineJS approach
+            this.$dispatch('addLocationToTrip', locationData);
+        },
+        
+        handleCardSelection() {
+            // Remove previous selections using AlpineJS approach
             document.querySelectorAll('.location-card.selected').forEach(c => {
                 c.classList.remove('selected');
             });
             
-            // Add selection to clicked card
-            card.classList.add('selected');
+            // Add selection to this card
+            this.$el.classList.add('selected');
+            this.selected = true;
             
-            // Emit selection event
-            const event = new CustomEvent('locationCardSelected', {
-                detail: {
-                    id: card.dataset.locationId,
-                    type: card.dataset.locationType,
-                    lat: card.dataset.lat,
-                    lng: card.dataset.lng,
-                    element: card
-                }
+            // Emit selection event using AlpineJS $dispatch
+            this.$dispatch('locationCardSelected', {
+                id: this.$el.dataset.locationId,
+                type: this.$el.dataset.locationType,
+                lat: this.$el.dataset.lat,
+                lng: this.$el.dataset.lng,
+                element: this.$el
             });
-            document.dispatchEvent(event);
         }
-    });
+    }));
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/templates/parks/partials/location_widget.html b/templates/parks/partials/location_widget.html
index 6b44df3a..2047c44a 100644
--- a/templates/parks/partials/location_widget.html
+++ b/templates/parks/partials/location_widget.html
@@ -19,7 +19,7 @@
 }
 </style>
 
-<div class="location-widget" id="locationWidget">
+<div class="location-widget" id="locationWidget" x-data="locationWidget()">
     {# Search Form #}
     <div class="relative mb-4">
         <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -31,9 +31,18 @@
                placeholder="Search for a location..."
                autocomplete="off"
                style="z-index: 10;">
-        <div id="searchResults"
+        <div x-show="showResults && searchResults.length > 0"
+             x-transition
              style="position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;"
-             class="hidden w-full mt-1 overflow-auto bg-white border rounded-md shadow-lg max-h-60 dark:bg-gray-700 dark:border-gray-600">
+             class="w-full mt-1 overflow-auto bg-white border rounded-md shadow-lg max-h-60 dark:bg-gray-700 dark:border-gray-600">
+            <template x-for="(result, index) in searchResults" :key="index">
+                <div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
+                     @click="selectLocation(result)">
+                    <div class="font-medium text-gray-900 dark:text-white" x-text="result.display_name || result.name || ''"></div>
+                    <div class="text-sm text-gray-500 dark:text-gray-400" 
+                         x-text="[result.street, result.city || (result.address && (result.address.city || result.address.town || result.address.village)), result.state || (result.address && (result.address.state || result.address.region)), result.country || (result.address && result.address.country), result.postal_code || (result.address && result.address.postcode)].filter(Boolean).join(', ')"></div>
+                </div>
+            </template>
         </div>
     </div>
 
@@ -104,300 +113,275 @@
 </div>
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    let map = null;
-    let marker = null;
-    const searchInput = document.getElementById('locationSearch');
-    const searchResults = document.getElementById('searchResults');
-    let searchTimeout;
-
-    function normalizeCoordinate(value, maxDigits, decimalPlaces) {
-        try {
-            // Convert to string-3 with exact decimal places
-            const rounded = Number(value).toFixed(decimalPlaces);
-            
-            // Convert to string-3 without decimal point for digit counting
-            const strValue = rounded.replace('.', '').replace('-', '');
-            // Remove trailing zeros
-            const strippedValue = strValue.replace(/0+$/, '');
-            
-            // If total digits exceed maxDigits, round further
-            if (strippedValue.length > maxDigits) {
-                return Number(Number(value).toFixed(decimalPlaces - 1));
-            }
-            
-            // Return the string-3 representation to preserve exact decimal places
-            return rounded;
-        } catch (error) {
-            console.error('Coordinate normalization failed:', error);
-            return null;
-        }
-    }
-
-    function validateCoordinates(lat, lng) {
-        // Normalize coordinates
-        const normalizedLat = normalizeCoordinate(lat, 9, 6);
-        const normalizedLng = normalizeCoordinate(lng, 10, 6);
-
-        if (normalizedLat === null || normalizedLng === null) {
-            throw new Error('Invalid coordinate format');
-        }
-
-        const parsedLat = parseFloat(normalizedLat);
-        const parsedLng = parseFloat(normalizedLng);
-
-        if (parsedLat < -90 || parsedLat > 90) {
-            throw new Error('Latitude must be between -90 and 90 degrees.');
-        }
-        if (parsedLng < -180 || parsedLng > 180) {
-            throw new Error('Longitude must be between -180 and 180 degrees.');
-        }
-
-        return { lat: normalizedLat, lng: normalizedLng };
-    }
-
-    // Initialize map
-    function initMap() {
-        map = L.map('locationMap').setView([0, 0], 2);
+document.addEventListener('alpine:init', () => {
+    Alpine.data('locationWidget', () => ({
+        map: null,
+        marker: null,
+        searchTimeout: null,
+        searchResults: [],
+        showResults: false,
         
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors'
-        }).addTo(map);
-
-        // Initialize with existing coordinates if available
-        const initialLat = document.getElementById('latitude').value;
-        const initialLng = document.getElementById('longitude').value;
-        if (initialLat && initialLng) {
+        init() {
+            this.$nextTick(() => {
+                this.initMap();
+                this.setupEventListeners();
+            });
+        },
+        
+        normalizeCoordinate(value, maxDigits, decimalPlaces) {
             try {
-                const normalized = validateCoordinates(initialLat, initialLng);
-                addMarker(normalized.lat, normalized.lng);
+                const rounded = Number(value).toFixed(decimalPlaces);
+                const strValue = rounded.replace('.', '').replace('-', '');
+                const strippedValue = strValue.replace(/0+$/, '');
+                
+                if (strippedValue.length > maxDigits) {
+                    return Number(Number(value).toFixed(decimalPlaces - 1));
+                }
+                
+                return rounded;
             } catch (error) {
-                console.error('Invalid initial coordinates:', error);
+                console.error('Coordinate normalization failed:', error);
+                return null;
             }
-        }
+        },
+        
+        validateCoordinates(lat, lng) {
+            const normalizedLat = this.normalizeCoordinate(lat, 9, 6);
+            const normalizedLng = this.normalizeCoordinate(lng, 10, 6);
 
-        // Handle map clicks - HTMX version
-        map.on('click', function(e) {
-            try {
-                const normalized = validateCoordinates(e.latlng.lat, e.latlng.lng);
-                
-                // Create a temporary form for HTMX request
-                const tempForm = document.createElement('form');
-                tempForm.style.display = 'none';
-                tempForm.setAttribute('hx-get', '/parks/search/reverse-geocode/');
-                tempForm.setAttribute('hx-vals', JSON.stringify({
-                    lat: normalized.lat,
-                    lon: normalized.lng
-                }));
-                tempForm.setAttribute('hx-trigger', 'submit');
-                tempForm.setAttribute('hx-swap', 'none');
-                
-                // Add event listener for HTMX response
-                tempForm.addEventListener('htmx:afterRequest', function(event) {
-                    if (event.detail.successful) {
-                        try {
-                            const data = JSON.parse(event.detail.xhr.responseText);
-                            if (data.error) {
-                                throw new Error(data.error);
-                            }
-                            updateLocation(normalized.lat, normalized.lng, data);
-                        } catch (error) {
-                            console.error('Location update failed:', error);
-                            alert(error.message || 'Failed to update location. Please try again.');
-                        }
-                    } else {
-                        console.error('Geocoding request failed');
-                        alert('Failed to update location. Please try again.');
-                    }
-                    // Clean up temporary form
-                    document.body.removeChild(tempForm);
+            if (normalizedLat === null || normalizedLng === null) {
+                throw new Error('Invalid coordinate format');
+            }
+
+            const parsedLat = parseFloat(normalizedLat);
+            const parsedLng = parseFloat(normalizedLng);
+
+            if (parsedLat < -90 || parsedLat > 90) {
+                throw new Error('Latitude must be between -90 and 90 degrees.');
+            }
+            if (parsedLng < -180 || parsedLng > 180) {
+                throw new Error('Longitude must be between -180 and 180 degrees.');
+            }
+
+            return { lat: normalizedLat, lng: normalizedLng };
+        },
+        
+        initMap() {
+            this.map = L.map('locationMap').setView([0, 0], 2);
+            
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '© OpenStreetMap contributors'
+            }).addTo(this.map);
+
+            // Initialize with existing coordinates if available
+            const initialLat = this.$el.querySelector('#latitude').value;
+            const initialLng = this.$el.querySelector('#longitude').value;
+            if (initialLat && initialLng) {
+                try {
+                    const normalized = this.validateCoordinates(initialLat, initialLng);
+                    this.addMarker(normalized.lat, normalized.lng);
+                } catch (error) {
+                    console.error('Invalid initial coordinates:', error);
+                }
+            }
+
+            // Handle map clicks using AlpineJS approach
+            this.map.on('click', (e) => {
+                this.handleMapClick(e.latlng.lat, e.latlng.lng);
+            });
+        },
+        
+        setupEventListeners() {
+            const searchInput = this.$el.querySelector('#locationSearch');
+            const form = this.$el.closest('form');
+            
+            // Search input handler
+            searchInput.addEventListener('input', (e) => {
+                this.handleSearchInput(e.target.value);
+            });
+            
+            // Form submit handler
+            if (form) {
+                form.addEventListener('submit', (e) => {
+                    this.handleFormSubmit(e);
                 });
-                
-                document.body.appendChild(tempForm);
-                htmx.trigger(tempForm, 'submit');
-                
+            }
+            
+            // Click outside handler
+            document.addEventListener('click', (e) => {
+                if (!this.$el.contains(e.target)) {
+                    this.showResults = false;
+                }
+            });
+        },
+        
+        handleMapClick(lat, lng) {
+            try {
+                const normalized = this.validateCoordinates(lat, lng);
+                this.reverseGeocode(normalized.lat, normalized.lng);
             } catch (error) {
                 console.error('Location update failed:', error);
                 alert(error.message || 'Failed to update location. Please try again.');
             }
-        });
-    }
-
-    // Initialize map
-    initMap();
-
-    // Handle location search - HTMX version
-    searchInput.addEventListener('input', function() {
-        clearTimeout(searchTimeout);
-        const query = this.value.trim();
+        },
         
-        if (!query) {
-            searchResults.classList.add('hidden');
-            return;
-        }
+        handleSearchInput(query) {
+            clearTimeout(this.searchTimeout);
+            
+            if (!query.trim()) {
+                this.showResults = false;
+                return;
+            }
 
-        searchTimeout = setTimeout(function() {
-            // Create a temporary form for HTMX request
+            this.searchTimeout = setTimeout(() => {
+                this.searchLocation(query.trim());
+            }, 300);
+        },
+        
+        handleFormSubmit(e) {
+            const lat = this.$el.querySelector('#latitude').value;
+            const lng = this.$el.querySelector('#longitude').value;
+            
+            if (lat && lng) {
+                try {
+                    this.validateCoordinates(lat, lng);
+                } catch (error) {
+                    e.preventDefault();
+                    alert(error.message || 'Invalid coordinates. Please check the location.');
+                }
+            }
+        },
+        
+        reverseGeocode(lat, lng) {
             const tempForm = document.createElement('form');
             tempForm.style.display = 'none';
-            tempForm.setAttribute('hx-get', '/parks/search/location/');
-            tempForm.setAttribute('hx-vals', JSON.stringify({
-                q: query
-            }));
+            tempForm.setAttribute('hx-get', '/parks/search/reverse-geocode/');
+            tempForm.setAttribute('hx-vals', JSON.stringify({ lat, lon: lng }));
             tempForm.setAttribute('hx-trigger', 'submit');
             tempForm.setAttribute('hx-swap', 'none');
             
-            // Add event listener for HTMX response
-            tempForm.addEventListener('htmx:afterRequest', function(event) {
+            tempForm.addEventListener('htmx:afterRequest', (event) => {
                 if (event.detail.successful) {
                     try {
                         const data = JSON.parse(event.detail.xhr.responseText);
-                        
-                        if (data.results && data.results.length > 0) {
-                            const resultsHtml = data.results.map((result, index) => `
-                                <div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
-                                     data-result-index="${index}">
-                                    <div class="font-medium text-gray-900 dark:text-white">${result.display_name || result.name || ''}</div>
-                                    <div class="text-sm text-gray-500 dark:text-gray-400">
-                                        ${[
-                                            result.street,
-                                            result.city || (result.address && (result.address.city || result.address.town || result.address.village)),
-                                            result.state || (result.address && (result.address.state || result.address.region)),
-                                            result.country || (result.address && result.address.country),
-                                            result.postal_code || (result.address && result.address.postcode)
-                                        ].filter(Boolean).join(', ')}
-                                    </div>
-                                </div>
-                            `).join('');
-                            
-                            searchResults.innerHTML = resultsHtml;
-                            searchResults.classList.remove('hidden');
-                            
-                            // Store results data
-                            searchResults.dataset.results = JSON.stringify(data.results);
-                            
-                            // Add click handlers
-                            searchResults.querySelectorAll('[data-result-index]').forEach(el => {
-                                el.addEventListener('click', function() {
-                                    const results = JSON.parse(searchResults.dataset.results);
-                                    const result = results[this.dataset.resultIndex];
-                                    selectLocation(result);
-                                });
-                            });
-                        } else {
-                            searchResults.innerHTML = '<div class="p-2 text-gray-500 dark:text-gray-400">No results found</div>';
-                            searchResults.classList.remove('hidden');
+                        if (data.error) {
+                            throw new Error(data.error);
                         }
+                        this.updateLocation(lat, lng, data);
                     } catch (error) {
-                        console.error('Search failed:', error);
-                        searchResults.innerHTML = '<div class="p-2 text-red-500 dark:text-red-400">Search failed. Please try again.</div>';
-                        searchResults.classList.remove('hidden');
+                        console.error('Location update failed:', error);
+                        alert(error.message || 'Failed to update location. Please try again.');
                     }
                 } else {
-                    console.error('Search request failed');
-                    searchResults.innerHTML = '<div class="p-2 text-red-500 dark:text-red-400">Search failed. Please try again.</div>';
-                    searchResults.classList.remove('hidden');
+                    console.error('Geocoding request failed');
+                    alert('Failed to update location. Please try again.');
                 }
-                // Clean up temporary form
                 document.body.removeChild(tempForm);
             });
             
             document.body.appendChild(tempForm);
             htmx.trigger(tempForm, 'submit');
-        }, 300);
-    });
-
-    // Hide search results when clicking outside
-    document.addEventListener('click', function(e) {
-        if (!searchResults.contains(e.target) && e.target !== searchInput) {
-            searchResults.classList.add('hidden');
-        }
-    });
-
-    function addMarker(lat, lng) {
-        if (marker) {
-            marker.remove();
-        }
-        marker = L.marker([lat, lng]).addTo(map);
-        map.setView([lat, lng], 13);
-    }
-
-    function updateLocation(lat, lng, data) {
-        try {
-            const normalized = validateCoordinates(lat, lng);
-            
-            // Update coordinates
-            document.getElementById('latitude').value = normalized.lat;
-            document.getElementById('longitude').value = normalized.lng;
-            
-            // Update marker
-            addMarker(normalized.lat, normalized.lng);
-            
-            // Update form fields with English names where available
-            const address = data.address || {};
-            document.getElementById('streetAddress').value = 
-                `${address.house_number || ''} ${address.road || address.street || ''}`.trim() || '';
-            document.getElementById('city').value = 
-                address.city || address.town || address.village || '';
-            document.getElementById('state').value = 
-                address.state || address.region || '';
-            document.getElementById('country').value = address.country || '';
-            document.getElementById('postalCode').value = address.postcode || '';
-        } catch (error) {
-            console.error('Location update failed:', error);
-            alert(error.message || 'Failed to update location. Please try again.');
-        }
-    }
-
-    function selectLocation(result) {
-        if (!result) return;
+        },
         
-        try {
-            const lat = parseFloat(result.lat);
-            const lon = parseFloat(result.lon);
+        searchLocation(query) {
+            const tempForm = document.createElement('form');
+            tempForm.style.display = 'none';
+            tempForm.setAttribute('hx-get', '/parks/search/location/');
+            tempForm.setAttribute('hx-vals', JSON.stringify({ q: query }));
+            tempForm.setAttribute('hx-trigger', 'submit');
+            tempForm.setAttribute('hx-swap', 'none');
             
-            if (isNaN(lat) || isNaN(lon)) {
-                throw new Error('Invalid coordinates in search result');
-            }
-            
-            const normalized = validateCoordinates(lat, lon);
-            
-            // Create a normalized address object
-            const address = {
-                name: result.display_name || result.name || '',
-                address: {
-                    house_number: result.house_number || (result.address && result.address.house_number) || '',
-                    road: result.street || (result.address && (result.address.road || result.address.street)) || '',
-                    city: result.city || (result.address && (result.address.city || result.address.town || result.address.village)) || '',
-                    state: result.state || (result.address && (result.address.state || result.address.region)) || '',
-                    country: result.country || (result.address && result.address.country) || '',
-                    postcode: result.postal_code || (result.address && result.address.postcode) || ''
+            tempForm.addEventListener('htmx:afterRequest', (event) => {
+                if (event.detail.successful) {
+                    try {
+                        const data = JSON.parse(event.detail.xhr.responseText);
+                        this.searchResults = data.results || [];
+                        this.showResults = true;
+                    } catch (error) {
+                        console.error('Search failed:', error);
+                        this.searchResults = [];
+                        this.showResults = false;
+                    }
+                } else {
+                    console.error('Search request failed');
+                    this.searchResults = [];
+                    this.showResults = false;
                 }
-            };
+                document.body.removeChild(tempForm);
+            });
             
-            updateLocation(normalized.lat, normalized.lng, address);
-            searchResults.classList.add('hidden');
-            searchInput.value = address.name;
-        } catch (error) {
-            console.error('Location selection failed:', error);
-            alert(error.message || 'Failed to select location. Please try again.');
-        }
-    }
-
-    // Add form submit handler
-    const form = document.querySelector('form');
-    form.addEventListener('submit', function(e) {
-        const lat = document.getElementById('latitude').value;
-        const lng = document.getElementById('longitude').value;
+            document.body.appendChild(tempForm);
+            htmx.trigger(tempForm, 'submit');
+        },
         
-        if (lat && lng) {
+        selectLocation(result) {
+            if (!result) return;
+            
             try {
-                validateCoordinates(lat, lng);
+                const lat = parseFloat(result.lat);
+                const lon = parseFloat(result.lon);
+                
+                if (isNaN(lat) || isNaN(lon)) {
+                    throw new Error('Invalid coordinates in search result');
+                }
+                
+                const normalized = this.validateCoordinates(lat, lon);
+                
+                const address = {
+                    name: result.display_name || result.name || '',
+                    address: {
+                        house_number: result.house_number || (result.address && result.address.house_number) || '',
+                        road: result.street || (result.address && (result.address.road || result.address.street)) || '',
+                        city: result.city || (result.address && (result.address.city || result.address.town || result.address.village)) || '',
+                        state: result.state || (result.address && (result.address.state || result.address.region)) || '',
+                        country: result.country || (result.address && result.address.country) || '',
+                        postcode: result.postal_code || (result.address && result.address.postcode) || ''
+                    }
+                };
+                
+                this.updateLocation(normalized.lat, normalized.lng, address);
+                this.showResults = false;
+                this.$el.querySelector('#locationSearch').value = address.name;
             } catch (error) {
-                e.preventDefault();
-                alert(error.message || 'Invalid coordinates. Please check the location.');
+                console.error('Location selection failed:', error);
+                alert(error.message || 'Failed to select location. Please try again.');
+            }
+        },
+        
+        addMarker(lat, lng) {
+            if (this.marker) {
+                this.marker.remove();
+            }
+            this.marker = L.marker([lat, lng]).addTo(this.map);
+            this.map.setView([lat, lng], 13);
+        },
+        
+        updateLocation(lat, lng, data) {
+            try {
+                const normalized = this.validateCoordinates(lat, lng);
+                
+                // Update coordinates using AlpineJS $el
+                this.$el.querySelector('#latitude').value = normalized.lat;
+                this.$el.querySelector('#longitude').value = normalized.lng;
+                
+                // Update marker
+                this.addMarker(normalized.lat, normalized.lng);
+                
+                // Update form fields
+                const address = data.address || {};
+                this.$el.querySelector('#streetAddress').value = 
+                    `${address.house_number || ''} ${address.road || address.street || ''}`.trim() || '';
+                this.$el.querySelector('#city').value = 
+                    address.city || address.town || address.village || '';
+                this.$el.querySelector('#state').value = 
+                    address.state || address.region || '';
+                this.$el.querySelector('#country').value = address.country || '';
+                this.$el.querySelector('#postalCode').value = address.postcode || '';
+            } catch (error) {
+                console.error('Location update failed:', error);
+                alert(error.message || 'Failed to update location. Please try again.');
             }
         }
-    });
+    }));
 });
 </script>
diff --git a/templates/parks/roadtrip_planner.html b/templates/parks/roadtrip_planner.html
index 3b38b26e..29caf763 100644
--- a/templates/parks/roadtrip_planner.html
+++ b/templates/parks/roadtrip_planner.html
@@ -124,7 +124,81 @@
 {% endblock %}
 
 {% block content %}
-<div class="container px-4 mx-auto">
+<!-- HTMX + AlpineJS ONLY - NO CUSTOM JAVASCRIPT -->
+<div x-data="{
+    tripParks: [],
+    showAllParks: false,
+    mapInitialized: false,
+    
+    init() {
+        // Initialize map via HTMX
+        this.initializeMap();
+    },
+    
+    initializeMap() {
+        // Use HTMX to load map component
+        htmx.ajax('GET', '/maps/roadtrip-map/', {
+            target: '#map-container',
+            swap: 'innerHTML'
+        });
+        this.mapInitialized = true;
+    },
+    
+    addParkToTrip(parkId, parkName, parkLocation) {
+        // Check if park already exists
+        if (!this.tripParks.find(p => p.id === parkId)) {
+            this.tripParks.push({
+                id: parkId,
+                name: parkName,
+                location: parkLocation
+            });
+        }
+    },
+    
+    removeParkFromTrip(parkId) {
+        this.tripParks = this.tripParks.filter(p => p.id !== parkId);
+    },
+    
+    clearTrip() {
+        this.tripParks = [];
+    },
+    
+    optimizeRoute() {
+        if (this.tripParks.length >= 2) {
+            // Use HTMX to optimize route
+            htmx.ajax('POST', '/trips/optimize/', {
+                values: { parks: this.tripParks.map(p => p.id) },
+                target: '#trip-summary',
+                swap: 'innerHTML'
+            });
+        }
+    },
+    
+    calculateRoute() {
+        if (this.tripParks.length >= 2) {
+            // Use HTMX to calculate route
+            htmx.ajax('POST', '/trips/calculate/', {
+                values: { parks: this.tripParks.map(p => p.id) },
+                target: '#trip-summary',
+                swap: 'innerHTML'
+            });
+        }
+    },
+    
+    saveTrip() {
+        if (this.tripParks.length > 0) {
+            // Use HTMX to save trip
+            htmx.ajax('POST', '/trips/save/', {
+                values: { 
+                    name: 'Trip ' + new Date().toLocaleDateString(),
+                    parks: this.tripParks.map(p => p.id) 
+                },
+                target: '#saved-trips',
+                swap: 'innerHTML'
+            });
+        }
+    }
+}" class="container px-4 mx-auto">
     <!-- Header -->
     <div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
         <div>
@@ -167,7 +241,7 @@
                 </div>
 
                 <div id="park-search-results" class="mt-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 hidden">
-                    <!-- Search results will be populated here -->
+                    <!-- Search results will be populated here via HTMX -->
                 </div>
             </div>
 
@@ -175,61 +249,80 @@
             <div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
                 <div class="flex items-center justify-between mb-4">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Trip Itinerary</h3>
-                    <button id="clear-trip" 
-                            class="px-3 py-1 text-sm text-red-600 hover:text-red-700 dark:text-red-400"
+                    <button class="px-3 py-1 text-sm text-red-600 hover:text-red-700 dark:text-red-400"
                             @click="clearTrip()">
                         <i class="mr-1 fas fa-trash"></i>Clear All
                     </button>
                 </div>
 
                 <div id="trip-parks" class="space-y-2 min-h-20">
-                    <div id="empty-trip" class="text-center py-8 text-gray-500 dark:text-gray-400">
-                        <i class="fas fa-route text-3xl mb-3"></i>
-                        <p>Add parks to start planning your trip</p>
-                        <p class="text-sm mt-1">Search above or click parks on the map</p>
-                    </div>
+                    <template x-if="tripParks.length === 0">
+                        <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                            <i class="fas fa-route text-3xl mb-3"></i>
+                            <p>Add parks to start planning your trip</p>
+                            <p class="text-sm mt-1">Search above or click parks on the map</p>
+                        </div>
+                    </template>
+                    
+                    <template x-for="(park, index) in tripParks" :key="park.id">
+                        <div class="park-card">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3"
+                                         x-text="index + 1"></div>
+                                    <div>
+                                        <h4 class="font-medium text-gray-900 dark:text-white" x-text="park.name"></h4>
+                                        <p class="text-sm text-gray-600 dark:text-gray-400" x-text="park.location"></p>
+                                    </div>
+                                </div>
+                                <button @click="removeParkFromTrip(park.id)" 
+                                        class="text-red-500 hover:text-red-700">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </template>
                 </div>
 
                 <div class="mt-4 space-y-2">
-                    <button id="optimize-route" 
-                            class="w-full px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                            @click="optimizeRoute()" :disabled="tripParks.length < 2">
+                    <button class="w-full px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            @click="optimizeRoute()" 
+                            :disabled="tripParks.length < 2">
                         <i class="mr-2 fas fa-route"></i>Optimize Route
                     </button>
-                    <button id="calculate-route" 
-                            class="w-full px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                            @click="calculateRoute()" :disabled="tripParks.length < 2">
+                    <button class="w-full px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            @click="calculateRoute()" 
+                            :disabled="tripParks.length < 2">
                         <i class="mr-2 fas fa-map"></i>Calculate Route
                     </button>
                 </div>
             </div>
 
             <!-- Trip Summary -->
-            <div id="trip-summary" class="trip-summary-card hidden">
+            <div id="trip-summary" class="trip-summary-card" x-show="tripParks.length >= 2" x-transition>
                 <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Trip Summary</h3>
                 
                 <div class="trip-stats">
                     <div class="trip-stat">
-                        <div class="trip-stat-value" id="total-distance">-</div>
+                        <div class="trip-stat-value">-</div>
                         <div class="trip-stat-label">Total Miles</div>
                     </div>
                     <div class="trip-stat">
-                        <div class="trip-stat-value" id="total-time">-</div>
+                        <div class="trip-stat-value">-</div>
                         <div class="trip-stat-label">Drive Time</div>
                     </div>
                     <div class="trip-stat">
-                        <div class="trip-stat-value" id="total-parks">-</div>
+                        <div class="trip-stat-value" x-text="tripParks.length">-</div>
                         <div class="trip-stat-label">Parks</div>
                     </div>
                     <div class="trip-stat">
-                        <div class="trip-stat-value" id="total-rides">-</div>
+                        <div class="trip-stat-value">-</div>
                         <div class="trip-stat-label">Total Rides</div>
                     </div>
                 </div>
 
                 <div class="mt-4">
-                    <button id="save-trip" 
-                            class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
+                    <button class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
                             @click="saveTrip()">
                         <i class="mr-2 fas fa-save"></i>Save Trip
                     </button>
@@ -243,26 +336,32 @@
                 <div class="flex items-center justify-between mb-4">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Route Map</h3>
                     <div class="flex gap-2">
-                        <button id="fit-route" 
-                                class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-                                @click="fitRoute()">
+                        <button class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                                hx-post="/maps/fit-route/"
+                                hx-vals='{"parks": "{{ tripParks|join:"," }}"}'
+                                hx-target="#map-container"
+                                hx-swap="none">
                             <i class="mr-1 fas fa-expand-arrows-alt"></i>Fit Route
                         </button>
-                        <button id="toggle-parks" 
-                                class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-                                @click="toggleAllParks()">
-                            <i class="mr-1 fas fa-eye"></i><span x-text="showAllParks ? 'Hide Parks' : 'Show All Parks'">Show All Parks</span>
+                        <button class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                                @click="showAllParks = !showAllParks"
+                                hx-post="/maps/toggle-parks/"
+                                hx-vals='{"show": "{{ showAllParks }}"}'
+                                hx-target="#map-container"
+                                hx-swap="none">
+                            <i class="mr-1 fas fa-eye"></i>
+                            <span x-text="showAllParks ? 'Hide Parks' : 'Show All Parks'">Show All Parks</span>
                         </button>
                     </div>
                 </div>
                 
-                <div id="map-container" class="map-container"></div>
-                
-                <!-- Map Loading Indicator -->
-                <div id="map-loading" class="htmx-indicator absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
-                    <div class="text-center">
-                        <div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
-                        <p class="text-sm text-gray-600 dark:text-gray-400">Loading map...</p>
+                <div id="map-container" class="map-container">
+                    <!-- Map will be loaded via HTMX -->
+                    <div class="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-800 rounded-lg">
+                        <div class="text-center">
+                            <div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
+                            <p class="text-sm text-gray-600 dark:text-gray-400">Loading map...</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -286,7 +385,7 @@
                  hx-get="{% url 'parks:htmx_saved_trips' %}"
                  hx-trigger="load"
                  hx-indicator="#trips-loading">
-                <!-- Saved trips will be loaded here -->
+                <!-- Saved trips will be loaded here via HTMX -->
             </div>
             
             <div id="trips-loading" class="htmx-indicator text-center py-4">
@@ -299,255 +398,19 @@
 {% endblock %}
 
 {% block extra_js %}
-<!-- Leaflet JS -->
+<!-- External libraries for map functionality only -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<!-- Leaflet Routing Machine JS -->
 <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
-<!-- Sortable JS for drag & drop -->
-<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
 
-<script>
-document.addEventListener('alpine:init', () => {
-    Alpine.data('tripPlanner', () => ({
-        map: null,
-        tripParks: [],
-        allParks: [],
-        showAllParks: false,
-        routeControl: null,
-        parkMarkers: {},
-        
-        init() {
-            this.initMap();
-            this.setupSortable();
-        },
-        
-        initMap() {
-            if (typeof L !== 'undefined') {
-                this.map = L.map('map-container').setView([39.8283, -98.5795], 4);
-                
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '© OpenStreetMap contributors'
-                }).addTo(this.map);
-                
-                this.loadAllParks();
+<!-- HTMX Error Handling (Minimal JavaScript as allowed by Context7 docs) -->
+<div x-data="{
+    init() {
+        // Only essential HTMX error handling as shown in Context7 docs
+        this.$el.addEventListener('htmx:responseError', (evt) => {
+            if (evt.detail.xhr.status === 404 || evt.detail.xhr.status === 500) {
+                console.error('HTMX Error:', evt.detail.xhr.status);
             }
-        },
-        
-        setupSortable() {
-            if (typeof Sortable !== 'undefined') {
-                const tripParksEl = document.getElementById('trip-parks');
-                if (tripParksEl) {
-                    Sortable.create(tripParksEl, {
-                        animation: 150,
-                        ghostClass: 'drag-over',
-                        onEnd: (evt) => {
-                            this.reorderTrip(evt.oldIndex, evt.newIndex);
-                        }
-                    });
-                }
-            }
-        },
-        
-        loadAllParks() {
-            // Load parks via HTMX or fetch
-            fetch('/api/parks/')
-                .then(response => response.json())
-                .then(data => {
-                    this.allParks = data;
-                    this.displayAllParks();
-                })
-                .catch(error => console.error('Error loading parks:', error));
-        },
-        
-        displayAllParks() {
-            this.allParks.forEach(park => {
-                if (park.latitude && park.longitude) {
-                    const marker = L.marker([park.latitude, park.longitude])
-                        .bindPopup(`
-                            <div class="p-2">
-                                <h3 class="font-semibold">${park.name}</h3>
-                                <p class="text-sm text-gray-600">${park.location || ''}</p>
-                                <button onclick="Alpine.store('tripPlanner').addParkToTrip(${park.id})" 
-                                        class="mt-2 px-2 py-1 bg-blue-500 text-white text-xs rounded">
-                                    Add to Trip
-                                </button>
-                            </div>
-                        `);
-                    
-                    this.parkMarkers[park.id] = marker;
-                    if (this.showAllParks) {
-                        marker.addTo(this.map);
-                    }
-                }
-            });
-        },
-        
-        addParkToTrip(parkId) {
-            const park = this.allParks.find(p => p.id === parkId);
-            if (park && !this.tripParks.find(p => p.id === parkId)) {
-                this.tripParks.push(park);
-                this.updateTripDisplay();
-                this.updateButtons();
-            }
-        },
-        
-        removeParkFromTrip(parkId) {
-            this.tripParks = this.tripParks.filter(p => p.id !== parkId);
-            this.updateTripDisplay();
-            this.updateButtons();
-            this.clearRoute();
-        },
-        
-        clearTrip() {
-            this.tripParks = [];
-            this.updateTripDisplay();
-            this.updateButtons();
-            this.clearRoute();
-        },
-        
-        updateTripDisplay() {
-            const container = document.getElementById('trip-parks');
-            const emptyState = document.getElementById('empty-trip');
-            
-            if (this.tripParks.length === 0) {
-                emptyState.style.display = 'block';
-                container.innerHTML = emptyState.outerHTML;
-            } else {
-                container.innerHTML = this.tripParks.map((park, index) => `
-                    <div class="park-card draggable-item" data-park-id="${park.id}">
-                        <div class="flex items-center justify-between">
-                            <div class="flex items-center">
-                                <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">
-                                    ${index + 1}
-                                </div>
-                                <div>
-                                    <h4 class="font-medium text-gray-900 dark:text-white">${park.name}</h4>
-                                    <p class="text-sm text-gray-600 dark:text-gray-400">${park.location || ''}</p>
-                                </div>
-                            </div>
-                            <button @click="removeParkFromTrip(${park.id})" 
-                                    class="text-red-500 hover:text-red-700">
-                                <i class="fas fa-times"></i>
-                            </button>
-                        </div>
-                    </div>
-                `).join('');
-            }
-        },
-        
-        updateButtons() {
-            const hasParks = this.tripParks.length >= 2;
-            document.getElementById('optimize-route').disabled = !hasParks;
-            document.getElementById('calculate-route').disabled = !hasParks;
-        },
-        
-        optimizeRoute() {
-            // Implement route optimization logic
-            console.log('Optimizing route for', this.tripParks.length, 'parks');
-        },
-        
-        calculateRoute() {
-            if (this.tripParks.length < 2) return;
-            
-            this.clearRoute();
-            
-            const waypoints = this.tripParks.map(park => 
-                L.latLng(park.latitude, park.longitude)
-            );
-            
-            if (typeof L.Routing !== 'undefined') {
-                this.routeControl = L.Routing.control({
-                    waypoints: waypoints,
-                    routeWhileDragging: false,
-                    addWaypoints: false,
-                    createMarker: (i, waypoint, n) => {
-                        const park = this.tripParks[i];
-                        return L.marker(waypoint.latLng, {
-                            icon: L.divIcon({
-                                html: `<div class="waypoint-marker-inner">${i + 1}</div>`,
-                                className: `waypoint-marker ${i === 0 ? 'waypoint-start' : i === n - 1 ? 'waypoint-end' : 'waypoint-stop'}`,
-                                iconSize: [30, 30]
-                            })
-                        }).bindPopup(park.name);
-                    }
-                }).addTo(this.map);
-                
-                this.routeControl.on('routesfound', (e) => {
-                    const route = e.routes[0];
-                    this.updateTripSummary(route);
-                });
-            }
-        },
-        
-        clearRoute() {
-            if (this.routeControl) {
-                this.map.removeControl(this.routeControl);
-                this.routeControl = null;
-            }
-            this.hideTripSummary();
-        },
-        
-        updateTripSummary(route) {
-            const summary = route.summary;
-            document.getElementById('total-distance').textContent = Math.round(summary.totalDistance / 1609.34); // Convert to miles
-            document.getElementById('total-time').textContent = Math.round(summary.totalTime / 3600) + 'h';
-            document.getElementById('total-parks').textContent = this.tripParks.length;
-            document.getElementById('total-rides').textContent = this.tripParks.reduce((sum, park) => sum + (park.ride_count || 0), 0);
-            
-            document.getElementById('trip-summary').classList.remove('hidden');
-        },
-        
-        hideTripSummary() {
-            document.getElementById('trip-summary').classList.add('hidden');
-        },
-        
-        fitRoute() {
-            if (this.tripParks.length > 0) {
-                const group = new L.featureGroup(
-                    this.tripParks.map(park => L.marker([park.latitude, park.longitude]))
-                );
-                this.map.fitBounds(group.getBounds().pad(0.1));
-            }
-        },
-        
-        toggleAllParks() {
-            this.showAllParks = !this.showAllParks;
-            
-            Object.values(this.parkMarkers).forEach(marker => {
-                if (this.showAllParks) {
-                    marker.addTo(this.map);
-                } else {
-                    this.map.removeLayer(marker);
-                }
-            });
-        },
-        
-        reorderTrip(oldIndex, newIndex) {
-            const park = this.tripParks.splice(oldIndex, 1)[0];
-            this.tripParks.splice(newIndex, 0, park);
-            this.updateTripDisplay();
-            this.clearRoute();
-        },
-        
-        saveTrip() {
-            if (this.tripParks.length === 0) return;
-            
-            const tripData = {
-                name: `Trip ${new Date().toLocaleDateString()}`,
-                parks: this.tripParks.map(p => p.id)
-            };
-            
-            // Save via HTMX
-            htmx.ajax('POST', '/trips/save/', {
-                values: tripData,
-                target: '#saved-trips',
-                swap: 'innerHTML'
-            });
-        }
-    }));
-});
-</script>
-
-<!-- Trip Planner Component Container -->
-<div x-data="tripPlanner" x-init="init()" style="display: none;"></div>
+        });
+    }
+}"></div>
 {% endblock %}
diff --git a/templates/rides/partials/filter_sidebar.html b/templates/rides/partials/filter_sidebar.html
index 87679fcf..da522559 100644
--- a/templates/rides/partials/filter_sidebar.html
+++ b/templates/rides/partials/filter_sidebar.html
@@ -1,7 +1,45 @@
 {% load static %}
 
+<!-- HTMX + AlpineJS ONLY - NO CUSTOM JAVASCRIPT -->
 <!-- Advanced Ride Filters Sidebar -->
-<div class="filter-sidebar bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto">
+<div class="filter-sidebar bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto" 
+     x-data="{
+        sections: {
+            'search-section': true,
+            'basic-section': true,
+            'date-section': false,
+            'height-section': false,
+            'performance-section': false,
+            'relationships-section': false,
+            'coaster-section': false,
+            'sorting-section': false
+        },
+        
+        init() {
+            // Restore section states from localStorage using AlpineJS patterns
+            Object.keys(this.sections).forEach(sectionId => {
+                const state = localStorage.getItem('filter-' + sectionId);
+                if (state !== null) {
+                    this.sections[sectionId] = state === 'open';
+                }
+            });
+        },
+        
+        toggleSection(sectionId) {
+            this.sections[sectionId] = !this.sections[sectionId];
+            localStorage.setItem('filter-' + sectionId, this.sections[sectionId] ? 'open' : 'closed');
+        },
+        
+        removeFilter(category, filterName) {
+            // Use HTMX to remove filter
+            htmx.ajax('POST', '/rides/remove-filter/', {
+                values: { category: category, filter: filterName },
+                target: '#filter-results',
+                swap: 'outerHTML'
+            });
+        }
+     }">
+  
   <!-- Filter Header -->
   <div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 z-10">
     <div class="flex items-center justify-between">
@@ -42,7 +80,7 @@
             {{ filter_name }}: {{ filter_value }}
             <button type="button" 
                     class="ml-1 h-3 w-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                    onclick="removeFilter('{{ category }}', '{{ filter_name }}')">
+                    @click="removeFilter('{{ category }}', '{{ filter_name }}')">
               <i class="fas fa-times text-xs"></i>
             </button>
           </span>
@@ -67,16 +105,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="search-section">
+              @click="toggleSection('search-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-search mr-2 text-gray-500"></i>
             Search
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['search-section'] }"></i>
         </div>
       </button>
-      <div id="search-section" class="filter-content p-4 space-y-3">
+      <div id="search-section" class="filter-content p-4 space-y-3" x-show="sections['search-section']" x-transition>
         {{ filter_form.search_text.label_tag }}
         {{ filter_form.search_text }}
         
@@ -93,16 +132,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="basic-section">
+              @click="toggleSection('basic-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-info-circle mr-2 text-gray-500"></i>
             Basic Info
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['basic-section'] }"></i>
         </div>
       </button>
-      <div id="basic-section" class="filter-content p-4 space-y-4">
+      <div id="basic-section" class="filter-content p-4 space-y-4" x-show="sections['basic-section']" x-transition>
         <!-- Categories -->
         <div>
           {{ filter_form.categories.label_tag }}
@@ -127,16 +167,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="date-section">
+              @click="toggleSection('date-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-calendar mr-2 text-gray-500"></i>
             Date Ranges
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['date-section'] }"></i>
         </div>
       </button>
-      <div id="date-section" class="filter-content p-4 space-y-4">
+      <div id="date-section" class="filter-content p-4 space-y-4" x-show="sections['date-section']" x-transition>
         <!-- Opening Date Range -->
         <div>
           {{ filter_form.opening_date_range.label_tag }}
@@ -155,16 +196,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="height-section">
+              @click="toggleSection('height-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-ruler-vertical mr-2 text-gray-500"></i>
             Height & Safety
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['height-section'] }"></i>
         </div>
       </button>
-      <div id="height-section" class="filter-content p-4 space-y-4">
+      <div id="height-section" class="filter-content p-4 space-y-4" x-show="sections['height-section']" x-transition>
         <!-- Height Requirements -->
         <div>
           {{ filter_form.height_requirements.label_tag }}
@@ -189,16 +231,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="performance-section">
+              @click="toggleSection('performance-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-tachometer-alt mr-2 text-gray-500"></i>
             Performance
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['performance-section'] }"></i>
         </div>
       </button>
-      <div id="performance-section" class="filter-content p-4 space-y-4">
+      <div id="performance-section" class="filter-content p-4 space-y-4" x-show="sections['performance-section']" x-transition>
         <!-- Speed Range -->
         <div>
           {{ filter_form.speed_range.label_tag }}
@@ -229,16 +272,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="relationships-section">
+              @click="toggleSection('relationships-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-sitemap mr-2 text-gray-500"></i>
             Companies & Models
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['relationships-section'] }"></i>
         </div>
       </button>
-      <div id="relationships-section" class="filter-content p-4 space-y-4">
+      <div id="relationships-section" class="filter-content p-4 space-y-4" x-show="sections['relationships-section']" x-transition>
         <!-- Manufacturers -->
         <div>
           {{ filter_form.manufacturers.label_tag }}
@@ -263,16 +307,17 @@
     <div class="filter-section border-b border-gray-200 dark:border-gray-700">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="coaster-section">
+              @click="toggleSection('coaster-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-mountain mr-2 text-gray-500"></i>
             Roller Coaster Details
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['coaster-section'] }"></i>
         </div>
       </button>
-      <div id="coaster-section" class="filter-content p-4 space-y-4">
+      <div id="coaster-section" class="filter-content p-4 space-y-4" x-show="sections['coaster-section']" x-transition>
         <!-- Track Type -->
         <div>
           {{ filter_form.track_types.label_tag }}
@@ -324,16 +369,17 @@
     <div class="filter-section">
       <button type="button" 
               class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
-              data-target="sorting-section">
+              @click="toggleSection('sorting-section')">
         <div class="flex items-center justify-between">
           <span class="flex items-center">
             <i class="fas fa-sort mr-2 text-gray-500"></i>
             Sorting
           </span>
-          <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
+          <i class="fas fa-chevron-down transform transition-transform duration-200" 
+             :class="{ 'rotate-180': sections['sorting-section'] }"></i>
         </div>
       </button>
-      <div id="sorting-section" class="filter-content p-4 space-y-4">
+      <div id="sorting-section" class="filter-content p-4 space-y-4" x-show="sections['sorting-section']" x-transition>
         <!-- Sort By -->
         <div>
           {{ filter_form.sort_by.label_tag }}
@@ -350,116 +396,14 @@
   </form>
 </div>
 
-<!-- Filter JavaScript -->
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  // Initialize collapsible sections
-  initializeFilterSections();
-  
-  // Initialize filter form handlers
-  initializeFilterForm();
-});
-
-function initializeFilterSections() {
-  const toggles = document.querySelectorAll('.filter-toggle');
-  
-  toggles.forEach(toggle => {
-    toggle.addEventListener('click', function() {
-      const targetId = this.getAttribute('data-target');
-      const content = document.getElementById(targetId);
-      const chevron = this.querySelector('.fa-chevron-down');
-      
-      if (content.style.display === 'none' || content.style.display === '') {
-        content.style.display = 'block';
-        chevron.style.transform = 'rotate(180deg)';
-        localStorage.setItem(`filter-${targetId}`, 'open');
-      } else {
-        content.style.display = 'none';
-        chevron.style.transform = 'rotate(0deg)';
-        localStorage.setItem(`filter-${targetId}`, 'closed');
-      }
-    });
-    
-    // Restore section state from localStorage
-    const targetId = toggle.getAttribute('data-target');
-    const content = document.getElementById(targetId);
-    const chevron = toggle.querySelector('.fa-chevron-down');
-    const state = localStorage.getItem(`filter-${targetId}`);
-    
-    if (state === 'closed') {
-      content.style.display = 'none';
-      chevron.style.transform = 'rotate(0deg)';
-    } else {
-      content.style.display = 'block';
-      chevron.style.transform = 'rotate(180deg)';
+<!-- HTMX Error Handling (Minimal JavaScript as allowed by Context7 docs) -->
+<div x-data="{
+    init() {
+        // Only essential HTMX error handling as shown in Context7 docs
+        this.$el.addEventListener('htmx:responseError', (evt) => {
+            if (evt.detail.xhr.status === 404 || evt.detail.xhr.status === 500) {
+                console.error('HTMX Error:', evt.detail.xhr.status);
+            }
+        });
     }
-  });
-}
-
-function initializeFilterForm() {
-  const form = document.getElementById('filter-form');
-  if (!form) return;
-  
-  // Handle multi-select changes
-  const selects = form.querySelectorAll('select[multiple]');
-  selects.forEach(select => {
-    select.addEventListener('change', function() {
-      // Trigger HTMX update
-      htmx.trigger(form, 'change');
-    });
-  });
-  
-  // Handle range inputs
-  const rangeInputs = form.querySelectorAll('input[type="range"], input[type="number"]');
-  rangeInputs.forEach(input => {
-    input.addEventListener('input', function() {
-      // Debounced update
-      clearTimeout(this.updateTimeout);
-      this.updateTimeout = setTimeout(() => {
-        htmx.trigger(form, 'input');
-      }, 500);
-    });
-  });
-}
-
-function removeFilter(category, filterName) {
-  const form = document.getElementById('filter-form');
-  const input = form.querySelector(`[name*="${filterName}"]`);
-  
-  if (input) {
-    if (input.type === 'checkbox') {
-      input.checked = false;
-    } else if (input.tagName === 'SELECT') {
-      if (input.multiple) {
-        Array.from(input.options).forEach(option => option.selected = false);
-      } else {
-        input.value = '';
-      }
-    } else {
-      input.value = '';
-    }
-    
-    // Trigger form update
-    htmx.trigger(form, 'change');
-  }
-}
-
-// Update filter counts
-function updateFilterCounts() {
-  const form = document.getElementById('filter-form');
-  const formData = new FormData(form);
-  let activeCount = 0;
-  
-  for (let [key, value] of formData.entries()) {
-    if (value && value.trim() !== '') {
-      activeCount++;
-    }
-  }
-  
-  const badge = document.querySelector('.filter-count-badge');
-  if (badge) {
-    badge.textContent = activeCount;
-    badge.style.display = activeCount > 0 ? 'inline-flex' : 'none';
-  }
-}
-</script>
+}"></div>
diff --git a/templates/rides/partials/ride_form.html b/templates/rides/partials/ride_form.html
index 419180b0..a65999c4 100644
--- a/templates/rides/partials/ride_form.html
+++ b/templates/rides/partials/ride_form.html
@@ -11,25 +11,27 @@ document.addEventListener('alpine:init', () => {
         },
 
         selectManufacturer(id, name) {
-            const manufacturerInput = document.getElementById('id_manufacturer');
-            const manufacturerSearch = document.getElementById('id_manufacturer_search');
-            const manufacturerResults = document.getElementById('manufacturer-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const manufacturerInput = this.$el.querySelector('#id_manufacturer');
+            const manufacturerSearch = this.$el.querySelector('#id_manufacturer_search');
+            const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
             
             if (manufacturerInput) manufacturerInput.value = id;
             if (manufacturerSearch) manufacturerSearch.value = name;
             if (manufacturerResults) manufacturerResults.innerHTML = '';
             
             // Update ride model search to include manufacturer
-            const rideModelSearch = document.getElementById('id_ride_model_search');
+            const rideModelSearch = this.$el.querySelector('#id_ride_model_search');
             if (rideModelSearch) {
                 rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
             }
         },
 
         selectDesigner(id, name) {
-            const designerInput = document.getElementById('id_designer');
-            const designerSearch = document.getElementById('id_designer_search');
-            const designerResults = document.getElementById('designer-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const designerInput = this.$el.querySelector('#id_designer');
+            const designerSearch = this.$el.querySelector('#id_designer_search');
+            const designerResults = this.$el.querySelector('#designer-search-results');
             
             if (designerInput) designerInput.value = id;
             if (designerSearch) designerSearch.value = name;
@@ -37,9 +39,10 @@ document.addEventListener('alpine:init', () => {
         },
 
         selectRideModel(id, name) {
-            const rideModelInput = document.getElementById('id_ride_model');
-            const rideModelSearch = document.getElementById('id_ride_model_search');
-            const rideModelResults = document.getElementById('ride-model-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const rideModelInput = this.$el.querySelector('#id_ride_model');
+            const rideModelSearch = this.$el.querySelector('#id_ride_model_search');
+            const rideModelResults = this.$el.querySelector('#ride-model-search-results');
             
             if (rideModelInput) rideModelInput.value = id;
             if (rideModelSearch) rideModelSearch.value = name;
@@ -47,9 +50,10 @@ document.addEventListener('alpine:init', () => {
         },
 
         clearAllSearchResults() {
-            const manufacturerResults = document.getElementById('manufacturer-search-results');
-            const designerResults = document.getElementById('designer-search-results');
-            const rideModelResults = document.getElementById('ride-model-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
+            const designerResults = this.$el.querySelector('#designer-search-results');
+            const rideModelResults = this.$el.querySelector('#ride-model-search-results');
             
             if (manufacturerResults) manufacturerResults.innerHTML = '';
             if (designerResults) designerResults.innerHTML = '';
@@ -57,17 +61,20 @@ document.addEventListener('alpine:init', () => {
         },
 
         clearManufacturerResults() {
-            const manufacturerResults = document.getElementById('manufacturer-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
             if (manufacturerResults) manufacturerResults.innerHTML = '';
         },
 
         clearDesignerResults() {
-            const designerResults = document.getElementById('designer-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const designerResults = this.$el.querySelector('#designer-search-results');
             if (designerResults) designerResults.innerHTML = '';
         },
 
         clearRideModelResults() {
-            const rideModelResults = document.getElementById('ride-model-search-results');
+            // Use AlpineJS $el to scope queries within component
+            const rideModelResults = this.$el.querySelector('#ride-model-search-results');
             if (rideModelResults) rideModelResults.innerHTML = '';
         }
     }));
diff --git a/templates/rides/partials/search_script.html b/templates/rides/partials/search_script.html
index c88abee0..1290e949 100644
--- a/templates/rides/partials/search_script.html
+++ b/templates/rides/partials/search_script.html
@@ -1,365 +1,122 @@
-<script>
-document.addEventListener('alpine:init', () => {
-    Alpine.data('rideSearch', () => ({
-        init() {
-            // Initialize from URL params
-            const urlParams = new URLSearchParams(window.location.search);
-            this.searchQuery = urlParams.get('search') || '';
-            
-            // Bind to form reset
-            document.querySelector('form').addEventListener('reset', () => {
-                this.searchQuery = '';
+<!-- HTMX + AlpineJS ONLY - NO CUSTOM JAVASCRIPT -->
+<div x-data="{
+    searchQuery: new URLSearchParams(window.location.search).get('search') || '',
+    showSuggestions: false,
+    selectedIndex: -1,
+    
+    init() {
+        // Watch for URL changes
+        this.$watch('searchQuery', value => {
+            if (value.length >= 2) {
+                this.showSuggestions = true;
+            } else {
+                this.showSuggestions = false;
+            }
+        });
+        
+        // Handle clicks outside to close suggestions
+        this.$el.addEventListener('click', (e) => {
+            if (!e.target.closest('#search-suggestions') && !e.target.closest('#search')) {
+                this.showSuggestions = false;
+            }
+        });
+    },
+    
+    handleInput() {
+        // HTMX will handle the actual search request
+        if (this.searchQuery.length >= 2) {
+            this.showSuggestions = true;
+        } else {
+            this.showSuggestions = false;
+        }
+    },
+    
+    selectSuggestion(text) {
+        this.searchQuery = text;
+        this.showSuggestions = false;
+        // Update the search input
+        this.$refs.searchInput.value = text;
+        // Trigger form change for HTMX
+        this.$refs.searchForm.dispatchEvent(new Event('change'));
+    },
+    
+    handleKeydown(e) {
+        const suggestions = this.$el.querySelectorAll('#search-suggestions button');
+        if (!suggestions.length) return;
+        
+        switch(e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (this.selectedIndex < suggestions.length - 1) {
+                    this.selectedIndex++;
+                    suggestions[this.selectedIndex].focus();
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (this.selectedIndex > 0) {
+                    this.selectedIndex--;
+                    suggestions[this.selectedIndex].focus();
+                } else {
+                    this.$refs.searchInput.focus();
+                    this.selectedIndex = -1;
+                }
+                break;
+            case 'Escape':
                 this.showSuggestions = false;
                 this.selectedIndex = -1;
-                this.cleanup();
-            });
-            
-            // Handle clicks outside suggestions
-            document.addEventListener('click', (e) => {
-                if (!e.target.closest('#search-suggestions') && !e.target.closest('#search')) {
-                    this.showSuggestions = false;
+                this.$refs.searchInput.blur();
+                break;
+            case 'Enter':
+                if (e.target.tagName === 'BUTTON') {
+                    e.preventDefault();
+                    this.selectSuggestion(e.target.dataset.text);
                 }
-            });
-
-            // Handle HTMX errors
-            document.body.addEventListener('htmx:error', (evt) => {
-                console.error('HTMX Error:', evt.detail.error);
-                this.showError('An error occurred while searching. Please try again.');
-            });
-            
-            // Store bound handlers for cleanup
-            this.boundHandlers = new Map();
-            
-            // Create handler functions
-            const popstateHandler = () => {
-                const urlParams = new URLSearchParams(window.location.search);
-                this.searchQuery = urlParams.get('search') || '';
-                this.syncFormWithUrl();
-            };
-            this.boundHandlers.set('popstate', popstateHandler);
-            
-            const errorHandler = (evt) => {
-                console.error('HTMX Error:', evt.detail.error);
-                this.showError('An error occurred while searching. Please try again.');
-            };
-            this.boundHandlers.set('htmx:error', errorHandler);
-            
-            // Bind event listeners
-            window.addEventListener('popstate', popstateHandler);
-            document.body.addEventListener('htmx:error', errorHandler);
-            
-            // Restore filters from localStorage if no URL params exist
-            const savedFilters = localStorage.getItem('rideFilters');
-            
-            // Set up destruction handler
-            this.$cleanup = this.performCleanup.bind(this);
-            if (savedFilters) {
-                const filters = JSON.parse(savedFilters);
-                Object.entries(filters).forEach(([key, value]) => {
-                    const input = document.querySelector(`[name="${key}"]`);
-                    if (input) input.value = value;
-                });
-                // Trigger search with restored filters
-                document.querySelector('form').dispatchEvent(new Event('change'));
-            }
-
-            // Set up filter persistence
-            document.querySelector('form').addEventListener('change', (e) => {
-                this.saveFilters();
-            });
-        },
-
-        showSuggestions: false,
-        loading: false,
-        searchQuery: '',
-        suggestionTimeout: null,
-
-        // Save current filters to localStorage
-        saveFilters() {
-            const form = document.querySelector('form');
-            const formData = new FormData(form);
-            const filters = {};
-            for (let [key, value] of formData.entries()) {
-                if (value) filters[key] = value;
-            }
-            localStorage.setItem('rideFilters', JSON.stringify(filters));
-        },
-
-        // Clear all filters
-        clearFilters() {
-            document.querySelectorAll('form select, form input').forEach(el => {
-                el.value = '';
-            });
-            localStorage.removeItem('rideFilters');
-            document.querySelector('form').dispatchEvent(new Event('change'));
-        },
-
-        // Get search suggestions with request tracking
-        lastRequestId: 0,
-        currentRequest: null,
-
-        getSearchSuggestions() {
-            if (this.searchQuery.length < 2) {
+                break;
+            case 'Tab':
                 this.showSuggestions = false;
-                return;
-            }
-
-            // Cancel any pending request
-            if (this.currentRequest) {
-                this.currentRequest.abort();
-            }
-
-            const requestId = ++this.lastRequestId;
-            const controller = new AbortController();
-            this.currentRequest = controller;
-            
-            const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
-
-            this.fetchSuggestions(controller, requestId, () => {
-                clearTimeout(timeoutId);
-                if (this.currentRequest === controller) {
-                    this.currentRequest = null;
-                }
-            });
-        },
-
-        fetchSuggestions(controller, requestId) {
-            const parkSlug = document.querySelector('input[name="park_slug"]')?.value;
-            const queryParams = {
-                q: this.searchQuery
-            };
-            if (parkSlug) {
-                queryParams.park_slug = parkSlug;
-            }
-
-            // Create temporary form for HTMX request
-            const tempForm = document.createElement('form');
-            tempForm.setAttribute('hx-get', '/rides/search-suggestions/');
-            tempForm.setAttribute('hx-vals', JSON.stringify(queryParams));
-            tempForm.setAttribute('hx-trigger', 'submit');
-            tempForm.setAttribute('hx-swap', 'none');
-            
-            // Add request ID header simulation
-            tempForm.setAttribute('hx-headers', JSON.stringify({
-                'X-Request-ID': requestId.toString()
-            }));
-            
-            // Handle abort signal
-            if (controller.signal.aborted) {
-                this.handleSuggestionError(new Error('AbortError'), requestId);
-                return;
-            }
-            
-            const abortHandler = () => {
-                if (document.body.contains(tempForm)) {
-                    document.body.removeChild(tempForm);
-                }
-                this.handleSuggestionError(new Error('AbortError'), requestId);
-            };
-            controller.signal.addEventListener('abort', abortHandler);
-            
-            tempForm.addEventListener('htmx:afterRequest', (event) => {
-                controller.signal.removeEventListener('abort', abortHandler);
-                
-                if (event.detail.xhr.status >= 200 && event.detail.xhr.status < 300) {
-                    this.handleSuggestionResponse(event.detail.xhr, requestId);
-                } else {
-                    this.handleSuggestionError(new Error(`HTTP error! status: ${event.detail.xhr.status}`), requestId);
-                }
-                
-                if (document.body.contains(tempForm)) {
-                    document.body.removeChild(tempForm);
-                }
-            });
-            
-            tempForm.addEventListener('htmx:error', (event) => {
-                controller.signal.removeEventListener('abort', abortHandler);
-                this.handleSuggestionError(new Error(`HTTP error! status: ${event.detail.xhr.status || 'unknown'}`), requestId);
-                
-                if (document.body.contains(tempForm)) {
-                    document.body.removeChild(tempForm);
-                }
-            });
-            
-            document.body.appendChild(tempForm);
-            htmx.trigger(tempForm, 'submit');
-        },
-
-        handleSuggestionResponse(xhr, requestId) {
-            if (requestId === this.lastRequestId && this.searchQuery === document.getElementById('search').value) {
-                const html = xhr.responseText || '';
-                const suggestionsEl = document.getElementById('search-suggestions');
-                suggestionsEl.innerHTML = html;
-                this.showSuggestions = Boolean(html.trim());
-                
-                this.updateAriaAttributes(suggestionsEl);
-            }
-        },
-
-        updateAriaAttributes(suggestionsEl) {
-            const searchInput = document.getElementById('search');
-            searchInput.setAttribute('aria-expanded', this.showSuggestions.toString());
-            searchInput.setAttribute('aria-controls', 'search-suggestions');
-            if (this.showSuggestions) {
-                suggestionsEl.setAttribute('role', 'listbox');
-                suggestionsEl.querySelectorAll('button').forEach(btn => {
-                    btn.setAttribute('role', 'option');
-                });
-            }
-        },
-
-        handleSuggestionError(error, requestId) {
-            if (error.name === 'AbortError') {
-                console.warn('Search suggestion request timed out or cancelled');
-                return;
-            }
-            
-            console.error('Error fetching suggestions:', error);
-            if (requestId === this.lastRequestId) {
-                const suggestionsEl = document.getElementById('search-suggestions');
-                suggestionsEl.innerHTML = `
-                    <div class="p-2 text-sm text-red-600 dark:text-red-400" role="alert">
-                        Failed to load suggestions. Please try again.
-                    </div>`;
-                this.showSuggestions = true;
-            }
-        },
-
-        // Handle input changes with debounce
-        handleInput() {
-            clearTimeout(this.suggestionTimeout);
-            this.suggestionTimeout = setTimeout(() => {
-                this.getSearchSuggestions();
-            }, 200);
-        },
-
-        // Handle suggestion selection
-        // Sync form with URL parameters
-        syncFormWithUrl() {
-            const urlParams = new URLSearchParams(window.location.search);
-            const form = document.querySelector('form');
-            
-            // Clear existing values
-            form.querySelectorAll('input, select').forEach(el => {
-                if (el.type !== 'hidden') el.value = '';
-            });
-            
-            // Set values from URL
-            urlParams.forEach((value, key) => {
-                const input = form.querySelector(`[name="${key}"]`);
-                if (input) input.value = value;
-            });
-            
-            // Trigger form update
-            form.dispatchEvent(new Event('change'));
-        },
-
-        // Cleanup resources
-        cleanup() {
-            clearTimeout(this.suggestionTimeout);
-            this.showSuggestions = false;
-            localStorage.removeItem('rideFilters');
-        },
-
-        selectSuggestion(text) {
-            this.searchQuery = text;
-            this.showSuggestions = false;
-            document.getElementById('search').value = text;
-            
-            // Update URL with search parameter
-            const url = new URL(window.location);
-            url.searchParams.set('search', text);
-            window.history.pushState({}, '', url);
-            
-            document.querySelector('form').dispatchEvent(new Event('change'));
-        },
-
-        // Handle keyboard navigation
-        // Show error message
-        showError(message) {
-            const searchInput = document.getElementById('search');
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'text-red-600 text-sm mt-1';
-            errorDiv.textContent = message;
-            searchInput.parentNode.appendChild(errorDiv);
-            setTimeout(() => errorDiv.remove(), 3000);
-        },
-
-        // Handle keyboard navigation
-        handleKeydown(e) {
-            const suggestions = document.querySelectorAll('#search-suggestions button');
-            if (!suggestions.length) return;
-
-            const currentIndex = Array.from(suggestions).findIndex(el => el === document.activeElement);
-
-            switch(e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (currentIndex < 0) {
-                        suggestions[0].focus();
-                        this.selectedIndex = 0;
-                    } else if (currentIndex < suggestions.length - 1) {
-                        suggestions[currentIndex + 1].focus();
-                        this.selectedIndex = currentIndex + 1;
-                    }
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (currentIndex > 0) {
-                        suggestions[currentIndex - 1].focus();
-                        this.selectedIndex = currentIndex - 1;
-                    } else {
-                        document.getElementById('search').focus();
-                        this.selectedIndex = -1;
-                    }
-                    break;
-                case 'Escape':
-                    this.showSuggestions = false;
-                    this.selectedIndex = -1;
-                    document.getElementById('search').blur();
-                    break;
-                case 'Enter':
-                    if (document.activeElement.tagName === 'BUTTON') {
-                        e.preventDefault();
-                        this.selectSuggestion(document.activeElement.dataset.text);
-                    }
-                    break;
-                case 'Tab':
-                    this.showSuggestions = false;
-                    break;
-            }
+                break;
         }
-    }));
-});
-        },
+    }
+}" 
+@click.outside="showSuggestions = false">
 
-        performCleanup() {
-            // Remove all bound event listeners
-            this.boundHandlers.forEach(this.removeEventHandler.bind(this));
-            this.boundHandlers.clear();
-            
-            // Cancel any pending requests
-            if (this.currentRequest) {
-                this.currentRequest.abort();
-                this.currentRequest = null;
-            }
-            
-            // Clear any pending timeouts
-            if (this.suggestionTimeout) {
-                clearTimeout(this.suggestionTimeout);
-            }
-        },
-
-        removeEventHandler(handler, event) {
-            if (event === 'popstate') {
-                window.removeEventListener(event, handler);
-            } else {
-                document.body.removeEventListener(event, handler);
-            }
-        }
-    }));
-});
-</script>
+    <!-- Search Input with HTMX -->
+    <input 
+        x-ref="searchInput"
+        x-model="searchQuery"
+        @input="handleInput()"
+        @keydown="handleKeydown($event)"
+        hx-get="/rides/search-suggestions/"
+        hx-trigger="input changed delay:200ms"
+        hx-target="#search-suggestions"
+        hx-swap="innerHTML"
+        hx-include="[name='park_slug']"
+        :aria-expanded="showSuggestions"
+        aria-controls="search-suggestions"
+        type="text" 
+        name="search"
+        id="search"
+        placeholder="Search rides..."
+        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    />
+    
+    <!-- Suggestions Container -->
+    <div 
+        x-show="showSuggestions" 
+        x-transition
+        id="search-suggestions"
+        role="listbox"
+        class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto"
+    >
+        <!-- HTMX will populate this -->
+    </div>
+    
+    <!-- Form Reference for HTMX -->
+    <form x-ref="searchForm" style="display: none;">
+        <!-- Hidden form for HTMX reference -->
+    </form>
+</div>
 
 <!-- HTMX Loading Indicator Styles -->
 <style>
@@ -368,10 +125,9 @@ document.addEventListener('alpine:init', () => {
     transition: opacity 200ms ease-in;
 }
 .htmx-request .htmx-indicator {
-    opacity: 1
+    opacity: 1;
 }
 
-/* Enhanced Loading Indicator */
 .loading-indicator {
     position: fixed;
     bottom: 1rem;
@@ -396,60 +152,14 @@ document.addEventListener('alpine:init', () => {
 }
 </style>
 
-<script>
-// Initialize request timeout management
-const timeouts = new Map();
-
-// Handle request start
-document.addEventListener('htmx:beforeRequest', function(evt) {
-    const timestamp = document.querySelector('.loading-timestamp');
-    if (timestamp) {
-        timestamp.textContent = new Date().toLocaleTimeString();
+<!-- HTMX Error Handling (Minimal JavaScript as allowed by Context7 docs) -->
+<div x-data="{
+    init() {
+        // Only essential HTMX error handling as shown in Context7 docs
+        this.$el.addEventListener('htmx:responseError', (evt) => {
+            if (evt.detail.xhr.status === 404 || evt.detail.xhr.status === 500) {
+                console.error('HTMX Error:', evt.detail.xhr.status);
+            }
+        });
     }
-
-    // Set timeout for request
-    const timeoutId = setTimeout(() => {
-        evt.detail.xhr.abort();
-        showError('Request timed out. Please try again.');
-    }, 10000); // 10s timeout
-
-    timeouts.set(evt.detail.xhr, timeoutId);
-});
-
-// Handle request completion
-document.addEventListener('htmx:afterRequest', function(evt) {
-    const timeoutId = timeouts.get(evt.detail.xhr);
-    if (timeoutId) {
-        clearTimeout(timeoutId);
-        timeouts.delete(evt.detail.xhr);
-    }
-
-    if (!evt.detail.successful) {
-        showError('Failed to update results. Please try again.');
-    }
-});
-
-// Handle errors
-function showError(message) {
-    const indicator = document.querySelector('.loading-indicator');
-    if (indicator) {
-        indicator.innerHTML = `
-            <div class="flex items-center text-red-100">
-                <i class="mr-2 fas fa-exclamation-circle"></i>
-                <span>${message}</span>
-            </div>`;
-        setTimeout(() => {
-            indicator.innerHTML = originalIndicatorContent;
-        }, 3000);
-    }
-}
-
-// Store original indicator content
-const originalIndicatorContent = document.querySelector('.loading-indicator')?.innerHTML;
-
-// Reset loading state when navigating away
-window.addEventListener('beforeunload', () => {
-    timeouts.forEach(timeoutId => clearTimeout(timeoutId));
-    timeouts.clear();
-});
-</script>
+}"></div>
diff --git a/templates/rides/ride_form.html b/templates/rides/ride_form.html
index 6ab1c0bc..05bae463 100644
--- a/templates/rides/ride_form.html
+++ b/templates/rides/ride_form.html
@@ -15,26 +15,7 @@
             {% endif %}
         </h1>
 
-        <form method="post" enctype="multipart/form-data" class="space-y-6" x-data="{ 
-            status: '{{ form.instance.status|default:'OPERATING' }}',
-            clearResults(containerId) {
-                const container = document.getElementById(containerId);
-                if (container && !container.contains(event.target)) {
-                    container.querySelector('[id$=search-results]').innerHTML = '';
-                }
-            },
-            handleStatusChange(event) {
-                this.status = event.target.value;
-                if (this.status === 'CLOSING') {
-                    document.getElementById('id_closing_date').required = true;
-                } else {
-                    document.getElementById('id_closing_date').required = false;
-                }
-            },
-            showClosingDate() {
-                return ['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(this.status);
-            }
-        }">
+        <form method="post" enctype="multipart/form-data" class="space-y-6" x-data="rideFormData()">
             {% csrf_token %}
 
             {% if not park %}
@@ -242,4 +223,41 @@
         </form>
     </div>
 </div>
+
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('rideFormData', () => ({
+        status: '{{ form.instance.status|default:"OPERATING" }}',
+        
+        init() {
+            // Watch for status changes on the status select element
+            this.$watch('status', (value) => {
+                const closingDateField = this.$el.querySelector('#id_closing_date');
+                if (closingDateField) {
+                    closingDateField.required = value === 'CLOSING';
+                }
+            });
+        },
+        
+        clearResults(containerId) {
+            // Use AlpineJS $el to find container within component scope
+            const container = this.$el.querySelector(`#${containerId}`);
+            if (container) {
+                const resultsDiv = container.querySelector('[id$="search-results"]');
+                if (resultsDiv) {
+                    resultsDiv.innerHTML = '';
+                }
+            }
+        },
+        
+        handleStatusChange(event) {
+            this.status = event.target.value;
+        },
+        
+        showClosingDate() {
+            return ['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(this.status);
+        }
+    }));
+});
+</script>
 {% endblock %}