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

{% block title %}Topology Views{% endblock %}

{% block head %}
<link rel="stylesheet" href="{% static 'netbox_topology_views/css/vendor.css' %}">
<link rel="stylesheet" href="{% static 'netbox_topology_views/css/app.css' %}">
{% endblock %} 

{% block controls %}
  <div class="controls">
    	<div class="control-group">
			{% block extra_controls %}{% endblock %}
			<a id="btnDownloadXml" class="btn btn-info" href="#">
				<i class="mdi mdi-download"></i>
				Download XML
			</a>
			<a id="btnDownloadImage" class="btn btn-info" href="#">
				<i class="mdi mdi-download"></i>
				Download PNG
			</a>
    	</div>
	</div>
{% endblock controls %}

{% block tabs %}
	<ul class="nav nav-tabs" id="tabswrapper">
    	{% block tab_items %}
		<li class="nav-item" role="presentation">
			<button class="nav-link active" id="network-tab" data-bs-toggle="tab" data-bs-target="#networks" type="button" role="tab" aria-controls="filters-form" aria-selected="true">
			  Network
			</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="object-list" aria-selected="false">
            Filters
            {% if filter_form %}{% badge filter_form.changed_data|length bg_color="blue" %}{% endif %}
          </button>
        </li>
      	{% endif %}
		{% endblock tab_items %}
	</ul>
{% endblock tabs %}

{% block content %}
  {% with config=settings.PLUGINS_CONFIG.netbox_topology_views %}
    <div class="tab-content" id="tabcontentwrapper">

      {# Applied filters #}
      {% if filter_form %}
        <div id="filterwrapper">
          {% applied_filters model filter_form request.GET %}
        </div>
      {% endif %}

      <div class="tab-pane show active" id="networks" role="tabpanel" aria-labelledby="network-tab">
        <div class="panel-body">
          <div id="visgraph"></div>
        </div>
      </div>

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

    </div>
  {% endwith %}
{% endblock content %}

{% block javascript %}
  <script type="text/javascript">
    const brokenImage = '{{ broken_image }}';
    const topologyData = {{ topology_data | safe }};
    const basePath = '{{ basepath }}';

    window.addEventListener("resize", resizeCanvas);
    resizeCanvas();

    function resizeCanvas() {
      heightToSubtract = getElementHeight('.page-header') +
        getElementHeight('#tabswrapper') +
        getElementHeight('#filterwrapper') +
        getElementHeight('.footer') +
        getElementPadding('#tabcontentwrapper');

      document.getElementById("visgraph").style.height = "calc(100vh - " + heightToSubtract + "px)";
    }

    function getElementPadding(element) {
      el = document.querySelector(element);
      els = getComputedStyle(el);
      padding = parseInt(els.paddingTop) + parseInt(els.paddingBottom);

      return padding;
    }

    function getElementHeight(element) {
      el = document.querySelector(element);
      els = getComputedStyle(el);
      height = el.offsetHeight + parseInt(els.marginTop) + parseInt(els.marginBottom);

      return height;
    }
</script>
	<script src="{% static 'netbox_topology_views/js/app.js' %}" defer></script>
{% endblock javascript %}