{% extends 'base.html' %}
{% load i18n %}
{% load markdown_extras %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/markdown.css' %}">
<style>
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 50;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }
    .modal.show {
        display: flex;
    }
    .modal-content {
        background: white;
        border-radius: 0.75rem;
        width: 100%;
        max-width: 28rem;
        margin: 1rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Think Panel Styles */
    .think-panel {
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        margin: 1rem 0;
        overflow: hidden;
    }

    .think-header {
        background-color: #f9fafb;
        padding: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
        color: #374151;
    }

    .think-header:hover {
        background-color: #f3f4f6;
    }

    .think-content {
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    }

    .think-content.expanded {
        padding: 1rem;
        max-height: 2000px; /* Adjust based on your needs */
        transition: max-height 0.5s ease-in, padding 0.3s ease-in;
    }

    .think-icon {
        transition: transform 0.3s ease;
    }

    .think-icon.expanded {
        transform: rotate(180deg);
    }
</style>
{% endblock %}

{% block content %}
<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="modal-content">
        <div class="p-6">
            <h3 class="text-lg font-medium text-gray-900" id="modal-title">
                {% trans "Delete Post" %}
            </h3>
            <p class="mt-2 text-sm text-gray-500">
                {% trans "Are you sure you want to delete this post? This action cannot be undone." %}
            </p>
            <div class="mt-6 flex space-x-3">
                <form method="post" action="{% url 'post-delete' post.pk %}">
                    {% csrf_token %}
                    <button type="submit"
                            class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150">
                        {% trans "Delete" %}
                    </button>
                </form>
                <button type="button"
                        onclick="closeDeleteModal()"
                        class="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
                    {% trans "Cancel" %}
                </button>
            </div>
        </div>
    </div>
</div>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white shadow-lg rounded-xl overflow-hidden">
        <!-- Header Section -->
        <div class="border-b border-gray-200">
            <div class="px-6 py-4">
                <!-- Navigation and Actions -->
                <div class="flex justify-between items-center mb-6">
                    <!-- Back Button -->
                    <a href="{% url 'post-list' %}"
                       class="inline-flex items-center px-3 py-2 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-lg transition duration-150">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                        </svg>
                        {% trans "Back to List" %}
                    </a>
                    
                    <!-- Action Buttons -->
                    <div class="flex items-center gap-2">
                        <a href="{% url 'post-update' post.pk %}"
                           class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition duration-150">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                            {% trans "Edit" %}
                        </a>
                        <a href="{% url 'public-post' post.pk %}"
                           target="_blank"
                           class="inline-flex items-center px-3 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-lg hover:bg-green-100 transition duration-150">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                            {% trans "Share" %}
                        </a>
                        <button onclick="openDeleteModal()"
                                class="inline-flex items-center px-3 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition duration-150">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                            {% trans "Delete" %}
                        </button>
                    </div>
                </div>

                <!-- Title and Metadata -->
                <div class="space-y-4">
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">{{ post.title }}</h1>
                    
                    {% if post.summary %}
                    <div class="relative pl-4 border-l-4 border-gray-200">
                        <p class="text-lg text-gray-600 italic">{{ post.summary }}</p>
                    </div>
                    {% endif %}

                    <!-- Tags -->
                    {% if post.tags.exists %}
                    <div class="flex flex-wrap gap-2">
                        {% for tag in post.tags.all %}
                        {% with number=forloop.counter %}
                        <a href="{% url 'tag-detail' tag.slug %}" 
                           class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition duration-150 {% if number|divisibleby:10 %}tag-10{% elif number|divisibleby:9 %}tag-9{% elif number|divisibleby:8 %}tag-8{% elif number|divisibleby:7 %}tag-7{% elif number|divisibleby:6 %}tag-6{% elif number|divisibleby:5 %}tag-5{% elif number|divisibleby:4 %}tag-4{% elif number|divisibleby:3 %}tag-3{% elif number|divisibleby:2 %}tag-2{% else %}tag-1{% endif %}">
                            {{ tag.name }}
                        </a>
                        {% endwith %}
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Timestamps -->
                    <div class="flex flex-wrap gap-4 text-sm text-gray-500">
                        <time datetime="{{ post.created_at|date:'Y-m-d H:i' }}" class="flex items-center">
                            <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            {% trans "Created" %}: {{ post.created_at|date:"Y-m-d H:i" }}
                        </time>
                        <time datetime="{{ post.updated_at|date:'Y-m-d H:i' }}" class="flex items-center">
                            <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            {% trans "Updated" %}: {{ post.updated_at|date:"Y-m-d H:i" }}
                        </time>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content Section -->
        <div class="px-6 py-6">
            <article class="prose max-w-none">
                {{ post.content|markdown|safe }}
            </article>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function openDeleteModal() {
    document.getElementById('deleteModal').classList.add('show');
    document.body.style.overflow = 'hidden';
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('show');
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeDeleteModal();
    }
});

// Think Panel functionality
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.think-header').forEach(header => {
        header.addEventListener('click', function() {
            const panel = this.parentElement;
            const content = panel.querySelector('.think-content');
            const icon = panel.querySelector('.think-icon');
            
            content.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        });
    });
});
</script>
{% endblock %}