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

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

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4><i class="bi bi-buildings"></i> Buildings</h4>

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

    <!-- ================= BUILDING SWITCH ================= -->
    {% if buildings|length > 1 %}
    <div class="mb-3">
        <form method="get">
            <select name="building" class="form-select" onchange="this.form.submit()">
                <option value="">All Buildings</option>
                {% for b in buildings %}
                    <option value="{{ b.id }}" {% if selected_building and selected_building.id == b.id %}selected{% endif %}>
                        {{ b.name }}
                    </option>
                {% endfor %}
            </select>
        </form>
    </div>
    {% endif %}

    <!-- ================= BUILDING CARDS ================= -->
    <div class="row">
        {% for building in buildings %}
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm h-100">
                <div class="card-body">

                    <h5>{{ building.name }}</h5>
                    <p class="text-muted small">{{ building.location }}</p>

                    <p class="small">
                        <strong>Caretaker:</strong> 
                        {{ building.caretaker|default:"Not Assigned" }}
                    </p>

                    <a href="{% url 'unit_list' %}?building={{ building.id }}" 
                       class="btn btn-outline-dark btn-sm w-100">
                        Manage Units
                    </a>

                </div>
            </div>
        </div>
        {% empty %}
        <p>No buildings created yet.</p>
        {% endfor %}
    </div>

</div>
{% endblock %}