{% load i18n %}
<ul class="list-group list-group-flush">

    {% if node.children %}
    {% for child in node.children %}
        <li class="list-group-item">
            <button class="btn btn-sm btn-outline-secondary"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#loc-{{ child.loc.id }}-bloc"
                        aria-expanded="false"
                        aria-controls="loc-{{ child.loc.id }}-bloc">
                    ▸
            </button>

            <a class="mx-1" href="{% url 'assets:controlcenters_locations_detail' child.loc.id %}">
                {{ child.loc.code }}
            </a>
            <span>{{ child.loc.get_name }}</span>
            {% if child.children %}
                <span class="badge bg-light text-dark ms-2">{{ child.children|length }} {% translate "sous-localisations" %}</span>
            {% endif %}
            {% if child.assets %}
                <span class="badge bg-light text-dark ms-1">{{ child.assets|length }} assets</span>
            {% endif %}

            <div id="loc-{{ child.loc.id }}-bloc" class="collapse mt-2">
                {% include "assets/controlcenters_location_tree.html" with node=child only %}
            </div>
        </li>
    {% endfor %}
    {% endif %}


    {% for asset in node.assets %}
        <li class="list-group-item">
            <a class="mx-2"
            href="{% url 'assets:controlcenters_assets_detail' 'controlcentergeoasset' asset.id %}">
            {{ asset.code }}
            </a> {{ asset.get_name }}
        </li>
    {% endfor %}
</ul>