<div class="card shadow-sm p-3 mb-4">

    <h6 class="mb-3">
        <i class="bi bi-people"></i> Tenant Behavior Analysis
    </h6>

    <table class="table table-sm table-hover">
        <thead>
            <tr>
                <th>Tenant</th>
                <th>Total Paid</th>
                <th>Arrears</th>
                <th>Score</th>
                <th>Risk Level</th>
            </tr>
        </thead>
        <tbody>
            {% for t in data %}
            <tr>
                <td>{{ t.tenant.username }}</td>
                <td>KES {{ t.total_paid }}</td>
                <td>KES {{ t.total_due }}</td>
                <td>{{ t.score }}/100</td>
                <td>
                    <span class="badge 
                        {% if t.risk == 'High' %}bg-danger
                        {% elif t.risk == 'Medium' %}bg-warning
                        {% else %}bg-success
                        {% endif %}">
                        {{ t.risk }}
                    </span>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="text-center text-muted">
                    No tenant data available
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

</div>