{% extends "base.html" %}
{% block title %}Topology - WireGuard Admin{% endblock %}
{% block breadcrumbs %}<span>/</span> <span>Topology</span>{% endblock %}
{% block content %}
<div class="mb-6 flex items-center justify-between">
  <h1 class="text-2xl font-bold">Network Topology</h1>
  <div id="isolation-badge"></div>
</div>

<div class="rounded-xl bg-white p-4 shadow-sm">
  <div id="topology-chart" class="w-full" style="height: 560px;"></div>
</div>

<p class="mt-3 text-sm text-slate-500">
  Left to right: interface, peers, site subnets. Dashed links mean the peer is offline or disabled.
  Scroll to zoom, drag to pan, click a peer to open its detail page.
</p>
{% endblock %}
{% block scripts %}
<script src="/static/echarts.min.js"></script>
<script src="/static/topology.js"></script>
{% endblock %}