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

{% block wiki_contents_tab %}
<div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-6">{% trans "Park Metadata" %}</h2>

    <form method="POST" class="space-y-6">
        {% csrf_token %}
        
        <!-- Basic Information -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Basic Information" %}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-group">
                    {{ form.operator.label_tag }}
                    {{ form.operator }}
                    {{ form.operator.errors }}
                </div>
                <div class="form-group">
                    {{ form.owner.label_tag }}
                    {{ form.owner }}
                    {{ form.owner.errors }}
                </div>
                <div class="form-group">
                    {{ form.opened_date.label_tag }}
                    {{ form.opened_date }}
                    {{ form.opened_date.errors }}
                </div>
                <div class="form-group">
                    {{ form.park_size.label_tag }}
                    {{ form.park_size }}
                    {{ form.park_size.errors }}
                </div>
            </div>
        </div>

        <!-- Location Information -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Location" %}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-group">
                    {{ form.latitude.label_tag }}
                    {{ form.latitude }}
                    {{ form.latitude.errors }}
                </div>
                <div class="form-group">
                    {{ form.longitude.label_tag }}
                    {{ form.longitude }}
                    {{ form.longitude.errors }}
                </div>
                <div class="form-group col-span-2">
                    {{ form.address.label_tag }}
                    {{ form.address }}
                    {{ form.address.errors }}
                </div>
            </div>
        </div>

        <!-- Operating Information -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Operating Information" %}</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="form-group">
                    {{ form.seasonal.label_tag }}
                    {{ form.seasonal }}
                    {{ form.seasonal.errors }}
                </div>
                <div class="form-group">
                    {{ form.season_start.label_tag }}
                    {{ form.season_start }}
                    {{ form.season_start.errors }}
                </div>
                <div class="form-group">
                    {{ form.season_end.label_tag }}
                    {{ form.season_end }}
                    {{ form.season_end.errors }}
                </div>
            </div>
        </div>

        <!-- Attractions -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Attractions" %}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-group">
                    {{ form.total_rides.label_tag }}
                    {{ form.total_rides }}
                    {{ form.total_rides.errors }}
                </div>
                <div class="form-group">
                    {{ form.total_roller_coasters.label_tag }}
                    {{ form.total_roller_coasters }}
                    {{ form.total_roller_coasters.errors }}
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Contact Information" %}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-group">
                    {{ form.phone.label_tag }}
                    {{ form.phone }}
                    {{ form.phone.errors }}
                </div>
                <div class="form-group">
                    {{ form.email.label_tag }}
                    {{ form.email }}
                    {{ form.email.errors }}
                </div>
                <div class="form-group">
                    {{ form.website.label_tag }}
                    {{ form.website }}
                    {{ form.website.errors }}
                </div>
            </div>
        </div>

        <!-- Social Media -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Social Media" %}</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="form-group">
                    {{ form.facebook.label_tag }}
                    {{ form.facebook }}
                    {{ form.facebook.errors }}
                </div>
                <div class="form-group">
                    {{ form.twitter.label_tag }}
                    {{ form.twitter }}
                    {{ form.twitter.errors }}
                </div>
                <div class="form-group">
                    {{ form.instagram.label_tag }}
                    {{ form.instagram }}
                    {{ form.instagram.errors }}
                </div>
            </div>
        </div>

        <!-- Additional Information -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-lg font-semibold mb-4">{% trans "Additional Information" %}</h3>
            <div class="space-y-4">
                <div class="form-group">
                    {{ form.amenities_text.label_tag }}
                    {{ form.amenities_text }}
                    {{ form.amenities_text.errors }}
                    <p class="text-sm text-gray-600 mt-1">{{ form.amenities_text.help_text }}</p>
                </div>
                <div class="form-group">
                    {{ form.ticket_info_text.label_tag }}
                    {{ form.ticket_info_text }}
                    {{ form.ticket_info_text.errors }}
                    <p class="text-sm text-gray-600 mt-1">{{ form.ticket_info_text.help_text }}</p>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end space-x-4">
            <a href="{% url 'wiki:get' path=article.get_absolute_url %}" 
               class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                {% trans "Cancel" %}
            </a>
            <button type="submit" 
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                {% trans "Save Changes" %}
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block wiki_footer_script %}
{{ block.super }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle seasonal checkbox toggling season dates
        const seasonalCheckbox = document.getElementById('id_seasonal');
        const seasonStartInput = document.getElementById('id_season_start');
        const seasonEndInput = document.getElementById('id_season_end');

        function toggleSeasonDates() {
            const isDisabled = !seasonalCheckbox.checked;
            seasonStartInput.disabled = isDisabled;
            seasonEndInput.disabled = isDisabled;
        }

        if (seasonalCheckbox) {
            toggleSeasonDates();
            seasonalCheckbox.addEventListener('change', toggleSeasonDates);
        }
    });
</script>
{% endblock %}