{% extends "base_wiki.html" %}
{% load static %}
{% load sekizai_tags %}
{% load wiki_tags %}

{% block wiki_body %}
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-wrap -mx-4">
        <!-- Sidebar -->
        <div class="w-full lg:w-1/4 px-4 mb-8 lg:mb-0">
            <div class="bg-white rounded-lg shadow-md p-6">
                {% block wiki_sidebar %}
                <div class="space-y-4">
                    {% wiki_sidebar %}
                </div>
                {% endblock %}
            </div>
        </div>

        <!-- Main Content -->
        <div class="w-full lg:w-3/4 px-4">
            <div class="bg-white rounded-lg shadow-md p-6">
                {% if messages %}
                <div class="messages mb-6">
                    {% for message in messages %}
                    <div class="p-4 mb-4 rounded-lg {% if message.tags == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">
                        {{ message }}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Article Title -->
                {% block wiki_page_header %}
                <div class="border-b border-gray-200 pb-4 mb-6">
                    <h1 class="text-3xl font-bold text-gray-900">
                        {% block wiki_header_title %}{% endblock %}
                    </h1>
                    {% block wiki_header_actions %}{% endblock %}
                </div>
                {% endblock %}

                <!-- Article Content -->
                {% block wiki_contents %}
                <div class="prose max-w-none">
                    {% block wiki_content %}{% endblock %}
                </div>
                {% endblock %}
            </div>
        </div>
    </div>
</div>

<!-- Footer Actions -->
{% block wiki_footer_actions %}
<div class="container mx-auto px-4 py-4">
    <div class="flex justify-end space-x-4">
        {% if article|can_write:user %}
        <a href="{% url 'wiki:edit' article.id %}" 
           class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            Edit Article
        </a>
        {% endif %}
        {% if article|can_delete:user %}
        <a href="{% url 'wiki:delete' article.id %}" 
           class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
            Delete Article
        </a>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block wiki_footer %}
{% endblock %}
{% endblock %}

{% block wiki_scripts %}
{% addtoblock "js" %}
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        // Add Tailwind classes to wiki-generated content
        const wikiContent = document.querySelector('.wiki-article');
        if (wikiContent) {
            // Add prose styling to article content
            wikiContent.classList.add('prose', 'max-w-none');

            // Style tables
            wikiContent.querySelectorAll('table').forEach(table => {
                table.classList.add('min-w-full', 'divide-y', 'divide-gray-200');
            });

            // Style links
            wikiContent.querySelectorAll('a').forEach(link => {
                link.classList.add('text-blue-600', 'hover:text-blue-800');
            });
        }
    });
</script>
{% endaddtoblock %}
{% endblock %}