{% extends "base.html" %}

{% block content %}
<div class="container mt-4">

    <h1>Reports & Analytics</h1>

    <div class="row">
        {% for report in reports %}
        <div class="col-xl-3 col-md-6 mb-4">

            <div class="card shadow h-100 py-2">
                <div class="card-body">

                    <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                        {{ report.name }}
                    </div>

                    <a href="{% url report.url %}" 
                       class="h5 d-block text-decoration-none stretched-link">
                        View Report
                    </a>

                </div>
            </div>

        </div>
        {% endfor %}
    </div>

    <a href="/" class="btn btn-secondary">Back to Dashboard</a>

</div>
{% endblock %}