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

    <h6 class="mb-3">
        <i class="bi bi-building"></i> Unit Performance
    </h6>

    <table class="table table-sm table-hover">
        <thead>
            <tr>
                <th>Unit</th>
                <th>Building</th>
                <th>Income</th>
                <th>Expenses</th>
                <th>Profit</th>
                <th>Score</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for u in data %}
            <tr>
                <td>{{ u.unit.name }}</td>
                <td>{{ u.unit.building.name }}</td>
                <td>KES {{ u.total_income }}</td>
                <td>KES {{ u.total_expenses }}</td>
                <td>KES {{ u.net_profit }}</td>
                <td>{{ u.score }}/100</td>
                <td>
                    <span class="badge
                        {% if u.status == 'High performing unit' %}bg-success
                        {% elif u.status == 'Moderate performing unit' %}bg-warning
                        {% else %}bg-danger
                        {% endif %}">
                        {{ u.status }}
                    </span>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" class="text-center text-muted">
                    No unit data available
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

</div>