{% extends "base.html" %}
{% block title %}Docker topology — psyc admin{% endblock %}
{% block body_class %}wide{% endblock %}
{% block content %}
<section class="panel">
  <div class="panel-head">
    <h1>Docker Topology</h1>
    <span class="count">{{ topo.containers|length }} containers · {{ topo.networks|length }} networks</span>
  </div>
  <p class="page-intro">Live read-only view of this host's Docker daemon, routed through <code>{{ topo.proxy }}</code>. The proxy exposes only GET on containers and networks — psyc cannot start, stop, exec into, or modify anything from here.</p>
  <p class="back"><a href="/admin">← back to admin</a></p>

  {% if topo.error %}
    <div class="gate-error">✗ Socket-proxy unreachable: {{ topo.error }}</div>
  {% endif %}

  {% if topo.containers %}
  <div class="topo-stage">
    <div class="topo-toolbar">
      <div class="topo-layouts" role="tablist">
        <button type="button" class="topo-layout is-active" data-layout="force"   title="organic force-directed">Force</button>
        <button type="button" class="topo-layout"           data-layout="hier"    title="host on top, switches in a row, containers grouped below">Hierarchical</button>
        <button type="button" class="topo-layout"           data-layout="radial"  title="host in center, switches on a ring, containers on the outer ring">Radial</button>
      </div>
      <label class="topo-toggle"><input type="checkbox" id="topo-flow" checked> traffic flow</label>
      <span class="topo-legend"><span class="lg-swatch lg-net"></span>switch</span>
      <span class="topo-legend"><span class="lg-swatch lg-run"></span>running</span>
      <span class="topo-legend"><span class="lg-swatch lg-stop"></span>exited</span>
      <button type="button" id="topo-reset" class="btn">re-settle</button>
      <span class="topo-hint">drag · scroll to zoom</span>
    </div>
    <svg id="topology-graph" preserveAspectRatio="xMidYMid meet"></svg>
    <script id="topo-data" type="application/json">{{ topo|tojson }}</script>
    <script src="/static/topology.js" defer></script>
  </div>
  {% endif %}

  <div id="topo-detail" class="topo-detail">
    <p class="topo-detail-empty">Click any node in the graph above to inspect it.</p>
  </div>

  <h2 style="margin-top:18px;">Networks</h2>
  <div class="net-grid">
    {% for n in topo.networks %}
    <div class="net-card net-driver-{{ n.driver }}">
      <div class="net-card-head">
        <div>
          <div class="net-name">{{ n.name }}</div>
          <div class="net-meta">{{ n.driver }} · {{ n.scope }}{% if n.internal %} · internal{% endif %}</div>
        </div>
        <span class="net-count">{{ n.containers|length }}</span>
      </div>
      {% if n.containers %}
      <div class="net-members">
        {% for c in n.containers %}
        <span class="net-chip"><span class="net-chip-name">{{ c.name }}</span><span class="net-chip-ip">{{ c.ip or '—' }}</span></span>
        {% endfor %}
      </div>
      {% else %}
      <div class="net-empty">(no attached containers)</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <h2 style="margin-top:24px;">Containers</h2>
  <table class="ledger">
    <thead><tr><th>Name</th><th>Image</th><th>State</th><th>Networks</th><th>Ports</th></tr></thead>
    <tbody>
    {% for c in topo.containers %}
      <tr class="ledger-row">
        <td><strong>{{ c.name }}</strong><div class="lg-sub">{{ c.id }}</div></td>
        <td class="lg-dest">{{ c.image }}</td>
        <td><span class="state-badge state-{{ c.state }}">{{ c.state }}</span></td>
        <td>
          {% for net in c.networks %}<span class="net-chip mini"><span class="net-chip-name">{{ net.name }}</span><span class="net-chip-ip">{{ net.ip or '—' }}</span></span>{% endfor %}
        </td>
        <td class="lg-sub">{% for p in c.ports %}{{ p }}{% if not loop.last %}<br>{% endif %}{% endfor %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</section>
{% endblock %}