{% extends 'base/base.html' %}
{% load static %}

{% block head %}
        <link rel="stylesheet"href="{% static 'nautobot_ui_plugin_docker/next_sources/css/next.css' %}">
        <script src="{% static 'nautobot_ui_plugin_docker/next_sources/js/next.js' %}"></script>
        <script src="{% static 'nautobot_ui_plugin_docker/button_utils.js' %}"></script>

{% endblock %} 

{% block layout %}

        <div class="container-sm ml-4 my-sm-3" id="nx-ui-topology">
            <div class="control-group">
              <div class="btn-group">
                  <button class="btn btn-primary btn-sm " onclick='horizontal()'>Horizontal Layout</button>
                  <button class="btn btn-primary btn-sm" onclick="vertical()">Vertical Layout</button>
              </div>
              <input class="btn btn-primary btn-sm" type="button" id="showHideUndonnectedButton" value="" onclick="return showHideUndonnectedButtonOnClick(this);" />
              <input class="btn btn-primary btn-sm" type="button" id="showHidePassiveDevicesButton" value="" onclick="return showHidePassiveDevicesButtonOnClick(this);" />
              <div class="dropdown btn-group">
                  <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select Layers
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <h6 class="dropdown-header">Device Roles</h6>
                      <div class="dropdown-divider"></div>
                      {% for device_role_slug, device_role_name, is_visible in device_roles %}
                          <div class="checkbox ml-1 my-1">
                              <label>
                                  <input onchange="layerSelectorOnChange(this)" type="checkbox" value="{{ device_role_slug }}" {{ is_visible|yesno:"checked," }}>{{ device_role_name }}
                              </label>
                          </div>
                      {% endfor %}
                      <div class="dropdown-divider"></div>
                      {% if device_tags %}
                        <h6 class="dropdown-header">Device Tags</h6>
                        {% for tag, is_visible in device_tags %}
                            <div class="checkbox ml-1 my-1">
                                <label>
                                   <input onchange="layerSelectorByTagOnChange(this)" type="checkbox" value="{{ tag }}"  {{ is_visible|yesno:"checked," }}>{{ tag }}
                                </label>
                            </div>
                        {% endfor %}
                      {% endif %}
                      <div class="dropdown-divider"></div>
                  </div>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            var displayUnconnected = {{ display_unconnected|yesno:"true,false" }};
            var displayPassiveDevices = {{ display_passive_devices|yesno:"true,false" }};
            var displayLogicalMultiCableLinks = {{ display_logical_multicable_links|yesno:"true,false" }};
            var undisplayedRoles = {{ undisplayed_roles|safe }};
            var undisplayedDeviceTags = {{ undisplayed_device_tags|safe }};
            var topologyData = {{ source_data|safe }};
            var initialLayout = '{{ initial_layout|safe }}';
            console.log(topologyData);
        </script>
        <script type="text/javascript">
            showHideUndonnectedButtonInitial();
            showHidePassiveDevicesButtonInitial();
        </script>
        <script src="{% static 'nautobot_ui_plugin_docker/next_app.js' %}"></script>

{% endblock %}
