{% extends "base/htmx-base.html" %}
{% load static %}

{% block title %}Explore Parks - ThrillWiki{% endblock %}

{% block main %}
<div class="container py-8">
    <div class="flex flex-col gap-8 md:flex-row">
        <!-- Sidebar Filters -->
        <aside class="w-full md:w-64 shrink-0" 
               x-data="{ showFilters: false }">
            <div class="flex items-center justify-between mb-4 md:hidden">
                <h2 class="text-lg font-semibold">Filters</h2>
                <button @click="showFilters = !showFilters" 
                        class="text-sm text-primary hover:underline">
                    <span x-text="showFilters ? 'Hide' : 'Show'"></span>
                </button>
            </div>
            
            <div class="space-y-6" 
                 :class="{'hidden': !showFilters, 'block': showFilters}" 
                 class="md:block">
                
                <form id="park-filters"
                      hx-get="{% url 'api:park-list' %}"
                      hx-target="#park-grid"
                      hx-trigger="change delay:300ms, submit">
                    
                    <!-- Search -->
                    <div class="mb-6 space-y-2">
                        <label class="text-sm font-medium">Search</label>
                        <input type="text" 
                               name="q" 
                               placeholder="Search parks..." 
                               class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                    </div>

                    <!-- Country Filter -->
                    <div class="mb-6 space-y-2">
                        <label class="text-sm font-medium">Country</label>
                        <select name="country" 
                                class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                            <option value="">All Countries</option>
                            {% for country in countries %}
                            <option value="{{ country.code }}">{{ country.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Status Filter -->
                    <div class="mb-6 space-y-3">
                        <label class="text-sm font-medium">Status</label>
                        <div class="space-y-2">
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" name="status" value="Operating" class="rounded border-primary text-primary focus:ring-primary">
                                <span class="text-sm">Operating</span>
                            </label>
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" name="status" value="Closed" class="rounded border-primary text-primary focus:ring-primary">
                                <span class="text-sm">Closed</span>
                            </label>
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" name="status" value="Construction" class="rounded border-primary text-primary focus:ring-primary">
                                <span class="text-sm">Under Construction</span>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="flex-1">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-3xl font-bold tracking-tight">Theme Parks</h1>
                <div class="flex items-center gap-2">
                    <span class="text-sm text-muted-foreground" id="park-count">
                        Showing all results
                    </span>
                    <!-- View Toggle -->
                    <div class="flex items-center border rounded-md" x-data="{ view: 'grid' }">
                        <button @click="view = 'grid'" 
                                :class="{'bg-muted': view === 'grid'}"
                                class="p-2 transition-colors hover:bg-muted/50">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                        </button>
                        <button @click="view = 'list'" 
                                :class="{'bg-muted': view === 'list'}"
                                class="p-2 transition-colors hover:bg-muted/50">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Park Grid -->
            <div id="park-grid" 
                 class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
                 hx-get="{% url 'api:park-list' %}"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <!-- Loading State -->
                {% for i in "123456"|make_list %}
                <div class="rounded-lg border bg-card text-card-foreground shadow-sm h-[380px]">
                    <div class="p-0">
                        <div class="w-full h-48 rounded-t-lg bg-muted animate-pulse"></div>
                        <div class="p-6 space-y-4">
                            <div class="w-3/4 h-6 rounded bg-muted animate-pulse"></div>
                            <div class="space-y-2">
                                <div class="w-full h-4 rounded bg-muted animate-pulse"></div>
                                <div class="w-2/3 h-4 rounded bg-muted animate-pulse"></div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}