{% load i18n %}
{# Recursive component: renders a tree of related child assets.           #}
{# Expected context variable: children_tree (output of get_asset_children_tree) #}
{# Optional: editable (truthy = user can edit), parent_model, parent_id   #}

{% for group in children_tree %}
<div class="card border mb-2"
     data-group-model="{{ group.model_name }}"
     data-group-is-parent="{{ group.is_parent_group|yesno:'true,false' }}"
     {% if not group.is_parent_group %}data-field-on-child="{{ group.field_on_child }}"{% endif %}
     {% if group.is_parent_group %}data-field-name="{{ group.field_name }}"{% endif %}>
    <div class="card-header py-2 bg-light d-flex align-items-center gap-2">
        <i class="bi bi-diagram-2 text-muted small"></i>
        <h6 class="mb-0 small fw-semibold">{{ group.label }}</h6>
        <span class="badge bg-secondary ms-auto">{{ group.items|length }}</span>
        {% if editable and not group.is_parent_group %}
        <button type="button"
                class="btn btn-outline-secondary btn-sm d-none"
                data-edit-mode-only="true"
                data-action="add-linked-asset"
                data-child-model="{{ group.model_name }}"
                data-field-on-child="{{ group.field_on_child }}"
                data-parent-model="{{ parent_model }}"
                data-parent-id="{{ parent_id }}"
                title="{% translate 'Lier un asset existant' %}">
            <i class="bi bi-link-45deg"></i>
        </button>
        {% endif %}
        {% if editable and group.is_parent_group %}
        <button type="button"
                class="btn btn-outline-secondary btn-sm d-none"
                data-edit-mode-only="true"
                data-action="set-parent-asset"
                data-field-name="{{ group.field_name }}"
                data-parent-model-name="{{ group.model_name }}"
                title="{% translate 'Changer le parent' %}">
            <i class="bi bi-arrow-left-right"></i>
        </button>
        {% endif %}
    </div>
    <ul class="list-group list-group-flush">
        {% for item in group.items %}
        <li class="list-group-item py-2 px-3"
            data-item-id="{{ item.asset.id }}"
            data-item-model="{{ group.model_name }}"
            data-item-field="{{ group.field_on_child }}{{ group.field_name }}">
            <div class="d-flex align-items-start gap-2">
                <div class="flex-grow-1">
                    <div>
                        {% if item.url %}
                        <a href="{{ item.url }}" class="fw-medium text-decoration-none">{{ item.asset.code }}</a>
                        {% else %}
                        <span class="fw-medium">{{ item.asset.code }}</span>
                        {% endif %}

                        {% if item.asset.status %}
                            {% if item.asset.status == 'active' %}
                                <span class="badge bg-success ms-1" style="font-size:0.65rem;">{{ item.asset.get_status_display }}</span>
                            {% elif item.asset.status == 'damaged' %}
                                <span class="badge bg-warning ms-1" style="font-size:0.65rem;">{{ item.asset.get_status_display }}</span>
                            {% elif item.asset.status == 'to_replace' %}
                                <span class="badge bg-danger ms-1" style="font-size:0.65rem;">{{ item.asset.get_status_display }}</span>
                            {% else %}
                                <span class="badge bg-secondary ms-1" style="font-size:0.65rem;">{{ item.asset.get_status_display }}</span>
                            {% endif %}
                        {% endif %}
                    </div>
                    {% if item.asset.name_fr %}
                    <small class="text-muted">{{ item.asset.name_fr }}</small>
                    {% endif %}
                </div>
                {% if editable and not group.is_parent_group %}
                <button type="button"
                        class="btn btn-outline-danger btn-sm py-0 px-1 d-none flex-shrink-0"
                        data-edit-mode-only="true"
                        data-action="unlink-child-asset"
                        data-child-model="{{ group.model_name }}"
                        data-child-id="{{ item.asset.id }}"
                        data-field-on-child="{{ group.field_on_child }}"
                        data-parent-model="{{ parent_model }}"
                        data-parent-id="{{ parent_id }}"
                        title="{% translate 'Délier cet asset' %}">
                    <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
                </button>
                {% endif %}
                {% if editable and group.is_parent_group %}
                <button type="button"
                        class="btn btn-outline-danger btn-sm py-0 px-1 d-none flex-shrink-0"
                        data-edit-mode-only="true"
                        data-action="unlink-parent-asset"
                        data-field-name="{{ group.field_name }}"
                        data-parent-model="{{ group.model_name }}"
                        data-parent-id="{{ item.asset.id }}"
                        data-child-model="{{ parent_model }}"
                        data-child-id="{{ parent_id }}"
                        title="{% translate 'Délier cet asset' %}">
                    <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
                </button>
                {% endif %}
            </div>

            {# Recursive children – no edit buttons at deeper levels #}
            {% if item.children %}
            <div class="ms-3 mt-2">
                {% include "assets/components/asset_children_tree.html" with children_tree=item.children only %}
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% endfor %}