{% extends "main.html" %} 
{% load markdown_deux_tags %}
{% block content %}
<section class="mb-16">
  <h1 class="text-4xl font-bold text-gray-800 mb-4">Your Dashboard</h1>
  <p class="text-xl text-gray-600 mb-8">
    View and manage your analyzed documents
  </p>

  <div class="mb-8">
    <a href="{% url 'settings' %}" class="text-blue-500 hover:text-blue-600"
      >Go to Settings</a
    >
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for document in documents %}
<div
      class="bg-white p-6 rounded-lg shadow border-2 border-dotted border-gray-300"
    >
      <img
        src="{% url 'document_thumbnail' pk=document.id %}"
        alt="{{ document.title }} thumbnail"
        class="w-full h-48 object-cover mb-4 rounded"
      />
        <div class="flex justify-between items-center mb-2">
          <h3 class="text-xl font-semibold">{{ document.title }}</h3>
          <span
            class="px-2 py-1 text-xs font-semibold 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>
        </div>
      <p class="text-gray-600 mb-4">
        Created: {{ document.created_at }}
      </p>
      <p class="text-gray-600 mb-4">
        Last Updated: {{ document.updated_at }}
      </p>
  {% if document.content %}
  <div class="text-gray-700 mb-4">
    <h4 class="font-semibold mb-2">Content Preview:</h4>
    <div class="prose prose-sm">
      {{ document.content|truncatechars_html:100|markdown }}
      </div>
    </div>
  {% endif %}
  <div class="flex justify-between items-center">
    <a
      href="{% url 'view_document' document.id %}"
      class="text-blue-500 hover:text-blue-600"
      >View</a
    >
    <a
      href="{% url 'download_document' document.id %}"
      class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300"
      >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-500 text-white px-4 py-2 rounded hover:bg-red-600 transition duration-300"
      >
        Delete
      </button>
    </form>
  </div>
</div>
    {% empty %}
    <p class="col-span-full text-center text-gray-600">
      You haven't uploaded any documents yet.
    </p>
    {% endfor %}
  </div>
</section>
<section class="text-center">
  <h2 class="text-3xl font-bold text-gray-800 mb-6">Upload a New Document</h2>
  <form
    action="{% url 'upload_document' %}"
    method="post"
    enctype="multipart/form-data"
  >
    {% csrf_token %}
    <div class="mb-4">
      <input
        type="file"
        name="document"
        id="document"
        class="hidden"
        accept=".png,.jpg,.jpeg"
      />
      <label
        for="document"
        class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300 cursor-pointer inline-block"
      >
        Choose File
      </label>
    </div>
    <button
      type="submit"
      class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300"
    >
      Upload Document
    </button>
  </form>
</section>
{% endblock %}