{% extends 'base/base.html' %}
{% load static %}

{% block title %}Rides - ThrillWiki{% endblock %}

{% block content %}
<div class="container mx-auto px-4">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Rides & Attractions</h1>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Filters</h2>
        <form hx-get="{% url 'rides:ride_list' %}"
              hx-target="#rides-grid"
              hx-push-url="true"
              hx-trigger="change from:select, keyup[target.name=='search'] delay:500ms from:input"
              class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search</label>
                <input type="text" 
                       name="search"
                       value="{{ current_filters.search }}"
                       placeholder="Search rides..."
                       class="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Category</label>
                <select name="category"
                        class="form-select w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Categories</option>
                    <option value="RC" {% if current_filters.category == 'RC' %}selected{% endif %}>Roller Coaster</option>
                    <option value="DR" {% if current_filters.category == 'DR' %}selected{% endif %}>Dark Ride</option>
                    <option value="FR" {% if current_filters.category == 'FR' %}selected{% endif %}>Flat Ride</option>
                    <option value="WR" {% if current_filters.category == 'WR' %}selected{% endif %}>Water Ride</option>
                    <option value="TR" {% if current_filters.category == 'TR' %}selected{% endif %}>Transport</option>
                    <option value="OT" {% if current_filters.category == 'OT' %}selected{% endif %}>Other</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                <select name="status"
                        class="form-select w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Statuses</option>
                    <option value="OPERATING" {% if current_filters.status == 'OPERATING' %}selected{% endif %}>Operating</option>
                    <option value="CLOSED_TEMP" {% if current_filters.status == 'CLOSED_TEMP' %}selected{% endif %}>Temporarily Closed</option>
                    <option value="CLOSED_PERM" {% if current_filters.status == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
                    <option value="UNDER_CONSTRUCTION" {% if current_filters.status == 'UNDER_CONSTRUCTION' %}selected{% endif %}>Under Construction</option>
                    <option value="DEMOLISHED" {% if current_filters.status == 'DEMOLISHED' %}selected{% endif %}>Demolished</option>
                    <option value="RELOCATED" {% if current_filters.status == 'RELOCATED' %}selected{% endif %}>Relocated</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Manufacturer</label>
                <select name="manufacturer"
                        class="form-select w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Manufacturers</option>
                    {% for manufacturer in manufacturers %}
                        <option value="{{ manufacturer }}" {% if current_filters.manufacturer == manufacturer %}selected{% endif %}>{{ manufacturer }}</option>
                    {% endfor %}
                </select>
            </div>
        </form>
    </div>

    <!-- Rides Grid -->
    <div id="rides-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% include 'rides/partials/ride_list.html' %}
    </div>
</div>
{% endblock %}