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/enhanced_search.html

@@ -0,0 +1,232 @@
+{% comment %}
+Enhanced Search Component - Django Cotton Version
+
+Advanced search input with autocomplete suggestions, debouncing, and loading states.
+Provides real-time search with suggestions and filtering integration.
+
+Usage Examples:
+
+<c-enhanced_search 
+    placeholder="Search parks by name, location, or features..."
+    current_value=""
+/>
+
+<c-enhanced_search 
+    placeholder="Find your perfect park..."
+    current_value="disney"
+    autocomplete_url="/parks/suggest/"
+    class="custom-class"
+/>
+
+Parameters:
+- placeholder: Search input placeholder text (default: "Search parks...")
+- current_value: Current search value (optional)
+- autocomplete_url: URL for autocomplete suggestions (optional)
+- debounce_delay: Debounce delay in milliseconds (default: 300)
+- class: Additional CSS classes (optional)
+
+Features:
+- Real-time search with debouncing
+- Autocomplete dropdown with suggestions
+- Loading states and indicators
+- HTMX integration for seamless search
+- Keyboard navigation support
+- Clear button functionality
+{% endcomment %}
+
+<c-vars 
+    placeholder="Search parks..."
+    current_value=""
+    autocomplete_url=""
+    debounce_delay="300"
+    class=""
+/>
+
+<div class="relative w-full {{ class }}" 
+     x-data="{ 
+        open: false, 
+        search: '{{ current_value }}',
+        suggestions: [],
+        loading: false,
+        selectedIndex: -1,
+        clearSearch() {
+            this.search = '';
+            this.open = false;
+            this.suggestions = [];
+            this.selectedIndex = -1;
+            htmx.trigger(this.$refs.searchInput, 'keyup');
+        },
+        selectSuggestion(suggestion) {
+            this.search = suggestion.name || suggestion;
+            this.open = false;
+            this.selectedIndex = -1;
+            htmx.trigger(this.$refs.searchInput, 'keyup');
+        },
+        handleKeydown(event) {
+            if (!this.open) return;
+            
+            switch(event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.selectedIndex >= 0 && this.suggestions[this.selectedIndex]) {
+                        this.selectSuggestion(this.suggestions[this.selectedIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    this.open = false;
+                    this.selectedIndex = -1;
+                    break;
+            }
+        }
+     }"
+     @click.away="open = false">
+    
+    <div class="relative">
+        <!-- Search Icon -->
+        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+            </svg>
+        </div>
+
+        <!-- Search Input -->
+        <input 
+            x-ref="searchInput"
+            type="text" 
+            name="search"
+            x-model="search"
+            placeholder="{{ placeholder }}"
+            class="block w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg leading-5 bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 transition-colors"
+            hx-get="{% url 'parks:park_list' %}"
+            hx-trigger="keyup changed delay:{{ debounce_delay }}ms"
+            hx-target="#park-results"
+            hx-include="[name='view_mode'], [name='status'], [name='operator'], [name='ordering']"
+            hx-indicator="#search-spinner"
+            hx-push-url="true"
+            @keydown="handleKeydown"
+            @input="
+                if (search.length >= 2) {
+                    {% if autocomplete_url %}
+                        loading = true;
+                        fetch('{{ autocomplete_url }}?q=' + encodeURIComponent(search))
+                            .then(response => response.json())
+                            .then(data => {
+                                suggestions = data.suggestions || [];
+                                open = suggestions.length > 0;
+                                loading = false;
+                                selectedIndex = -1;
+                            })
+                            .catch(() => {
+                                loading = false;
+                                open = false;
+                            });
+                    {% endif %}
+                } else {
+                    open = false;
+                    suggestions = [];
+                    selectedIndex = -1;
+                }
+            "
+            autocomplete="off"
+        />
+
+        <!-- Loading Spinner -->
+        <div id="search-spinner" class="absolute inset-y-0 right-0 pr-3 flex items-center htmx-indicator">
+            <svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        </div>
+
+        <!-- Clear Button -->
+        <button 
+            x-show="search.length > 0"
+            @click="clearSearch()"
+            type="button"
+            class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors htmx-indicator:hidden"
+            aria-label="Clear search"
+            title="Clear search"
+        >
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </button>
+    </div>
+
+    <!-- Autocomplete Dropdown -->
+    <div 
+        x-show="open && suggestions.length > 0"
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="transform opacity-0 scale-95"
+        x-transition:enter-end="transform opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave-start="transform opacity-100 scale-100"
+        x-transition:leave-end="transform opacity-0 scale-95"
+        class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700 max-h-60 overflow-y-auto"
+        style="display: none;"
+    >
+        <div class="py-1">
+            <template x-for="(suggestion, index) in suggestions" :key="index">
+                <button
+                    type="button"
+                    class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 flex items-center justify-between"
+                    :class="{ 'bg-gray-100 dark:bg-gray-700': selectedIndex === index }"
+                    @click="selectSuggestion(suggestion)"
+                    @mouseenter="selectedIndex = index"
+                >
+                    <span x-text="suggestion.name || suggestion"></span>
+                    <template x-if="suggestion.type">
+                        <span class="text-xs text-gray-500 dark:text-gray-400 capitalize" x-text="suggestion.type"></span>
+                    </template>
+                </button>
+            </template>
+        </div>
+
+        <!-- Quick Filters -->
+        {% if autocomplete_url %}
+            <div class="border-t border-gray-200 dark:border-gray-700 p-2">
+                <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Quick Filters:</div>
+                <div class="flex flex-wrap gap-1">
+                    <button
+                        type="button"
+                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-800/50"
+                        hx-get="{% url 'parks:park_list' %}?has_coasters=True"
+                        hx-target="#park-results"
+                        hx-push-url="true"
+                        @click="open = false"
+                    >
+                        Parks with Coasters
+                    </button>
+                    <button
+                        type="button"
+                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-800/50"
+                        hx-get="{% url 'parks:park_list' %}?min_rating=4"
+                        hx-target="#park-results"
+                        hx-push-url="true"
+                        @click="open = false"
+                    >
+                        Highly Rated
+                    </button>
+                    <button
+                        type="button"
+                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-800/50"
+                        hx-get="{% url 'parks:park_list' %}?park_type=disney"
+                        hx-target="#park-results"
+                        hx-push-url="true"
+                        @click="open = false"
+                    >
+                        Disney Parks
+                    </button>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+</div>

templates/cotton/filter_chips.html

@@ -0,0 +1,81 @@
+{% comment %}
+Filter Chips Component - Django Cotton Version
+
+Displays active filters as removable chips/badges with clear functionality.
+Shows current filter state and allows users to remove individual filters.
+
+Usage Examples:
+
+<c-filter_chips filters=active_filters base_url="/parks/" />
+
+Parameters:
+- filters: Dictionary of active filters (required)
+- base_url: Base URL for filter removal links (default: current URL)
+- class: Additional CSS classes (optional)
+
+Features:
+- Clean chip design with remove buttons
+- HTMX integration for seamless removal
+- Support for various filter types
+- Accessible with proper ARIA labels
+- Shows filter count in chips
+{% endcomment %}
+
+<c-vars 
+    filters
+    base_url=""
+    class=""
+/>
+
+{% if filters %}
+<div class="flex flex-wrap gap-2 {{ class }}">
+    {% for filter_name, filter_value in filters.items %}
+        {% if filter_value and filter_name != 'page' and filter_name != 'view_mode' %}
+            <div class="inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-blue-700 bg-blue-50 rounded-full border border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700/50">
+                <span class="capitalize">{{ filter_name|title }}:</span>
+                <span class="font-semibold">
+                    {% if filter_value == 'True' %}
+                        Yes
+                    {% elif filter_value == 'False' %}
+                        No
+                    {% else %}
+                        {{ filter_value }}
+                    {% endif %}
+                </span>
+                <button 
+                    type="button"
+                    class="ml-1 p-0.5 text-blue-600 hover:text-blue-800 hover:bg-blue-100 rounded-full dark:text-blue-300 dark:hover:text-blue-200 dark:hover:bg-blue-800/50 transition-colors"
+                    hx-get="{% if base_url %}{{ base_url }}{% else %}{{ request.path }}{% endif %}?{% for name, value in request.GET.items %}{% if name != filter_name and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    aria-label="Remove {{ filter_name }} filter"
+                    title="Remove filter"
+                >
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        {% endif %}
+    {% endfor %}
+    
+    {% if filters|length > 1 %}
+        <button 
+            type="button"
+            class="inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-gray-600 bg-gray-100 rounded-full border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors"
+            hx-get="{% if base_url %}{{ base_url }}{% else %}{{ request.path }}{% endif %}"
+            hx-target="#park-results"
+            hx-push-url="true"
+            hx-indicator="#search-spinner"
+            aria-label="Clear all filters"
+            title="Clear all filters"
+        >
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            Clear all
+        </button>
+    {% endif %}
+</div>
+{% endif %}

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 %}

templates/cotton/sort_controls.html

@@ -0,0 +1,193 @@
+{% comment %}
+Sort Controls Component - Django Cotton Version
+
+Provides sorting dropdown with common sort options for park listings.
+Integrates with HTMX for seamless sorting without page reloads.
+
+Usage Examples:
+
+<c-sort_controls current_sort="-average_rating" />
+
+<c-sort_controls 
+    current_sort="name"
+    options=custom_sort_options
+    class="custom-class"
+/>
+
+Parameters:
+- current_sort: Currently selected sort option (default: "name")
+- options: Custom sort options list (optional, uses defaults if not provided)
+- class: Additional CSS classes (optional)
+
+Features:
+- Dropdown with common sort options
+- HTMX integration for seamless sorting
+- Visual indicators for current sort
+- Accessible with proper ARIA labels
+- Support for ascending/descending indicators
+{% endcomment %}
+
+<c-vars 
+    current_sort="name"
+    options=""
+    class=""
+/>
+
+<div class="relative inline-block text-left {{ class }}" x-data="{ open: false }">
+    <div>
+        <button 
+            type="button"
+            class="inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
+            @click="open = !open"
+            aria-expanded="true"
+            aria-haspopup="true"
+            aria-label="Sort options"
+        >
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
+            </svg>
+            Sort by
+            {% if current_sort %}
+                {% if current_sort == 'name' %}
+                    <span class="ml-1">: Name (A-Z)</span>
+                {% elif current_sort == '-name' %}
+                    <span class="ml-1">: Name (Z-A)</span>
+                {% elif current_sort == '-average_rating' %}
+                    <span class="ml-1">: Highest Rated</span>
+                {% elif current_sort == 'average_rating' %}
+                    <span class="ml-1">: Lowest Rated</span>
+                {% elif current_sort == '-coaster_count' %}
+                    <span class="ml-1">: Most Coasters</span>
+                {% elif current_sort == 'coaster_count' %}
+                    <span class="ml-1">: Fewest Coasters</span>
+                {% elif current_sort == '-ride_count' %}
+                    <span class="ml-1">: Most Rides</span>
+                {% elif current_sort == 'ride_count' %}
+                    <span class="ml-1">: Fewest Rides</span>
+                {% elif current_sort == '-opening_date' %}
+                    <span class="ml-1">: Newest First</span>
+                {% elif current_sort == 'opening_date' %}
+                    <span class="ml-1">: Oldest First</span>
+                {% else %}
+                    <span class="ml-1">: {{ current_sort }}</span>
+                {% endif %}
+            {% endif %}
+            <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+        </button>
+    </div>
+
+    <div 
+        x-show="open"
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="transform opacity-0 scale-95"
+        x-transition:enter-end="transform opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave-start="transform opacity-100 scale-100"
+        x-transition:leave-end="transform opacity-0 scale-95"
+        class="absolute right-0 z-50 w-56 mt-2 origin-top-right bg-white border border-gray-200 rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700"
+        @click.away="open = false"
+        style="display: none;"
+    >
+        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+            {% if options %}
+                {% for option in options %}
+                    <button
+                        type="button"
+                        class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == option.value %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                        hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering={{ option.value }}"
+                        hx-target="#park-results"
+                        hx-push-url="true"
+                        hx-indicator="#search-spinner"
+                        @click="open = false"
+                        role="menuitem"
+                    >
+                        {% if current_sort == option.value %}
+                            <svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        {% else %}
+                            <span class="w-4 h-4 mr-2"></span>
+                        {% endif %}
+                        {{ option.label }}
+                    </button>
+                {% endfor %}
+            {% else %}
+                <!-- Default sort options -->
+                <button
+                    type="button"
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == 'name' %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                    hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering=name"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    @click="open = false"
+                >
+                    {% if current_sort == 'name' %}<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>{% else %}<span class="w-4 h-4 mr-2"></span>{% endif %}
+                    Name (A-Z)
+                </button>
+                <button
+                    type="button"
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == '-name' %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                    hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering=-name"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    @click="open = false"
+                >
+                    {% if current_sort == '-name' %}<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>{% else %}<span class="w-4 h-4 mr-2"></span>{% endif %}
+                    Name (Z-A)
+                </button>
+                <button
+                    type="button"
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == '-average_rating' %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                    hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering=-average_rating"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    @click="open = false"
+                >
+                    {% if current_sort == '-average_rating' %}<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>{% else %}<span class="w-4 h-4 mr-2"></span>{% endif %}
+                    Highest Rated
+                </button>
+                <button
+                    type="button"
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == '-coaster_count' %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                    hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering=-coaster_count"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    @click="open = false"
+                >
+                    {% if current_sort == '-coaster_count' %}<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>{% else %}<span class="w-4 h-4 mr-2"></span>{% endif %}
+                    Most Coasters
+                </button>
+                <button
+                    type="button"
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == '-ride_count' %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                    hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering=-ride_count"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    @click="open = false"
+                >
+                    {% if current_sort == '-ride_count' %}<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>{% else %}<span class="w-4 h-4 mr-2"></span>{% endif %}
+                    Most Rides
+                </button>
+                <button
+                    type="button"
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == '-opening_date' %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                    hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering=-opening_date"
+                    hx-target="#park-results"
+                    hx-push-url="true"
+                    hx-indicator="#search-spinner"
+                    @click="open = false"
+                >
+                    {% if current_sort == '-opening_date' %}<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>{% else %}<span class="w-4 h-4 mr-2"></span>{% endif %}
+                    Newest First
+                </button>
+            {% endif %}
+        </div>
+    </div>
+</div>

templates/cotton/view_toggle.html

@@ -0,0 +1,67 @@
+{% comment %}
+View Toggle Component - Django Cotton Version
+
+Provides toggle between grid and list view modes with visual indicators.
+Integrates with HTMX for seamless view switching without page reloads.
+
+Usage Examples:
+
+<c-view_toggle current_view="grid" />
+
+<c-view_toggle 
+    current_view="list"
+    class="custom-class"
+/>
+
+Parameters:
+- current_view: Currently selected view mode ("grid" or "list", default: "grid")
+- class: Additional CSS classes (optional)
+
+Features:
+- Clean toggle button design
+- Visual indicators for current view
+- HTMX integration for seamless switching
+- Accessible with proper ARIA labels
+- Icons for grid and list views
+{% endcomment %}
+
+<c-vars 
+    current_view="grid"
+    class=""
+/>
+
+<div class="inline-flex rounded-lg border border-gray-200 dark:border-gray-700 {{ class }}" role="group" aria-label="View toggle">
+    <button
+        type="button"
+        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-l-lg transition-colors {% if current_view == 'grid' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700{% endif %}"
+        hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'view_mode' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}view_mode=grid"
+        hx-target="#park-results"
+        hx-push-url="true"
+        hx-indicator="#search-spinner"
+        aria-label="Grid view"
+        aria-pressed="{% if current_view == 'grid' %}true{% else %}false{% endif %}"
+        title="Grid view"
+    >
+        <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+        </svg>
+        <span class="ml-1 hidden sm:inline">Grid</span>
+    </button>
+    
+    <button
+        type="button"
+        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-r-lg transition-colors {% if current_view == 'list' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700{% endif %}"
+        hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'view_mode' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}view_mode=list"
+        hx-target="#park-results"
+        hx-push-url="true"
+        hx-indicator="#search-spinner"
+        aria-label="List view"
+        aria-pressed="{% if current_view == 'list' %}true{% else %}false{% endif %}"
+        title="List view"
+    >
+        <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="M4 6h16M4 10h16M4 14h16M4 18h16" />
+        </svg>
+        <span class="ml-1 hidden sm:inline">List</span>
+    </button>
+</div>