{% extends "wiki/base.html" %}
{% load wiki_tags %}
{% load static %}

{% block wiki_header_title %}
    {{ article.current_revision.title }}
{% endblock %}

{% block wiki_content %}
<article class="ride-article">
    <!-- Ride Header -->
    <div class="mb-8">
        {% if article.image %}
        <div class="mb-4">
            <img src="{{ article.image.url }}" alt="{{ article.current_revision.title }}"
                 class="w-full h-64 object-cover rounded-lg shadow-md">
        </div>
        {% endif %}
        
        <!-- Ride Quick Info -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-50 p-4 rounded-lg">
            {% if article.metadata.park %}
            <div class="ride-info-item">
                <span class="text-gray-600 font-medium">Park:</span>
                <a href="{{ article.metadata.park.get_absolute_url }}" 
                   class="text-blue-600 hover:text-blue-800">
                    {{ article.metadata.park.name }}
                </a>
            </div>
            {% endif %}
            
            {% if article.metadata.opened %}
            <div class="ride-info-item">
                <span class="text-gray-600 font-medium">Opened:</span>
                <span class="text-gray-900">{{ article.metadata.opened }}</span>
            </div>
            {% endif %}
            
            {% if article.metadata.manufacturer %}
            <div class="ride-info-item">
                <span class="text-gray-600 font-medium">Manufacturer:</span>
                <span class="text-gray-900">{{ article.metadata.manufacturer }}</span>
            </div>
            {% endif %}
            
            {% if article.metadata.type %}
            <div class="ride-info-item">
                <span class="text-gray-600 font-medium">Type:</span>
                <span class="text-gray-900">{{ article.metadata.type }}</span>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Ride Content -->
    <div class="ride-content prose max-w-none">
        {{ article.render|safe }}
    </div>

    <!-- Technical Specifications -->
    {% if article.metadata.specs %}
    <div class="mt-8 bg-gray-50 rounded-lg p-6">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Technical Specifications</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {% for spec, value in article.metadata.specs.items %}
            <div class="spec-item">
                <span class="text-gray-600 font-medium">{{ spec|title }}:</span>
                <span class="text-gray-900">{{ value }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Records and Statistics -->
    {% if article.metadata.records %}
    <div class="mt-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Records & Achievements</h2>
        <div class="bg-white rounded-lg shadow-md p-6">
            <ul class="space-y-3">
                {% for record in article.metadata.records %}
                <li class="flex items-start">
                    <svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>{{ record }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}
</article>
{% endblock %}

{% block wiki_sidebar %}
{{ block.super }}
<!-- Additional ride-specific sidebar content -->
<div class="mt-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-3">Quick Links</h3>
    <ul class="space-y-2">
        <li><a href="#specifications" class="text-gray-600 hover:text-blue-600">Specifications</a></li>
        <li><a href="#history" class="text-gray-600 hover:text-blue-600">History</a></li>
        <li><a href="#experience" class="text-gray-600 hover:text-blue-600">Ride Experience</a></li>
        <li><a href="#records" class="text-gray-600 hover:text-blue-600">Records</a></li>
    </ul>
</div>

<!-- Related Rides -->
{% if article.related_articles.similar_rides %}
<div class="mt-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-3">Similar Rides</h3>
    <ul class="space-y-2">
        {% for ride in article.related_articles.similar_rides %}
        <li>
            <a href="{{ ride.get_absolute_url }}" 
               class="text-gray-600 hover:text-blue-600">
                {{ ride.title }}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}
{% endblock %}