{% load helpers %}
{% load i18n %}
{% if nodes %}
<ul class="tree" style="list-style: none; padding-left: {{ depth|add:'20' }}px;">
  {% for node in nodes %}
  <li>
    <strong>{{ node.name }}</strong>
    — <code>{{ node.object_type }}</code>
    <span class="badge bg-secondary">{{ node.quantity|default:1 }}×</span>
    <span class="badge bg-info">{{ node.scope|default:'parent' }}</span>
    {% if node.selector %}
      <details class="d-inline">
        <summary class="badge bg-primary">{% trans "selector" %}</summary>
        <pre class="small mt-1">{{ node.selector|json }}</pre>
      </details>
    {% endif %}
    {% if node.allocation %}
      <details class="d-inline">
        <summary class="badge bg-success">{% trans "allocation" %}</summary>
        <pre class="small mt-1">{{ node.allocation|json }}</pre>
      </details>
    {% endif %}
    {% if node.children %}
      {% include 'netbox_services/_tree_node.html' with nodes=node.children depth=depth|add:'1' %}
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endif %}