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

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

{% block content %}

<h2>Topology Viewer</h2>

<div class="col-md-3 pull-right right-side-panel noprint" style="z-index: 2;">
    {% include 'inc/search_panel.html' %}
    {% block sidebar %}{% endblock %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="mdi mdi-magnify" aria-hidden="true"></span>
            <strong>Load Saved View</strong>
        </div>
        <div class="panel-body">
            <form action="." method="get" class="form">
                {% for field in load_saved_filter_form.visible_fields %}
                    <div class="form-group">
                            {{ field.label_tag }}
                            {{ field }}
                    </div>
                {% endfor %}
                <div class="text-right noprint">
                    <button type="submit" class="btn btn-primary">
                        <span class="mdi mdi-application-import" aria-hidden="true"></span> Apply
                    </button>
                    <a href="." class="btn btn-default">
                        <span class="mdi mdi-close-thick" aria-hidden="true"></span> Clear
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
<div>
    <div class="btn-group">
        <button class="btn btn-primary " onclick='horizontal()'>Horizontal Layout</button>
        <button class="btn btn-primary" onclick="vertical()">Vertical Layout</button>
    </div>
    <input class="btn btn-primary" type="button" id="showHideUndonnectedButton" value="" onclick="return showHideUndonnectedButtonOnClick(this);" />
    <input class="btn btn-primary" type="button" id="showHidePassiveDevicesButton" value="" onclick="return showHidePassiveDevicesButtonOnClick(this);" />
    <div class="btn-group">
        <div class="dropdown">
            <button class="btn btn-primary 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 class="btn-group">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Save Current View
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <h6 class="dropdown-header">Saved View Name:</h6>
                <div style="margin-bottom: 5px; margin-left: 2px; margin-right: 2px;">
                    <input type="text" id="topoSaveName" name="topoSaveName"></input>
                </div>
                <div style="margin-left: 2px; margin-right: 2px;">
                    <label class="control-label col-sm-6 pull-left" for="saveTopologyView" id="saveResult" style="margin-top: 7px; margin-left:4px;"></label>
                    <input class="btn btn-primary pull-right" type="button" id="saveTopologyView" value="Submit" onclick="return saveView(topoSaveURI, nautobot_csrf_token);" />
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row noprint" style="z-index: 1;">
    <div class="col-lg-3" style="z-index: 1;">
        <div class="pull-left noprint">
            <div id="nx-ui-topology" class="container">

            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block javascript %}


<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 topologySavedData = {{ source_data|safe }};
    var initialLayout = '{{ initial_layout|safe }}';
    var requestGET = {{ requestGET|safe }};
    var topoSaveURI = '{% url 'plugins-api:nautobot_ui_plugin-api:nautobotsavedtopology-list' %}';
    console.log(topologyData);
</script>
<script src="{% static 'nautobot_ui_plugin/next_app.js' %}"></script>

<script type="text/javascript">
    showHideUndonnectedButtonInitial();
    showHidePassiveDevicesButtonInitial();
</script>

{% endblock %}



