{% load i18n %}
<ul class="list-group list-group-flush border-0">
    {% for child_node in node.children %}
    <li class="list-group-item border-0 py-1 px-0">
        <!-- Row Header -->
        <div class="d-flex align-items-center justify-content-between py-1 px-3">
            <!-- Contenu gauche (indenté selon la profondeur) -->
            <div class="d-flex align-items-center gap-2 flex-wrap" style="padding-left: calc(({{ depth|default:1 }} - 1) * 1.25rem);">
                {% if child_node.children or child_node.assets %}
                <button class="btn btn-sm btn-light border p-0 px-1 tree-toggle-btn" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#tree-loc-{{ child_node.loc.id }}" 
                        aria-expanded="true">
                    <i class="bi bi-chevron-down small"></i>
                </button>
                {% else %}
                <span class="d-inline-block" style="width: 1.35rem;"></span>
                {% endif %}
                
                <i class="bi {{ child_node.loc.get_icon_class }} text-primary"></i>

                <!-- Code en bleu pour indiquer clairement un lien cliquable -->
                <a href="{{ child_node.loc.get_absolute_url }}" class="fw-bold text-primary text-decoration-underline small">
                    {{ child_node.loc.code }}
                </a>
                {% if child_node.loc.room_number %}
                <span class="badge bg-secondary-subtle text-secondary border small font-monospace"><i class="bi bi-tag me-1"></i>{{ child_node.loc.room_number }}</span>
                {% endif %}
                <span class="small text-muted">- {{ child_node.loc.get_name }}</span>
                <span class="badge bg-primary-subtle text-primary border small">{{ child_node.loc.get_location_type_display }}</span>
                
                {% if child_node.assets %}
                <span class="badge bg-info-subtle text-info border small" title="{% translate 'Assets physiques rattachés' %}">
                    <i class="bi bi-tools me-1"></i>{{ child_node.assets|length }}
                </span>
                {% endif %}
            </div>
        </div>

        <!-- Collapsible Content (Direct Assets & Child Locations) -->
        {% if child_node.children or child_node.assets %}
        <div id="tree-loc-{{ child_node.loc.id }}" class="collapse show tree-collapse-node">
            <!-- 1. Assets directement rattachés à cette localisation -->
            {% if child_node.assets %}
                {% include "assets/buildings/publicbuilding_asset_tree.html" with asset_nodes=child_node.assets depth=depth|default:1|add:1 only %}
            {% endif %}

            <!-- 2. Sous-localisations -->
            {% if child_node.children %}
                {% include "assets/buildings/publicbuilding_location_tree.html" with node=child_node depth=depth|default:1|add:1 only %}
            {% endif %}
        </div>
        {% endif %}
    </li>
    {% empty %}
        {% if not node.assets %}
        <li class="list-group-item border-0 text-muted small fst-italic py-2 ps-3">
            {% translate "Aucune sous-localisation." %}
        </li>
        {% endif %}
    {% endfor %}
</ul>