{% extends "main.html" %} {% load markdown_deux_tags %} {% load markdownify %}
{% block content %}
<section class="max-w-6xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-6">Document View</h1>
    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="p-6">
            <div class="flex flex-col lg:flex-row gap-8">
                <div class="w-full lg:w-1/2">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">
                        {{ document.title }}
                    </h2>
                    <div class="mb-4">
                        <table class="w-full text-sm">
                            <tr>
                                <td class="font-medium pr-4">Status:</td>
                                <td>
                                    <span
                                        class="px-3 py-1 text-sm font-medium rounded-full {% if document.status == 'pending' %} bg-gray-200 text-gray-800 {% elif document.status == 'processing' %} bg-blue-200 text-blue-800 {% elif document.status == 'done' %} bg-green-200 text-green-800 {% elif document.status == 'error' %} bg-red-200 text-red-800 {% endif %}"
                                    >
                                        {{ document.status|title }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="font-medium pr-4">Created:</td>
                                <td class="text-gray-600">
                                    {{ document.created_at|date:"d/m/Y H:i:s" }}
                                </td>
                            </tr>
                            <tr>
                                <td class="font-medium pr-4">Updated:</td>
                                <td class="text-gray-600">
                                    {{ document.updated_at|date:"d/m/Y H:i:s" }}
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="prose max-w-full">
                        <div class="flex justify-between items-center mb-3">
                            <h3 class="text-xl font-semibold text-gray-800">
                                Content:
                            </h3>
                            <button
                                id="copyButton"
                                class="bg-gray-200 text-gray-700 px-3 py-1 rounded-md hover:bg-gray-300 transition duration-300 flex items-center text-sm"
                            >
                                <svg
                                    class="w-4 h-4 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                                    ></path>
                                </svg>
                                Copy to Clipboard
                            </button>
                        </div>
                        <div
                            id="markdown-rendered"
                            class="bg-gray-50 p-4 rounded-md"
                        >
                            {{ markup|safe }}
                        </div>
                        <div id="markdown-content" class="hidden">
                            {{ document.content}}
                        </div>
                    </div>
                    <div class="mt-8 flex space-x-4">
                        <a
                            href="{% url 'download_document' document.id %}"
                            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300 flex items-center"
                        >
                            <svg
                                class="w-5 h-5 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                                ></path>
                            </svg>
                            Export
                        </a>
                        <form
                            action="{% url 'delete_document' document.id %}"
                            method="post"
                            onsubmit="return confirm('Are you sure you want to delete this document?');"
                        >
                            {% csrf_token %}
                            <button
                                type="submit"
                                class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition duration-300 flex items-center"
                            >
                                <svg
                                    class="w-5 h-5 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <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"
                                    ></path>
                                </svg>
                                Delete
                            </button>
                        </form>
                    </div>
                </div>
                <div class="w-full lg:w-1/2">
                    <div class="bg-gray-100 rounded-lg overflow-hidden">
                        <img
                            src="{% url 'document_image' pk=document.id %}"
                            alt="{{ document.title }}"
                            class="w-full h-auto object-contain"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="max-w-6xl mx-auto px-4 py-4">
    <a
        href="{% url 'dashboard' %}"
        class="text-blue-600 hover:text-blue-800 flex items-center"
    >
        <svg
            class="w-5 h-5 mr-2"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
            ></path>
        </svg>
        Back to Dashboard
    </a>
</section>
{% endblock %} {% block extra_js %}
<script>
    document.addEventListener("DOMContentLoaded", (event) => {
        // Syntax highlighting
        document
            .querySelectorAll("#markdown-content pre code")
            .forEach((block) => {
                hljs.highlightElement(block);
            });

        // Copy to clipboard functionality
        const copyButton = document.getElementById("copyButton");
        const markdownContent = document.getElementById("markdown-content");

        copyButton.addEventListener("click", () => {
            const textToCopy = markdownContent.innerText;
            navigator.clipboard
                .writeText(textToCopy)
                .then(() => {
                    copyButton.textContent = "Copied!";
                    copyButton.classList.remove("bg-gray-200", "text-gray-700");
                    copyButton.classList.add("bg-green-500", "text-white");
                    setTimeout(() => {
                        copyButton.innerHTML =
                            '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy to Clipboard';
                        copyButton.classList.remove(
                            "bg-green-500",
                            "text-white",
                        );
                        copyButton.classList.add(
                            "bg-gray-200",
                            "text-gray-700",
                        );
                    }, 2000);
                })
                .catch((err) => {
                    console.error("Failed to copy text: ", err);
                });
        });
    });
</script>
{% endblock %}