{% extends "base.html" %}

{% block title %}Unit Performance{% endblock %}

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->
    <div class="mb-4">
        <h4><i class="bi bi-building"></i> Unit Performance Report</h4>
    </div>

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

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

                <thead>
                    <tr>
                        <th>Unit</th>
                        <th>Building</th>
                        <th>Income</th>
                        <th>Maintenance Cost</th>
                        <th>Net Profit</th>
                        <th>Vacancy Days</th>
                        <th>Efficiency Score</th>
                        <th>Performance</th>
                    </tr>
                </thead>

                <tbody>
                    {% for unit in data %}
                    <tr>

                        <td>{{ unit.unit|default:"-" }}</td>
                        <td>{{ unit.building|default:"-" }}</td>

                        <td>KES {{ unit.total_income|default_if_none:0 }}</td>
                        <td>KES {{ unit.maintenance_cost|default_if_none:0 }}</td>
                        <td>KES {{ unit.net_profit|default_if_none:0 }}</td>

                        <td>{{ unit.vacancy_days|default_if_none:0 }}</td>
                        <td>{{ unit.efficiency_score|default_if_none:0 }}</td>

                        <td>
                            {% if unit.performance == "High" %}
                                <span class="badge bg-success">High</span>
                            {% elif unit.performance == "Moderate" %}
                                <span class="badge bg-warning text-dark">Moderate</span>
                            {% elif unit.performance == "Low" %}
                                <span class="badge bg-danger">Low</span>
                            {% else %}
                                <span class="badge bg-secondary">Unknown</span>
                            {% endif %}
                        </td>

                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center text-muted">
                            No data available
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>

        </div>
    </div>

</div>

{% endblock %}