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

<ul id="scopes" class="nav ogcp-nav flex-column nav-pills">
  {{ scopes_tree_collapse_level(scopes["scope"], "", "", state, selection_mode) }}
</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();
            keepTreeState('#scopes', 'scopes');
            let context = {{ selection_mode | tojson | safe }};
            {% if selection_mode == 'commands' %}
                configureCommandCheckboxes(context);
            {% elif selection_mode == 'scopes' %}
                limitCheckboxes(context);
                checkFolderParent(context);
            {% endif %}
            keepSelectedClients(context);
        }
    });
</script>

{% endmacro %}

{% macro scopes_tree_collapse_level(scopes, parent_room, parent_id, state, selection_mode) -%}
{% for scope in scopes %}
  {% set scope_name = scope["name"]|replace(".", "_")|replace(" ", "_") %}
  <li id="{{ scope_name }}_{{ scope["id"] }}" class="nav-item">
    {% set input_id = "input" ~ parent_id ~ "-" ~ loop.index %}
    {% if scope["type"] == "server" %}
        <input id="{{ input_id }}" 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 id="{{ input_id }}" 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" %}
        {% set parent_room = scope.name + "-" + scope.id|string %}
        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ scope["id"] }}" data-room="{{ parent_room }}"
               {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
               {% if scope.get("selected", False) %}checked{% endif %}
               name="scope-room" />
    {% elif scope["type"] == "folder" %}
        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
		value="{{ scope["id"] }}" data-parent-input="{{ "input" ~ parent_id }}"
               {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
               {% if scope.get("selected", False) %}checked{% endif %}
               name="folder" />
    {% elif " ".join(scope["ip"]) %}
        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
               value="{{ " ".join(scope["ip"]) }}" data-parent-room="{{ parent_room }}"
               {% 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 %}"
        id="{{ scope["type"] }}-{{ scope.get('id', scope_name) }}"
        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'] == 'LNX' %}fas text-linux
                  {% elif scope['state'] == 'LNX' %}fas fa-user-circle text-linux
                  {% elif scope['state'] == 'WIN' %}fas text-windows
                  {% elif scope['state'] == 'WIN' %}fas fa-user-circle text-windows
                  {% 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 %}
      {% if scope["type"] == "folder" %}
      &#x1F4C1;
      {% 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_room, parent_id ~ "-" ~ loop.index, state, selection_mode) }}
      </ul>
    {% endif %}
  </li>
{% endfor %}
{% endmacro %}

{% macro selected_clients() -%}
<h3 class="mx-5 subhead-heading">{{_('Selected clients')}}</h3>

{% include 'client_status_leyend.html' %}

<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|remove_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 %}