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

{% block title %}{{ ride.name }} at {{ ride.park.name }} - ThrillWiki{% endblock %}

{% block content %}
<div class="container mx-auto px-4">
    <!-- Header -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-3xl font-bold mb-2">{{ ride.name }}</h1>
                <p class="text-gray-600 dark:text-gray-400 mb-2">
                    at <a href="{{ ride.park.get_absolute_url }}" class="text-blue-500 hover:text-blue-600">
                        {{ ride.park.name }}
                    </a>
                    {% if ride.area %}
                        - {{ ride.area.name }}
                    {% endif %}
                </p>
                <div class="flex flex-wrap gap-2 mt-3">
                    <span class="px-3 py-1 rounded-full text-sm 
                        {% if ride.status == 'OPERATING' %}bg-green-100 text-green-800
                        {% elif ride.status == 'CLOSED' %}bg-red-100 text-red-800
                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ ride.get_status_display }}
                    </span>
                    <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm">
                        {{ ride.get_category_display }}
                    </span>
                    {% if ride.average_rating %}
                        <span class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 text-sm flex items-center">
                            <span class="text-yellow-500 mr-1">★</span>
                            {{ ride.average_rating|floatformat:1 }}/10
                        </span>
                    {% endif %}
                </div>
            </div>
            {% if user.is_authenticated %}
                <div class="flex gap-2">
                    <button class="btn-secondary">
                        <i class="fas fa-edit mr-2"></i>
                        Edit
                    </button>
                    <button class="btn-secondary">
                        <i class="fas fa-history mr-2"></i>
                        History
                    </button>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Photos Grid -->
    {% if ride.photos.exists %}
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4">Photos</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {% for photo in ride.photos.all %}
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="{{ photo.image.url }}" 
                             alt="{{ photo.caption|default:ride.name }}"
                             class="object-cover rounded-lg">
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Description and Details -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                <h2 class="text-xl font-semibold mb-4">About</h2>
                <div class="prose dark:prose-invert max-w-none">
                    {{ ride.description|linebreaks }}
                </div>
            </div>

            {% if ride.previous_names %}
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                    <h2 class="text-xl font-semibold mb-4">Previous Names</h2>
                    <div class="space-y-2">
                        {% for name_history in ride.previous_names %}
                            <div class="flex justify-between">
                                <span>{{ name_history.name }}</span>
                                <span class="text-gray-500">{{ name_history.period }}</span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if coaster_stats %}
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                    <h2 class="text-xl font-semibold mb-4">Roller Coaster Statistics</h2>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        {% if coaster_stats.height_ft %}
                            <div>
                                <span class="text-gray-500 block">Height</span>
                                <span class="text-2xl font-bold">{{ coaster_stats.height_ft }} ft</span>
                            </div>
                        {% endif %}
                        {% if coaster_stats.length_ft %}
                            <div>
                                <span class="text-gray-500 block">Length</span>
                                <span class="text-2xl font-bold">{{ coaster_stats.length_ft }} ft</span>
                            </div>
                        {% endif %}
                        {% if coaster_stats.speed_mph %}
                            <div>
                                <span class="text-gray-500 block">Speed</span>
                                <span class="text-2xl font-bold">{{ coaster_stats.speed_mph }} mph</span>
                            </div>
                        {% endif %}
                        <div>
                            <span class="text-gray-500 block">Inversions</span>
                            <span class="text-2xl font-bold">{{ coaster_stats.inversions }}</span>
                        </div>
                        {% if coaster_stats.ride_time_seconds %}
                            <div>
                                <span class="text-gray-500 block">Ride Duration</span>
                                <span class="text-2xl font-bold">{{ coaster_stats.ride_time_seconds }} sec</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Right Column - Quick Facts -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                <h2 class="text-xl font-semibold mb-4">Quick Facts</h2>
                <dl class="space-y-4">
                    <div>
                        <dt class="text-gray-500">Manufacturer</dt>
                        <dd>{{ ride.manufacturer }}</dd>
                    </div>
                    {% if ride.model_name %}
                        <div>
                            <dt class="text-gray-500">Model</dt>
                            <dd>{{ ride.model_name }}</dd>
                        </div>
                    {% endif %}
                    {% if ride.opening_date %}
                        <div>
                            <dt class="text-gray-500">Opening Date</dt>
                            <dd>{{ ride.opening_date }}</dd>
                        </div>
                    {% endif %}
                    {% if ride.status_since %}
                        <div>
                            <dt class="text-gray-500">Status Since</dt>
                            <dd>{{ ride.status_since }}</dd>
                        </div>
                    {% endif %}
                    {% if ride.closing_date %}
                        <div>
                            <dt class="text-gray-500">Closing Date</dt>
                            <dd>{{ ride.closing_date }}</dd>
                        </div>
                    {% endif %}
                    {% if ride.capacity_per_hour %}
                        <div>
                            <dt class="text-gray-500">Capacity</dt>
                            <dd>{{ ride.capacity_per_hour }} riders/hour</dd>
                        </div>
                    {% endif %}
                    {% if ride.minimum_height %}
                        <div>
                            <dt class="text-gray-500">Minimum Height</dt>
                            <dd>{{ ride.minimum_height }} inches</dd>
                        </div>
                    {% endif %}
                </dl>
            </div>

            {% if ride.other_details %}
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                    <h2 class="text-xl font-semibold mb-4">Additional Details</h2>
                    <dl class="space-y-4">
                        {% for key, value in ride.other_details.items %}
                            <div>
                                <dt class="text-gray-500">{{ key }}</dt>
                                <dd>{{ value }}</dd>
                            </div>
                        {% endfor %}
                    </dl>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Reviews Section -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mt-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold">Reviews</h2>
            {% if user.is_authenticated %}
                <button class="btn-primary">
                    <i class="fas fa-star mr-2"></i>
                    Write a Review
                </button>
            {% endif %}
        </div>
        
        {% if ride.reviews.exists %}
            <div class="space-y-4">
                {% for review in ride.reviews.all %}
                    <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="font-semibold">{{ review.title }}</h3>
                                <p class="text-sm text-gray-500">
                                    by {{ review.user.username }} on {{ review.created_at|date }}
                                </p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-yellow-400 mr-1">★</span>
                                <span>{{ review.rating }}/10</span>
                            </div>
                        </div>
                        <p class="mt-2">{{ review.content }}</p>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="text-gray-500">No reviews yet. Be the first to review this ride!</p>
        {% endif %}
    </div>
</div>
{% endblock %}
