{% extends 'base.html' %}
{% load tailwind_filters %}
{% block title %}Report Dashboard{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">

  <h1 class="text-2xl font-bold text-gray-800">Reports</h1>

    <!-- Filter Form -->
        <form method="get" class="flex items-center space-x-4 mb-4">
            {{ filter.form | crispy }}
            <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded-lg">
                Apply Filters
            </button>
        </form>
        <div class="flex justify-between items-center mb-6">
          <a href="{% url 'report:report_create' %}" 
             class="bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 focus:outline-none focus:ring focus:ring-green-300">
            + Create New Report
          </a>
        </div>

          <div class="bg-white rounded-lg shadow-md p-5">
            <table class="min-w-full table-auto border-collapse border border-gray-300">
                <thead>
                    <tr class="bg-gray-200">
                        <th class="border px-4 py-2 text-left">#</th>
                        <th class="border px-4 py-2 text-left">Name</th>
                        <th class="border px-4 py-2 text-left">Created By</th>
                        <th class="border px-4 py-2 text-left">Created At</th>
                    </tr>
                </thead>
                <tbody>
                    {% for report in page_obj %}
                    <tr>
                        <td class="border px-4 py-2">{{ forloop.counter }}</td>
                        <td class="border px-4 py-2">{{ report.name }}</td>
                        <td class="border px-4 py-2">{{ report.created_by }}</td>
                        <td class="border px-4 py-2">{{ report.created_at|date:"Y-m-d H:i" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="border px-4 py-2 text-center text-gray-500">
                            No reports found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    <div class="mt-6 flex justify-between items-center">
        <div>
            <span class="text-sm text-gray-600">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
        </div>
        <div class="space-x-2">
            {% if page_obj.has_previous %}
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page=1" 
                   class="text-blue-500 hover:underline">First</a>
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}" 
                   class="text-blue-500 hover:underline">Previous</a>
            {% endif %}
            {% if page_obj.has_next %}
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}" 
                   class="text-blue-500 hover:underline">Next</a>
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.paginator.num_pages }}" 
                   class="text-blue-500 hover:underline">Last</a>
            {% endif %}
        </div>
    </div>


  <!-- Data Grid -->
</div>
  {% endblock %}
