{% 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"
    >
      <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>
  <a
    href="{% url 'upload_document' %}"
    class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300"
    >Upload Document</a
  >
</section>
{% endblock %}