{% extends 'generic/_base.html' %}
{% load static %}
{% 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 %}
			<button type="button" id="btnDownloadXml" class="btn btn-info">
				<i class="mdi mdi-download"></i>
				Download XML
			</button>
			<button type="button" id="btnDownloadImage" class="btn btn-info">
				<i class="mdi mdi-download"></i>
				Download PNG
			</button>
    	</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 %}
    <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 position-relative">
          {% 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="layout-progress" class="position-absolute m-2 align-items-center gap-2" style="display: none">
            <div class="progress flex-grow-1">
              <div class="progress-bar" role="progressbar" aria-label="Layout progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 0%"></div>
            </div>
            <small class="text-nowrap">Laying out&hellip;</small>
          </div>
          <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>
  {% include 'netbox_topology_views/toasts.html' %}
{% endblock content %}

{% block javascript %}
  {{ topology_data|json_script:"topology-data" }}
  <script type="text/javascript">
    const brokenImage = '{{ broken_image }}';
    const topologyData = JSON.parse(document.getElementById('topology-data').textContent);
    const basePath = '{{ basepath }}';

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

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

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

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

      return padding;
    }

    function getElementHeight(element) {
      const el = document.querySelector(element);
      const els = getComputedStyle(el);
      const 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 %}