thrillwiki_django_no_react/templates/parks/park_detail.html

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

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

{% block extra_head %}
{% if park.latitude and park.longitude %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endif %}
{% endblock %}

{% block content %}
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('photoUploadModal', () => ({
            show: false,
            editingPhoto: { caption: '' }
        }))
    })
</script>

<div class="container px-4 mx-auto">
    <!-- Action Buttons - Above header -->
    {% if user.is_authenticated %}
    <div class="flex justify-end gap-2 mb-2">
        <a href="{% url 'parks:park_update' park.slug %}" 
           class="transition-transform btn-secondary hover:scale-105">
            <i class="mr-1 fas fa-pencil-alt"></i>Edit
        </a>
        {% if perms.media.add_photo %}
        <button class="transition-transform btn-secondary hover:scale-105" 
                @click="$dispatch('show-photo-upload')">
            <i class="mr-1 fas fa-camera"></i>Upload Photo
        </button>
        {% endif %}
    </div>
    {% endif %}

    <!-- Header Grid -->
    <div class="grid gap-2 mb-12 sm:mb-16 md:mb-8 grid-cols-1 sm:grid-cols-12 h-auto md:h-[140px]">
        <!-- Park Info Card -->
        <div class="flex flex-col items-center justify-center h-full col-span-1 p-2 text-center bg-white rounded-lg shadow-lg sm:col-span-3 dark:bg-gray-800">
            <h1 class="text-2xl font-bold leading-tight text-gray-900 sm:text-3xl dark:text-white">{{ park.name }}</h1>
            
            {% if park.formatted_location %}
            <div class="flex items-center justify-center mt-0.5 text-sm text-gray-600 dark:text-gray-400">
                <i class="mr-1 fas fa-map-marker-alt"></i>
                <p>{{ park.formatted_location }}</p>
            </div>
            {% endif %}

            <div class="flex flex-wrap items-center justify-center gap-1 mt-1">
                <span class="status-badge text-xs sm:text-sm font-medium py-0.5 {% if park.status == 'OPERATING' %}status-operating
                           {% elif park.status == 'CLOSED_TEMP' or park.status == 'CLOSED_PERM' %}status-closed
                           {% elif park.status == 'UNDER_CONSTRUCTION' %}status-construction
                           {% elif park.status == 'DEMOLISHED' %}status-demolished
                           {% elif park.status == 'RELOCATED' %}status-relocated{% endif %}">
                    {{ park.get_status_display }}
                </span>
                {% if park.average_rating %}
                <span class="flex items-center text-xs font-medium text-yellow-800 bg-yellow-100 sm:text-sm status-badge py-0.5 dark:bg-yellow-600 dark:text-yellow-50">
                    <span class="mr-0.5 text-yellow-500 dark:text-yellow-200">★</span>
                    {{ park.average_rating|floatformat:1 }}/10
                </span>
                {% endif %}
            </div>
        </div>

        <!-- Stats and Quick Facts -->
        <div class="grid h-full grid-cols-12 col-span-1 gap-2 sm:col-span-9">
            <!-- Stats Column -->
            <div class="grid-cols-2 col-span-12 gap-2 text-sky-400grid sm:grid-cols-1 md:grid-cols-2 sm:col-span-4">
                <!-- Total Rides Card -->
                {% if park.total_rides %}
                <a href="{% url 'parks:rides:ride_list' park.slug %}" 
                   class="flex flex-col items-center justify-center p-2 text-center transition-transform bg-white rounded-lg shadow-lg hover:scale-[1.02] dark:bg-gray-800">
                    <dt class="text-sm font-semibold text-gray-900 sm:text-base dark:text-white">Total Rides</dt>
                    <dd class="mt-0.5 text-xl font-bold text-sky-900 hover:text-sky-800 sm:text-2xl dark:text-sky-400 dark:hover:text-sky-300">{{ park.total_rides }}</dd>
                </a>
                {% endif %}

                <!-- Total Roller Coasters Card -->
                {% if park.total_roller_coasters %}
                <div class="flex flex-col items-center justify-center p-2 text-center bg-white rounded-lg shadow-lg dark:bg-gray-800">
                    <dt class="text-sm font-semibold text-gray-900 sm:text-base dark:text-white">Roller Coasters</dt>
                    <dd class="mt-0.5 text-xl font-bold text-sky-900 hover:text-sky-800 sm:text-2xl dark:text-sky-400 dark:hover:text-sky-300">{{ park.total_roller_coasters }}</dd>
                </div>
                {% endif %}
            </div>

            <!-- Quick Facts Grid -->
            <div class="grid h-full grid-cols-3 col-span-12 gap-1 p-1.5 bg-white rounded-lg shadow-lg sm:col-span-8 dark:bg-gray-800">
                {% if park.owner %}
                <div class="flex flex-col items-center justify-center text-center p-0.5">
                    <i class="text-sm text-blue-600 sm:text-base fas fa-building dark:text-blue-400"></i>
                    <dt class="font-medium text-gray-500 text-2xs dark:text-gray-400">Owner</dt>
                    <dd>
                        <a href="{% url 'companies:company_detail' park.owner.slug %}" 
                           class="text-blue-600 text-2xs sm:text-xs hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                            {{ park.owner.name }}
                        </a>
                    </dd>
                </div>
                {% endif %}

                {% if park.opening_date %}
                <div class="flex flex-col items-center justify-center text-center p-0.5">
                    <i class="text-sm text-blue-600 sm:text-base fas fa-calendar-alt dark:text-blue-400"></i>
                    <dt class="font-medium text-gray-500 text-2xs dark:text-gray-400">Opened</dt>
                    <dd class="text-gray-900 text-2xs sm:text-xs dark:text-white">{{ park.opening_date }}</dd>
                </div>
                {% endif %}

                {% if park.website %}
                <div class="flex flex-col items-center justify-center text-center p-0.5">
                    <i class="text-sm text-blue-600 sm:text-base fas fa-globe dark:text-blue-400"></i>
                    <dt class="font-medium text-gray-500 text-2xs dark:text-gray-400">Website</dt>
                    <dd>
                        <a href="{{ park.website }}" 
                           class="inline-flex items-center text-blue-600 text-2xs sm:text-xs hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                           target="_blank" rel="noopener noreferrer">
                            Visit
                            <i class="ml-0.5 text-2xs fas fa-external-link-alt"></i>
                        </a>
                    </dd>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Photos Section -->
    {% if park.photos.exists %}
        <div class="p-6 mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Photos</h2>
            {% include "media/partials/photo_display.html" with photos=park.photos.all content_type="parks.park" object_id=park.id %}
        </div>
    {% endif %}

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

            <!-- Rides and Attractions -->
            <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Rides & Attractions</h2>
                    <a href="{% url 'parks:rides:ride_list' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                        View All
                    </a>
                </div>
                {% if park.rides.exists %}
                    <div class="grid gap-4 md:grid-cols-2">
                        {% for ride in park.rides.all|slice:":6" %}
                            <div class="p-4 transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                                <a href="{% url 'parks:rides:ride_detail' 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>
                {% else %}
                    <p class="text-gray-500 dark:text-gray-400">No rides or attractions listed yet.</p>
                {% endif %}
            </div>
        </div>

        <!-- Right Column - Map and Additional Info -->
        <div class="lg:col-span-1">
            <!-- Location Map -->
            {% if park.latitude and park.longitude %}
                <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                    <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"></div>
                </div>
            {% endif %}

            <!-- History Panel -->
            <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">History</h2>
                <div class="space-y-4">
                    {% for record in history %}
                        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                {{ record.history_date|date:"M d, Y H:i" }}
                                {% if record.history_user %}
                                    by {{ record.history_user.username }}
                                {% endif %}
                            </div>
                            <div class="mt-2">
                                {% for field, changes in record.diff_against_previous.items %}
                                    {% if field != "updated_at" %}
                                        <div class="text-sm">
                                            <span class="font-medium">{{ field|title }}:</span>
                                            <span class="text-red-600 dark:text-red-400">{{ changes.old }}</span>
                                            <span class="mx-1">→</span>
                                            <span class="text-green-600 dark:text-green-400">{{ changes.new }}</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-gray-500">No history available.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

<!-- Photo Upload Modal -->
{% if perms.media.add_photo %}
    <div x-cloak
         x-data="{
            show: false,
            editingPhoto: null,
            init() {
                this.editingPhoto = { caption: '' };
            }
         }"
         @show-photo-upload.window="show = true; init()"
         x-show="show"
         class="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-50"
         @click.self="show = false">
        <div class="w-full max-w-2xl p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Upload Photos</h3>
                <button @click="show = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
                    <i class="text-xl fas fa-times"></i>
                </button>
            </div>
            {% include "media/partials/photo_upload.html" with content_type="parks.park" object_id=park.id %}
        </div>
    </div>
{% endif %}

{% if park.latitude and park.longitude %}
    {% block extra_js %}
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="{% static 'js/park-map.js' %}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initParkMap({{ park.latitude }}, {{ park.longitude }}, "{{ park.name }}");
        });
    </script>
    {% endblock %}
{% endif %}

{% endblock %}