{% extends 'generic/_base.html' %}
{% load buttons %}
{% load helpers %}
{% load plugins %}
{% load render_table from django_tables2 %}
{% load static %}
{% load i18n %}

{% block title %}Topology Viewer{% endblock %}

{% block tabs %}
  <ul class="nav nav-tabs" role="tablist">
    <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>
    {% if filter_form %}
      <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
          {% if filter_form.changed_data %}
            {% badge filter_form.changed_data|length bg_color="primary" %}
          {% endif %}
        </button>
      </li>
    {% endif %}
  </ul>
{% endblock tabs %}

{% block content %}

  <div class="tab-content" id="topologyTabsContent">

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

      {# Applied filters #}
      {% if filter_form %}
      {% applied_filters model filter_form request.GET %}
      {% endif %}
      
      <div id="topology-container" style="width: 100%; height: 80vh; border: 1px solid #ccc;"></div>
    </div>

    {# Filters tab #}
    {% if filter_form %}
      <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
        {% include 'inc/filter_list.html' %}
      </div>
    {% endif %}
    {# /Filters tab #}

  </div>

{% endblock content %}

{% block javascript %}
<script type="text/javascript">
    window.initialLayout = '{{ initial_layout|default:"layered" }}';
    window.topologyData = {{ source_data|safe }};
    window.netbox_csrf_token = '{{ csrf_token }}'
</script>

<script src="{% static 'nextbox_ui_plugin/topoSphere/topoSphere.js' %}"></script>
<script src="{% static 'nextbox_ui_plugin/topoSphereApp.js' %}"></script>
<script src="{% static 'nextbox_ui_plugin/modal.js' %}"></script>

{% endblock javascript %}