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

{% block title %}{{ area.name }} - {{ area.park.name }} - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto sm:px-6 lg:px-8">
    <!-- Breadcrumb -->
    <nav class="flex mb-4 text-sm" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li>
                <a href="{% url 'parks:park_detail' area.park.slug %}" 
                   class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                    {{ area.park.name }}
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="mx-2 text-gray-400 fas fa-chevron-right"></i>
                    <span class="text-gray-500 dark:text-gray-400">{{ area.name }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- Area Header -->
    <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-bold text-gray-900 lg:text-3xl dark:text-white">{{ area.name }}</h1>
            {% if user.is_authenticated %}
            <a href="#" class="transition-transform btn-secondary hover:scale-105">
                <i class="mr-1 fas fa-pencil-alt"></i>Edit
            </a>
            {% endif %}
        </div>

        {% if area.description %}
        <div class="prose dark:prose-invert max-w-none">
            {{ area.description|linebreaks }}
        </div>
        {% endif %}

        {% if area.opening_date or area.closing_date %}
        <div class="mt-4 space-y-2">
            {% if area.opening_date %}
            <div class="flex items-center text-gray-600 dark:text-gray-400">
                <i class="mr-2 fas fa-calendar-plus"></i>
                <span>Opened: {{ area.opening_date }}</span>
            </div>
            {% endif %}
            {% if area.closing_date %}
            <div class="flex items-center text-gray-600 dark:text-gray-400">
                <i class="mr-2 fas fa-calendar-minus"></i>
                <span>Closed: {{ area.closing_date }}</span>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Rides in this Area -->
    {% if area.rides.exists %}
    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Rides & Attractions</h2>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {% for ride in area.rides.all %}
            <div class="p-4 transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                <a href="{% url 'parks:rides:ride_detail' area.park.slug ride.slug %}" class="block">
                    <h3 class="mb-1 font-semibold text-gray-900 dark:text-white">{{ ride.name }}</h3>
                    <span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
                        {{ ride.get_category_display }}
                    </span>
                    {% if ride.average_rating %}
                    <span class="flex items-center text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
                        <span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
                        {{ ride.average_rating|floatformat:1 }}/10
                    </span>
                    {% endif %}
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <p class="text-gray-500 dark:text-gray-400">No rides or attractions listed in this area yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}