{% extends 'base/layout.html' %}
{% load buttons %}
{% load static %}
{% load plugins %}
{% load helpers %}

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

<div class="title-container px-3 pb-3">
    <div id="content-title">
        <h1 class="h2 w-100">Topology Viewer</h1>
    </div>
</div>

<ul class="nav nav-tabs px-3">

      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="topology-tab" data-bs-toggle="tab" data-bs-target="#topology" type="button" role="tab" aria-controls="topology" aria-selected="true">
          Topology
        </button>
      </li>

        <li class="nav-item" role="presentation">
          <button class="nav-link" id="filters-form-tab" data-bs-toggle="tab" data-bs-target="#filters-form" type="button" role="tab" aria-controls="filters-form" aria-selected="false">
            Filters
          </button>
        </li>


</ul>

<div class="tab-content">
    <div class="tab-pane active" id="topology" role="tabpanel" aria-labelledby="topology-tab">

        <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-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 class="btn-group">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-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 class="btn-group">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Load Saved View
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <form action="." method="get" class="form">
                        <select name='saved_topology_id' class="form-select" id='id_saved_topology'>
                                <option value selected>----------</option>
                        {% for saved_topo in load_saved %}
                                <option value="{{ saved_topo.id }}" >{{ saved_topo.name }}</option>
                        {% endfor %}
                        </select>
                        <button type="submit" class="btn btn-primary">
                            <span class="mdi mdi-application-import" aria-hidden="true"></span> Apply
                        </button>
                    </form>
                </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>
    </div>
    <div class="tab-pane" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
        {% include 'inc/filter_list.html' %}
    </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 netbox_csrf_token = '{{ csrf_token }}'
    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 src="{% static 'nautobot_ui_plugin/jquery/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'nautobot_ui_plugin/jquery/jquery-3.5.1.min.js' %}"></script>


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

{% endblock %}

