{% extends 'base.html' %}
{% block title %}Units{% endblock %}

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

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4><i class="bi bi-houses"></i> Units</h4>

        <a href="{% url 'unit_add' %}" class="btn btn-dark">
            <i class="bi bi-plus-lg"></i> Add Unit
        </a>
    </div>

    <!-- FILTERS -->
    <div class="row mb-3">

        <div class="col-md-4">
            <form method="get">
                <input type="hidden" name="sort" value="{{ request.GET.sort }}">
                <select name="building" class="form-select" onchange="this.form.submit()">
                    <option value="">All Buildings</option>
                    {% for b in request.user.buildings.all %}
                        <option value="{{ b.id }}" {% if request.GET.building == b.id|stringformat:"s" %}selected{% endif %}>
                            {{ b.name }}
                        </option>
                    {% endfor %}
                </select>
            </form>
        </div>

        <div class="col-md-4">
            <form method="get">
                <input type="hidden" name="building" value="{{ request.GET.building }}">
                <select name="sort" class="form-select" onchange="this.form.submit()">
                    <option value="">Sort By</option>
                    <option value="rent">Rent</option>
                    <option value="type">Unit Type</option>
                </select>
            </form>
        </div>

    </div>

    <!-- UNITS -->
    <div class="row">
        {% for unit in units %}
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">

                    <h5>Unit {{ unit.unit_number }}</h5>

                    <p class="small">
                        <strong>Building:</strong> {{ unit.building.name }}<br>
                        <strong>Type:</strong> {{ unit.get_unit_type_display }}<br>
                        <strong>Rent:</strong> KES {{ unit.rent_amount }}<br>

                        <strong>Occupancy:</strong>
                        {{ unit.current_occupancy }} / {{ unit.max_occupants }}<br>

                        <strong>Status:</strong>
                        <span class="badge bg-info">
                            {{ unit.occupancy_status }}
                        </span>
                    </p>

                    <div class="d-flex gap-2">
                        <a href="{% url 'unit_detail' unit.id %}" class="btn btn-outline-dark btn-sm w-100">
                            View
                        </a>

                        <a href="{% url 'unit_update' unit.id %}" class="btn btn-dark btn-sm w-100">
                            Edit
                        </a>
                    </div>

                </div>
            </div>
        </div>
        {% empty %}
        <p>No units available.</p>
        {% endfor %}
    </div>

</div>
{% endblock %}