feat: Add detailed park and ride pages with HTMX integration

- Implemented park detail page with dynamic content loading for rides and weather.
- Created park list page with filters and search functionality.
- Developed ride detail page showcasing ride stats, reviews, and similar rides.
- Added ride list page with filtering options and dynamic loading.
- Introduced search results page with tabs for parks, rides, and users.
- Added HTMX tests for global search functionality.

backend/templates/parks/partials/park_list_item.html

@@ -0,0 +1,19 @@
+{% for park in parks %}
+<div class="park-search-item p-2 border-b border-gray-100 flex items-center justify-between" data-park-id="{{ park.id }}">
+    <div class="flex-1">
+        <div class="font-medium text-sm">{{ park.name }}</div>
+        {% if park.location %}
+            <div class="text-xs text-gray-500">{{ park.location.city }}</div>
+        {% endif %}
+    </div>
+    <div class="ml-4">
+        <button class="px-2 py-1 text-sm bg-blue-600 text-white rounded" 
+                hx-post="{% url 'parks:htmx_add_park_to_trip' %}" 
+                hx-vals='{"park_id": "{{ park.id }}"}' 
+                hx-target="#trip-parks" 
+                hx-swap="afterbegin">
+            Add
+        </button>
+    </div>
+</div>
+{% endfor %}

backend/templates/parks/partials/saved_trips.html

@@ -0,0 +1,21 @@
+<div class="saved-trips-list">
+{% if trips %}
+    <ul class="space-y-2">
+    {% for trip in trips %}
+        <li class="p-2 bg-white rounded-md shadow-sm">
+            <div class="flex items-center justify-between">
+                <div>
+                    <div class="font-medium">{{ trip.name }}</div>
+                    <div class="text-xs text-gray-500">{{ trip.created_at }}</div>
+                </div>
+                <div>
+                    <a href="{% url 'parks:roadtrip_detail' trip.id %}" class="text-blue-600">View</a>
+                </div>
+            </div>
+        </li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <div class="p-4 text-center text-gray-500">No saved trips yet.</div>
+{% endif %}
+</div>

backend/templates/parks/partials/trip_park_item.html

@@ -0,0 +1,16 @@
+<div class="trip-park-item draggable-item flex items-center justify-between p-2 bg-gray-50 rounded-md" data-park-id="{{ park.id }}">
+    <div class="flex items-center space-x-3">
+        <div class="text-sm font-medium text-gray-900">{{ park.name }}</div>
+        {% if park.location %}
+        <div class="text-xs text-gray-500">{{ park.location.city }}</div>
+        {% endif %}
+    </div>
+    <div class="flex items-center space-x-2">
+        <button class="px-2 py-1 text-sm text-red-600 hover:text-red-800" 
+                hx-post="{% url 'parks:htmx_remove_park_from_trip' %}" 
+                hx-vals='{"park_id": "{{ park.id }}"}' 
+                hx-swap="delete">
+            Remove
+        </button>
+    </div>
+</div>

backend/templates/parks/partials/trip_parks_list.html

@@ -0,0 +1,34 @@
+<div id="trip-parks" class="space-y-2">
+{% if trip_parks %}
+    {% for park in trip_parks %}
+        {% include 'parks/partials/trip_park_item.html' with park=park %}
+    {% endfor %}
+{% else %}
+    <div id="empty-trip" class="text-center py-8 text-gray-500">
+        <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>
+{% endif %}
+</div>
+
+<script>
+document.addEventListener('htmx:load', function () {
+    const el = document.getElementById('trip-parks');
+    if (!el) return;
+    if (el.dataset.sortableInit) return;
+    if (typeof Sortable === 'undefined' || typeof htmx === 'undefined') return;
+    el.dataset.sortableInit = '1';
+    const sorter = new Sortable(el, {
+        animation: 150,
+        handle: '.draggable-item',
+        onEnd: function () {
+            const order = Array.from(el.querySelectorAll('[data-park-id]')).map(function (n) {
+                return n.dataset.parkId;
+            });
+            htmx.ajax('POST', '{% url "parks:htmx_reorder_parks" %}', { values: { 'order[]': order } });
+        },
+    });
+    el._tripSortable = sorter;
+});
+</script>

backend/templates/parks/partials/trip_summary.html

@@ -0,0 +1,21 @@
+<div id="trip-summary" class="trip-summary-card">
+    <h3 class="mb-4 text-lg font-semibold text-gray-900">Trip Summary</h3>
+    <div class="trip-stats grid grid-cols-2 gap-4">
+        <div class="trip-stat">
+            <div class="trip-stat-value" id="total-distance">{{ summary.total_distance }}</div>
+            <div class="trip-stat-label">Total Miles</div>
+        </div>
+        <div class="trip-stat">
+            <div class="trip-stat-value" id="total-time">{{ summary.total_time }}</div>
+            <div class="trip-stat-label">Drive Time</div>
+        </div>
+        <div class="trip-stat">
+            <div class="trip-stat-value" id="total-parks">{{ summary.total_parks }}</div>
+            <div class="trip-stat-label">Parks</div>
+        </div>
+        <div class="trip-stat">
+            <div class="trip-stat-value" id="total-rides">{{ summary.total_rides }}</div>
+            <div class="trip-stat-label">Total Rides</div>
+        </div>
+    </div>
+</div>