{% extends "base.html" %}
{% block title %}Topology{% endblock %}

{% block content %}
<div class="lt-page-header">
  <div>
    <h1 class="lt-page-title">Topology</h1>
    <p class="g-page-sub">Every device and cable as the switches see them right now. Drag to pan, scroll or pinch to zoom. Hover a device to trace its path to the internet; click a cable for its details, or a group of unknown devices to open it.</p>
  </div>
</div>

<div class="tp-toolbar no-print" role="toolbar" aria-label="Topology view">
  <div class="tp-filters" role="group" aria-label="Show">
    <label class="tp-filter">Unknown devices
      <select class="lt-select tp-select" data-filter="stubs" aria-label="Unknown devices">
        <option value="grouped">grouped per switch</option>
        <option value="all">one by one</option>
        <option value="none">hidden</option>
      </select></label>
    <label class="tp-filter"><input type="checkbox" data-filter="power"> Power gear</label>
    <label class="tp-filter"><input type="checkbox" data-filter="traffic"> Traffic</label>
    <label class="tp-filter" title="Each server's slower second cable. A problem cable is always shown."><input type="checkbox" data-filter="mgmt"> Server 1G links</label>
    <label class="tp-filter"><input type="checkbox" data-filter="alerts"> Alerts only</label>
  </div>
  <div class="tp-zoom" role="group" aria-label="Zoom">
    <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-zoom="out" aria-label="Zoom out" title="Zoom out (-)">&minus;</button>
    <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-zoom="fit" title="Fit everything (0)">Fit</button>
    <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-zoom="in" aria-label="Zoom in" title="Zoom in (+)">+</button>
  </div>
  <span class="tp-updated" id="tp-updated" aria-live="polite"></span>
</div>

<div class="tp-warnings" id="tp-warnings" role="status" hidden></div>
<div class="tp-summary" id="tp-summary" aria-live="polite"></div>

<div class="tp-canvas" id="tp-canvas" tabindex="0" aria-label="Network topology diagram. Use plus, minus and zero to zoom, and Tab to move between devices and cables.">
  <svg class="tp-svg" id="tp-svg" xmlns="http://www.w3.org/2000/svg" role="group" aria-label="Network topology">
    <g id="tp-world"></g>
  </svg>
  <div class="link-loading tp-loading" id="tp-loading">Loading topology</div>
  <aside class="tp-panel" id="tp-panel" hidden aria-live="polite" aria-label="Cable details"></aside>
  <div class="tp-pop" id="tp-pop" role="dialog" aria-label="What this outlet feeds" hidden></div>
</div>

<div class="tp-legend" aria-label="Legend">
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-dac" d="M2 6 H38"/></svg>DAC</span>
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-fibre" d="M2 6 H38"/></svg>Fibre (multimode)</span>
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-wanfibre" d="M2 6 H38"/></svg>Fibre (provider)</span>
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-sfp" d="M2 6 H38"/></svg>SFP+ module</span>
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-copper" d="M2 6 H38"/></svg>Copper</span>
  <span class="tp-key">Thicker = faster (10G, 1G, 100M)</span>
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-key-down" d="M2 6 H38"/></svg>Down</span>
  <span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-key-ghost" d="M2 6 H38"/></svg>Last seen</span>
  <span class="tp-key"><span class="tp-key-warn" aria-hidden="true">⚠</span>Port name points at another device</span>
</div>
{% endblock %}

{% block scripts %}
<script>const TOPO_CAN_EDIT = {{ 'true' if can_edit else 'false' }};</script>
<script src="{{ url_for('static', filename='faceplates.js') }}"></script>
<script src="{{ url_for('static', filename='fronts.js') }}"></script>
<script src="{{ url_for('static', filename='topology.js') }}"></script>
{% endblock %}