{% extends 'dcim/device/base.html' %}
{% load render_table from django_tables2 %}
{% load buttons %}
{% load static %}
{% load helpers %}
{% load plugins %}
{% block head %}
<link
	rel="stylesheet"
	href="{% static 'netbox_device_view/css/device_view.css' %}"
/>
{% if use_svg %}
<link
	rel="stylesheet"
	href="{% static 'netbox_device_view/css/device_view_svg.css' %}"
/>
{% else %}
<style>
	{% autoescape off %}
	{% for id, ddv in dv.items %}
	{{ ddv }}
	{% endfor %}
	{% endautoescape %}
	{% if height %}
	
	.deviceview {
		height:{{ height }}px;
	}
	{% endif %}
</style>
{% endif %}
{% endblock %}
{% block content %}
<div class="card">
	<div class="card-body htmx-container">
		{% spaceless %}
		{% if use_svg %}
		{# ── SVG rendering path ── #}
		{# svg_panels is [(pos, svg_markup)] in ports_chassis order, pre-built in the view #}
		{% for panel_pos, svg_markup in svg_panels %}
		<p class="text-muted small mb-1">Device {{ panel_pos }}</p>
		<div class="dv-svg-wrapper"
			id="dv-svg-wrapper-{{ panel_pos }}"
			data-device="{{ panel_pos }}">
			{% autoescape off %}{{ svg_markup }}{% endautoescape %}
		</div>
		{% endfor %}

		{% else %}
		{# ── CSS Grid rendering path (unchanged) ── #}
		{% for device, interfaces in ports_chassis.items %} Device
		{{device}}
		<div
			class="deviceview area d{{device}}{% for sw, modules in modules.items %}{% if sw == device %}{% for module in modules %} module{{module.module_type.model}}{% endfor %}{% endif %}{% endfor %}"
		>
			{% for int in interfaces %}
			<a
				href="{{int.get_absolute_url}}"
				class="device-view-port 
				{% if cable_colors == "on" and int.cable.color == "" or cable_colors == "on" and int.cable == None %}
				nocolor
				{% elif cable_colors == "on" %}
				{% elif int.enabled and int.connected_endpoints|length > 0 or int.is_port and int.link_peers|length > 0 %}
				bg-success
				{% elif int.enabled %}
				bg-secondary
				{% else %}
				bg-danger
				{% endif %}"
				data-bs-title="{{ int.name }}{% if int.connected_endpoints|length > 0 %}<hr>{% for ce in int.connected_endpoints %}{{ ce.device }} | {{ ce.name }}{% if not forloop.last %}<br>{% endif %}{% endfor %}{% elif int.link_peers|length > 0 %}<hr>{% for lp in int.link_peers %}{% if lp.device %}{{ lp.device }} | {{ lp.name }}{% elif lp.circuit %}{{ lp }}{% endif %}{% if not forloop.last %}<br>{% endif %}{% endfor %}{% endif %}"
				data-bs-content="<a href='{{int.get_absolute_url}}trace/'>Trace</a>"
				style="grid-area: {{ int.stylename }}{% if cable_colors == 'on' and int.cable.color != '' %}; background-color: #{{ int.cable.color }}{% endif %}"
				data-bs-toggle="popover"
				data-bs-trigger="hover focus"
				data-bs-placement="top"
				data-bs-html="true"
				data-bs-container="body"
				data-bs-delay='{"show":200,"hide":300}'
				data-bs-custom-class="device-view-tooltip"
			>
				{% if int.enabled and int.connected_endpoints|length > 0  or int.is_port and int.link_peers|length > 0 %}
				<span class="text-white"><i class="mdi mdi-check-bold"></i></span>
				{% elif int.enabled %}
				<span class="text-white"><i class="mdi mdi-check-bold"></i></span>
				{% else %}
				<span class="text-white"><i class="mdi mdi-close-thick"></i></span>
				{% endif %}
			</a>
			{% endfor %}
		</div>
		{% endfor %}
		{% endif %}
		{% endspaceless %}
	</div>
</div>

<script>
// Shared popover helper — keeps popover open when cursor moves into it.
// Bootstrap 5 hover trigger closes on mouseleave of the trigger element
// before mouseenter on the popover fires. We use trigger:"manual" and
// wire both elements ourselves so the popover stays open over either one.
function dvInitPopover(el, opts) {
  if (typeof Popover === "undefined") return;
  var pop = new Popover(el, {
    trigger: "manual",
    html: true,
    container: "body",
    placement: "top",
    customClass: "device-view-tooltip",
    title: opts.title || "",
    content: opts.content || ""
  });
  var hideTimer = null;
  var showTimer = null;
  function scheduleHide() {
    clearTimeout(showTimer);
    hideTimer = setTimeout(function () { pop.hide(); }, 500);
  }
  function cancelHide() {
    clearTimeout(hideTimer);
  }
  el.addEventListener("mouseenter", function () { cancelHide(); showTimer = setTimeout(function () { pop.show(); }, 500); });
  el.addEventListener("mouseleave", scheduleHide);
  el.addEventListener("shown.bs.popover", function () {
    var tip = Popover.getInstance(el) && Popover.getInstance(el)._tip;
    if (!tip) {
      var popovers = document.querySelectorAll(".popover");
      tip = popovers[popovers.length - 1];
    }
    if (tip) {
      tip.addEventListener("mouseenter", cancelHide);
      tip.addEventListener("mouseleave", scheduleHide);
    }
  });
}
</script>
{% if use_svg %}
{# ── SVG interactivity script ── #}
<script>
(function () {
  "use strict";

  var portData = [
    {% for device, interfaces in ports_chassis.items %}
    {% for int in interfaces %}
    {
      device: "{{ device }}",
      stylename: "{{ int.stylename }}",
      detailUrl: "{{ int.get_absolute_url }}",
      traceUrl: "{{ int.get_absolute_url }}trace/",
      name: "{{ int.name|escapejs }}",
      enabled: {% if int.enabled or int.is_port %}true{% else %}false{% endif %},
      connected: {% if int.connected_endpoints|length > 0 or int.is_port and int.link_peers|length > 0 %}true{% else %}false{% endif %},
      partiallyConnected: {% if not int.is_port and int.link_peers|length > 0 and int.connected_endpoints|length == 0 %}true{% else %}false{% endif %},
      cableColor: "{% if cable_colors == 'on' and int.cable.color != '' %}{{ int.cable.color }}{% endif %}",
      cableNoColor: {% if cable_colors == "on" and int.cable.color == "" or cable_colors == "on" and int.cable == None %}true{% else %}false{% endif %},
      connectedEndpoints: [{% for ce in int.connected_endpoints %}"{{ ce.device }} | {{ ce.name }}"{% if not forloop.last %},{% endif %}{% endfor %}],
      linkPeers: [{% for lp in int.link_peers %}"{% if lp.device %}{{ lp.device }} | {{ lp.name }}{% elif lp.circuit %}{{ lp }}{% endif %}"{% if not forloop.last %},{% endif %}{% endfor %}]
    },
    {% endfor %}
    {% endfor %}
  ];

  function applyPortStatus() {
    portData.forEach(function (p) {
      var wrapper = document.getElementById("dv-svg-wrapper-" + p.device);
      var groups = wrapper
        ? wrapper.querySelectorAll(".dv-port." + CSS.escape(p.stylename))
        : document.querySelectorAll(".dv-port." + CSS.escape(p.stylename));
      groups.forEach(function (g) {
        var rect = g.querySelector(".dv-port-rect");

        if (p.cableNoColor) {
          g.classList.add("nocolor");
        } else if (p.cableColor) {
          if (rect) rect.setAttribute("fill", "#" + p.cableColor);
        } else if (p.connected) {
          g.classList.add("bg-success");
        } else if (p.partiallyConnected) {
          g.classList.add("bg-warning");
        } else if (p.enabled) {
          g.classList.add("bg-secondary");
        } else {
          g.classList.add("bg-danger");
        }

        // Always show a small warning dot for partially connected ports,
        // even when cable color mode overrides the fill colour.
        if (p.partiallyConnected && rect) {
          var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          dot.setAttribute("class", "dv-partial-dot");
          dot.setAttribute("cx", parseFloat(rect.getAttribute("x")) + parseFloat(rect.getAttribute("width")) - 3);
          dot.setAttribute("cy", parseFloat(rect.getAttribute("y")) + 3);
          dot.setAttribute("r", "2.5");
          g.appendChild(dot);
        }

        g.setAttribute("role", "link");
        g.style.cursor = "pointer";
        g.addEventListener("click", function () { window.location.href = p.detailUrl; });
        g.addEventListener("keydown", function (e) {
          if (e.key === "Enter" || e.key === " ") { window.location.href = p.detailUrl; }
        });

        var popTitle = p.name;
        var peers = p.connectedEndpoints.length > 0 ? p.connectedEndpoints : p.linkPeers;
        if (peers.length > 0) { popTitle += "<hr>" + peers.join("<br>"); }
        var popContent = '<a href="' + p.traceUrl + '">Trace</a>';
        g.setAttribute("data-bs-toggle", "popover");
        g.setAttribute("data-bs-trigger", "hover focus");
        g.setAttribute("data-bs-placement", "top");
        g.setAttribute("data-bs-html", "true");
        g.setAttribute("data-bs-container", "body");
        g.setAttribute("data-bs-custom-class", "device-view-tooltip");
        g.setAttribute("data-bs-title", popTitle);
        g.setAttribute("data-bs-content", popContent);
        var svgTitle = g.querySelector("title");
        if (svgTitle) svgTitle.textContent = p.name;
        if (typeof Popover !== "undefined") {
          dvInitPopover(g, { title: popTitle, content: popContent });
        }
      });
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    applyPortStatus();
  });
})();
</script>
{% endif %}

<div class="card">
	<div class="card-header">
		<h4>Options</h4>
	</div>
	<div class="card-body">
		<form>
			<div class="form-check">
				<input onChange="this.form.submit()" type="checkbox" name="cable_colors" class="form-check-input" {% if cable_colors == "on" %}checked{% endif %} />
				<label for="cable_colors" class="form-check-label">Cable Colors</label>
			</div>
		</form>
	</div>
</div>
{% if not use_svg %}
<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.device-view-port[data-bs-toggle="popover"]').forEach(function (el) {
    dvInitPopover(el, {
      title: el.getAttribute("data-bs-title"),
      content: el.getAttribute("data-bs-content")
    });
  });
});
</script>
{% endif %}
{% endblock %}