Enhance park search with autocomplete and improved filtering options

Introduce autocomplete for park searches, optimize park data fetching with select_related and prefetch_related, add new API endpoints for autocomplete and quick filters, and refactor the park list view to use new Django Cotton components for a more dynamic and user-friendly experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

templates/cotton/result_stats.html

@@ -0,0 +1,122 @@
+{% comment %}
+Result Statistics Component - Django Cotton Version
+
+Displays result counts, filter summaries, and statistics for park listings.
+Shows current page info, total results, and search context.
+
+Usage Examples:
+
+<c-result_stats 
+    total_results=50
+    page_obj=page_obj
+    search_query="disney"
+/>
+
+<c-result_stats 
+    total_results=0
+    is_search=True
+    search_query="nonexistent"
+    class="custom-class"
+/>
+
+Parameters:
+- total_results: Total number of results (required)
+- page_obj: Django page object for pagination info (optional)
+- search_query: Current search query (optional)
+- is_search: Whether this is a search result (default: False)
+- filter_count: Number of active filters (optional)
+- class: Additional CSS classes (optional)
+
+Features:
+- Clear result count display
+- Search context information
+- Pagination information
+- Filter summary
+- Responsive design
+{% endcomment %}
+
+<c-vars 
+    total_results
+    page_obj=""
+    search_query=""
+    is_search=""
+    filter_count=""
+    class=""
+/>
+
+<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 {{ class }}">
+    <div class="flex items-center gap-4">
+        <!-- Result Count -->
+        <div class="flex items-center gap-1">
+            {% if total_results == 0 %}
+                <span class="font-medium text-gray-500 dark:text-gray-400">
+                    {% if is_search %}
+                        No parks found
+                        {% if search_query %}
+                            for "{{ search_query }}"
+                        {% endif %}
+                    {% else %}
+                        No parks available
+                    {% endif %}
+                </span>
+            {% elif total_results == 1 %}
+                <span class="font-medium">1 park</span>
+                {% if is_search and search_query %}
+                    <span>found for "{{ search_query }}"</span>
+                {% endif %}
+            {% else %}
+                <span class="font-medium">{{ total_results|floatformat:0 }} parks</span>
+                {% if is_search and search_query %}
+                    <span>found for "{{ search_query }}"</span>
+                {% endif %}
+            {% endif %}
+        </div>
+
+        <!-- Filter Indicator -->
+        {% if filter_count and filter_count > 0 %}
+            <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                </svg>
+                <span>{{ filter_count }} filter{{ filter_count|pluralize }} active</span>
+            </div>
+        {% endif %}
+    </div>
+
+    <!-- Page Information -->
+    {% if page_obj and page_obj.has_other_pages %}
+        <div class="flex items-center gap-2">
+            <span>
+                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+            </span>
+            {% if page_obj.start_index and page_obj.end_index %}
+                <span class="text-gray-400 dark:text-gray-500">|</span>
+                <span>
+                    Showing {{ page_obj.start_index }}-{{ page_obj.end_index }}
+                </span>
+            {% endif %}
+        </div>
+    {% endif %}
+</div>
+
+<!-- Search Suggestions -->
+{% if total_results == 0 and is_search %}
+    <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <div class="flex items-start gap-2">
+            <svg class="w-5 h-5 mt-0.5 text-yellow-600 dark:text-yellow-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <div class="text-sm">
+                <p class="font-medium text-yellow-800 dark:text-yellow-200">No results found</p>
+                <p class="mt-1 text-yellow-700 dark:text-yellow-300">
+                    Try adjusting your search or removing some filters to see more results.
+                </p>
+                <div class="mt-2 space-y-1 text-yellow-600 dark:text-yellow-400">
+                    <p>• Check your spelling</p>
+                    <p>• Try more general terms</p>
+                    <p>• Remove filters to broaden your search</p>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endif %}