{% load i18n %}
{% for row in children %}
  <div class="tree-item-wrap">
    <div class="tree-node d-flex align-items-center py-1"
         data-pk="{{ row.prefix.pk }}"
         style="padding-left: {{ depth }}rem;">

      {# Expand toggle #}
      <span class="tree-toggle me-1" style="width: 1.2rem; text-align: center; flex-shrink: 0;">
        {% if row.has_children %}
          <a href="#"
             class="text-muted tree-expand-btn"
             data-expanded="0"
             hx-get="{% url 'plugins:netbox_folderview:prefix_children' pk=row.prefix.pk %}?{{ filter_params }}&depth={{ depth }}"
             hx-target="#tc-{{ row.prefix.pk }}"
             hx-swap="innerHTML"
             hx-trigger="click"
             hx-on::before-request="if(this.dataset.expanded==='1'){ event.preventDefault(); document.getElementById('tc-{{ row.prefix.pk }}').innerHTML=''; this.dataset.expanded='0'; this.querySelector('i').classList.replace('mdi-chevron-down','mdi-chevron-right'); } else { document.getElementById('tc-{{ row.prefix.pk }}').innerHTML='<div class=\'text-muted ps-2 py-1 small\'><span class=\'spinner-border spinner-border-sm me-1\' role=\'status\'></span>{% trans "Loading…" %}</div>'; }"
             hx-on::after-request="this.dataset.expanded='1'; this.querySelector('i').classList.replace('mdi-chevron-right','mdi-chevron-down');"
             onclick="event.preventDefault()"
             title="{% trans "Expand" %}">
            <i class="mdi mdi-chevron-right"></i>
          </a>
        {% else %}
          <i class="mdi mdi-circle-small text-muted"></i>
        {% endif %}
      </span>

      {# Prefix label: single click loads IPs + highlights row, double click navigates to detail #}
      <span class="tree-prefix flex-grow-1"
            style="cursor: pointer; user-select: none;"
            data-selectable="true"
            hx-get="{% url 'plugins:netbox_folderview:prefix_ips' pk=row.prefix.pk %}"
            hx-target="#ip-table-container"
            hx-swap="innerHTML"
            ondblclick="window.location.href='{{ row.prefix.get_absolute_url }}'">
        <span class="font-monospace">{{ row.prefix.prefix }}</span>
        {% if 'description' in tree_columns and row.prefix.description %}
          <span class="text-muted ms-2 small">{{ row.prefix.description }}</span>
        {% endif %}
        {% if 'status' in tree_columns %}
          <span class="badge text-bg-secondary ms-1">{{ row.prefix.get_status_display }}</span>
        {% endif %}
        {% if 'vrf' in tree_columns and row.prefix.vrf %}
          <span class="text-muted ms-2 small">{{ row.prefix.vrf }}</span>
        {% endif %}
        {% if 'role' in tree_columns and row.prefix.role %}
          <span class="text-muted ms-2 small">{{ row.prefix.role }}</span>
        {% endif %}
        {% if 'tenant' in tree_columns and row.prefix.tenant %}
          <span class="text-muted ms-2 small">{{ row.prefix.tenant }}</span>
        {% endif %}
      </span>

    </div>
    {# Children are injected here by htmx on expand #}
    <div class="tree-children" id="tc-{{ row.prefix.pk }}"></div>
  </div>
{% endfor %}