{% macro scopes_tree_collapse(scopes, state='') -%}

<ul id="scopes" class="nav flex-column nav-pills">
  {{ scopes_tree_collapse_level(scopes["scope"], "", state) }}
</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();
            checkParentsCheckboxes();
        }
    });
</script>

{% endmacro %}

{% macro scopes_tree_collapse_level(scopes, parent_id, state) -%}
{% for scope in scopes %}
  <li id="{{ scope["name"]|replace(".", "_")|replace(" ", "_") }}_{{ scope["id"] }}" class="nav-item">
    {% if scope["type"] == "server" %}
        <input class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ scope["server_ip_port"] }}" onclick="return false;"
               {% if scope.get("selected", False) %}checked{% endif %}
               name="scope-server" hidden/>
    {% elif scope["type"] == "center" %}
        <input class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ scope["id"] }}"
               {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
               {% if scope.get("selected", False) %}checked{% endif %}
               name="scope-center" />
    {% elif scope["type"] == "room" %}
        <input class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ scope["id"] }}"
               {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
               {% if scope.get("selected", False) %}checked{% endif %}
               name="scope-room" />
    {% elif " ".join(scope["ip"]) %}
        <input class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ " ".join(scope["ip"]) }}"
               {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
               {% if scope.get("selected", False) %}checked{% endif %}
               name="{{ scope["name"] }}_{{ scope["id"] }}" />
    {% endif %}
    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#scope{{parent_id ~ "-" ~ 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="scope{{parent_id ~ "-" ~ loop.index}}">
          {{ scopes_tree_collapse_level(scope["scope"], parent_id ~ "-" ~ loop.index, state) }}
      </ul>
    {% endif %}
  </li>
{% endfor %}
{% endmacro %}

{% macro selected_clients() -%}
<hr><h2>{{_('Selected clients')}}</h2>
<div class="card">
  <div class="card-body">
    <ul id="clients-color-legend" class="d-flex flex-wrap justify-content-center nav nav-pills">
      <li class="nav-item"><i class="nav-icon far fa-circle"></i> {{_('Apagado')}} </li>
      <li class="nav-item"><i class="nav-icon fas fa-circle text-wol"></i> {{_('WoL sent')}} </li>
      <li class="nav-item"><i class="nav-icon fas fa-circle text-warning"></i> ogLive </li>
      <li class="nav-item"><i class="nav-icon fas fa-circle text-danger"></i> {{_('Busy')}} </li>
      <li class="nav-item"><i class="nav-icon fas fa-circle text-success"></i> VDI </li>
    </ul>
  </div>
</div>
<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(".", "_")|replace(" ", "_") }}" class="badge badge-pill og-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 %}