{% 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;
    }
    .modal.show {
        display: flex;
    }
    .modal-content {
        background: white;
        border-radius: 0.5rem;
        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);
    }
</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 Newsletter" %}
            </h3>
            <p class="mt-2 text-sm text-gray-500">
                {% trans "Are you sure you want to delete this newsletter? This action cannot be undone." %}
            </p>
            <div class="mt-4 flex space-x-3">
                <form method="post" action="{% url 'newsletter-delete' newsletter.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-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        {% 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-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    {% trans "Cancel" %}
                </button>
            </div>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-start mb-6">
            <!-- Back Button -->
                <div class="mb-6">
                    <a href="{% url 'newsletter-list' %}"
                    class="inline-flex items-center p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md"
                    title="{% trans 'Back to List' %}">
                        <svg class="w-5 h-5" 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>
                        <span class="ml-1 text-sm">{% trans "Back to List" %}</span>
                    </a>
                </div>
                <!-- Action Buttons -->
                <div class="flex space-x-2">
                    <a href="{% url 'newsletter-update' newsletter.pk %}"
                       class="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md"
                       title="{% trans 'Edit Newsletter' %}">
                        <svg class="w-5 h-5" 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>
                    </a>
                    <a href="{% url 'public-newsletter' newsletter.pk %}"
                       target="_blank"
                       class="p-2 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-md"
                       title="{% trans 'Open Public View' %}">
                        <svg class="w-5 h-5" 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>
                    </a>
                    <button onclick="openDeleteModal()"
                            class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md"
                            title="{% trans 'Delete Newsletter' %}">
                        <svg class="w-5 h-5" 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>
                    </button>
                </div>
            </div>

            <!-- Title and Actions -->
            <div class="flex justify-between items-start mb-6">
                <!-- Title and Type -->
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">{{ newsletter.title }}</h1>
                    <div class="mt-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if newsletter.type == 'technology' %}bg-purple-100 text-purple-800
                            {% elif newsletter.type == 'world_news' %}bg-green-100 text-green-800
                            {% else %}bg-blue-100 text-blue-800{% endif %}">
                            {{ newsletter.get_type_display }}
                        </span>
                    </div>
                </div>


            </div>

            <!-- Metadata -->
            <div class="mb-6 text-sm text-gray-500">
                <div>{% trans "Created" %}: {{ newsletter.created_at|date:"Y-m-d H:i" }}</div>
                <div>{% trans "Last updated" %}: {{ newsletter.updated_at|date:"Y-m-d H:i" }}</div>
            </div>

            <!-- Content with improved markdown styling -->
            <article class="prose">
                {{ newsletter.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();
    }
});
</script>
{% endblock %}