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

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

{% block wiki_content %}
<article class="park-article">
    <!-- Park 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 %}
        
        <!-- Park 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.location %}
            <div class="park-info-item">
                <span class="text-gray-600 font-medium">Location:</span>
                <span class="text-gray-900">{{ article.metadata.location }}</span>
            </div>
            {% endif %}
            
            {% if article.metadata.opened %}
            <div class="park-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.operator %}
            <div class="park-info-item">
                <span class="text-gray-600 font-medium">Operator:</span>
                <span class="text-gray-900">{{ article.metadata.operator }}</span>
            </div>
            {% endif %}
        </div>
    </div>

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

    <!-- Featured Rides -->
    {% if article.related_articles.rides %}
    <div class="mt-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Featured Rides</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for ride in article.related_articles.rides %}
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                {% if ride.image %}
                <img src="{{ ride.image.url }}" alt="{{ ride.title }}"
                     class="w-full h-48 object-cover">
                {% endif %}
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <a href="{{ ride.get_absolute_url }}" class="hover:text-blue-600">
                            {{ ride.title }}
                        </a>
                    </h3>
                    <p class="text-gray-600 text-sm mt-2">
                        {{ ride.description|truncatewords:30 }}
                    </p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

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

{% block wiki_sidebar %}
{{ block.super }}
<!-- Additional park-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="#rides" class="text-gray-600 hover:text-blue-600">Rides</a></li>
        <li><a href="#attractions" class="text-gray-600 hover:text-blue-600">Attractions</a></li>
        <li><a href="#dining" class="text-gray-600 hover:text-blue-600">Dining</a></li>
        <li><a href="#hotels" class="text-gray-600 hover:text-blue-600">Hotels</a></li>
    </ul>
</div>
{% endblock %}