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