{% load static %}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet"href="{% static 'nextbox_ui_plugin/next_sources/css/next.css' %}">
        <link rel="stylesheet"href="{% static 'nextbox_ui_plugin/bootstrap.min.css' %}">
        <link rel="stylesheet"href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
        <script src="{% static 'nextbox_ui_plugin/next_sources/js/next.js' %}"></script>
        <script src="{% static 'nextbox_ui_plugin/button_utils.js' %}"></script>
    </head>
    <body>
        <div class="container-sm ml-4 my-sm-3">
            <div class="row">
              <div class="col-xs-4">
                <div class="btn-group">
                    <button class="btn btn-outline-secondary btn-sm " onclick='horizontal()'>Horizontal Layout</button>
                    <button class="btn btn-outline-secondary btn-sm" onclick="vertical()">Vertical Layout</button>
                </div>
              </div>
              <div class="col-xs-4 ml-2">
                <input class="btn btn-outline-secondary btn-sm" type="button" id="showHideUndonnectedButton" value="" onclick="return showHideUndonnectedButtonOnClick(this);" />
              </div>
              <div class="col-xs-4 ml-2">
                <input class="btn btn-outline-secondary btn-sm" type="button" id="showHidePassiveDevicesButton" value="" onclick="return showHidePassiveDevicesButtonOnClick(this);" />
              </div>
              <div class="col-xs-4 ml-2">
                <div class="dropdown">
                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-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>
        </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 'jquery/jquery-3.4.1.min.js' %}"></script>
        <script src="{% static 'jquery/jquery-3.5.1.min.js' %}"></script>
        <script src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>
        <script src="{% static 'nextbox_ui_plugin/bootstrap.bundle.min.js' %}"></script>
        <script src="{% static 'nextbox_ui_plugin/next_app.js' %}"></script>
    </body>
</html>
