PenParse/penparse/webui/templates/document.html

{% 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" }}</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" }}</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">
              {{ document.content|markdown }}
            </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 %}