{% extends "main.html" %} {% 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">
      <h3 class="text-xl font-semibold mb-2">{{ document.title }}</h3>
      <p class="text-gray-600 mb-4">
        Analyzed on: {{ document.analysis_date }}
      </p>
      <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-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300"
          >Download</a
        >
      </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 %}