{% macro scopes_tree_collapse(scopes) -%}

<ul id="scopes" class="nav flex-column nav-pills">
  {{ scopes_tree_collapse_level(scopes["scope"], 1, "") }}
</ul>
<script>
    // Launch the javascript on document ready, so all the global functions exists
    // in the scope
    document.addEventListener('readystatechange', () => {
        if (document.readyState === 'complete') {
            showSelectedClientsOnEvents();
            updateScopeState();
            keepScopesTreeState();
            keepSelectedClients();
            checkChildrenCheckboxes();
        }
    });
</script>

{% endmacro %}

{% macro scopes_tree_collapse_level(scopes, i, parent_id) -%}
{% for scope in scopes %}
  <li id="{{ scope["name"]|replace(".", "_") }}_{{ scope["id"] }}" class="nav-item">
    {% if " ".join(scope["ip"]) %}
        <input class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ " ".join(scope["ip"]) }}"
               {% if scope.get("selected", False) %}checked{% endif %}
               name="{{ scope["name"] }}_{{ scope["id"] }}" />
    {% endif %}
    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#id{{parent_id ~ "_" ~ i ~ "-" ~ loop.index}}"
                       {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
      {% if "state" in scope %}
        <i class="nav-icon fa-circle
                  {% if scope['state'] == 'OPG' %}fas text-warning
                  {% elif scope['state'] == 'BSY' %}fas text-danger
                  {% elif scope['state'] == 'VDI' %}fas text-success
                  {% elif scope['state'] == 'WOL_SENT' %}fas text-wol
                  {% else %}far{% endif %}"></i>
      {% endif %}
      {{ scope["name"] }}
    </a>
    {% if scope["scope"] %}
      <ul class="nav flex-column collapse level{{i}}" id="id{{parent_id ~ "_" ~ i ~ "-" ~ loop.index}}">
          {{ scopes_tree_collapse_level(scope["scope"], i + 1, parent_id ~ "_" ~ i ~ "-" ~ loop.index) }}
      </ul>
    {% endif %}
  </li>
{% endfor %}
{% endmacro %}

{% macro selected_clients() -%}
<div id="selected-clients" class="d-flex flex-wrap justify-content-center"></div>
{% endmacro %}

{% macro cmd_selected_clients(selected_clients) -%}
<div class="d-flex flex-wrap justify-content-center">
    {% set max_clients = 50 %}
    {% for name_id, ip in selected_clients[:max_clients] %}
    <div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill badge-light">
        {{ name_id }}<br>{{ ip }}
    </div>
    {% if loop.last and (selected_clients|length > max_clients) %}
        <div class="badge badge-pill badge-light">...</div>
    {% endif %}
{% endfor %}
</div>
{% endmacro %}