{% extends "base.html" %}

{% block title %}Tenant Analytics{% endblock %}

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->
    <div class="mb-4">
        <h4><i class="bi bi-people"></i> Tenant Behavior Analytics</h4>
    </div>

    <!-- TABLE -->
    <div class="card shadow-sm">
        <div class="card-body">

            <table class="table table-bordered table-hover">

                <thead>
                    <tr>
                        <th>Tenant</th>
                        <th>Total Paid</th>
                        <th>Outstanding Balance</th>
                        <th>Late Payments</th>
                        <th>Consistency Score</th>
                        <th>Risk Level</th>
                    </tr>
                </thead>

                <tbody>
                    {% for tenant in data %}
                    <tr>
                        <td>{{ tenant.name|default:"Unknown" }}</td>

                        <td>KES {{ tenant.total_paid|default_if_none:0 }}</td>
                        <td>KES {{ tenant.balance|default_if_none:0 }}</td>
                        <td>{{ tenant.late_payments|default_if_none:0 }}</td>
                        <td>{{ tenant.score|default_if_none:0 }}/100</td>

                        <td>
                            {% if tenant.risk == "Low" %}
                                <span class="badge bg-success">Low</span>
                            {% elif tenant.risk == "Medium" %}
                                <span class="badge bg-warning text-dark">Medium</span>
                            {% elif tenant.risk == "High" %}
                                <span class="badge bg-danger">High</span>
                            {% else %}
                                <span class="badge bg-secondary">Unknown</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center text-muted">
                            No tenant data available
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>

        </div>
    </div>

</div>

{% endblock %}