coi/app/report/templates/report/index.html

{% extends 'base.html' %}

{% block title %}Report Dashboard{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center mb-4">Welcome to the Report Dashboard</h1>
    <p class="text-center text-gray-600">Below is the list of reports currently available:</p>
    
<form class="max-w-sm mx-auto">
  <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select an option</label>
  <select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
    <option selected>Choose a country</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
</form>


    <!-- Reports List -->
    <div class="mt-6">
        {% if reports %}
            <ul class="bg-white rounded shadow p-4">
                {% for report in reports %}
                    <li class="border-b last:border-none py-2">
                        <strong>{{ report.name }}</strong>
                        <span class="text-sm text-gray-500">- Created on {{ report.date_created }}</span>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="text-gray-500 text-center">No reports available at the moment. Please check back later.</p>
        {% endif %}
    </div>
</div>
{% endblock %}