{% extends 'base.html' %}
{% load buttons %}
{% load render_table from django_tables2 %}
{% load static %}
{% load perms %}
{% load helpers %}
{% load topology_tags %}

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

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

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

	<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 %}{% endif %}
          </button>
        </li>
      	{% endif %}
		{% endblock tab_items %}
	</ul>

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


      <div id="filterwrapper">
        {% if filter_form %}{% topology_applied_filters filter_form request %}{% endif %}
      </div>

      <div class="tab-pane show active" id="networks" role="tabpanel" aria-labelledby="network-tab">
        <div class="panel-body">
          {% if filter_required %}
            <div class="bg-warning text-white p-2">Nothing to display! Set filters and hit search button or set "Draw Default Layout" in your individual options.</div>
          {% endif %}
          {% if empty_result %}
            <div class="bg-warning text-white p-2">Empty result set! Please review your filter settings.</div>
            <div class="bg-info text-white p-2">Hint: Some options may produce an empty result. Use at least "Show Unconnected/Cables/Logical Connections".</div>
          {% endif %}
          <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 'nautobot_topology_views/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.CSRF_TOKEN = '{{ csrf_token }}';

    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);
      if (!el) return 0;
      els = getComputedStyle(el);
      height = el.offsetHeight + parseInt(els.marginTop) + parseInt(els.marginBottom);

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