{% extends "base.html" %}
{% block title %}Federation network — psyc admin{% endblock %}
{% block body_class %}wide{% endblock %}
{% block content %}
<section class="panel">
  <div class="panel-head">
    <h1>Federation Network</h1>
    <span class="count">{{ stats.total_peers }} direct · <span id="fn-transitive-count">…</span> transitive</span>
  </div>
  <p class="page-intro">Force-directed map of the federation this node sits inside. Self at the center, directly-registered peers at distance 1, peers-of-peers (fetched from each trusted peer's <code>/federation/network</code>) at distance 2. Edges: <em>vouches</em> (solid), <em>signals</em> (dashed, thickness ∝ 24h volume), <em>knows</em> (dotted grey).</p>
  <p class="back"><a href="/admin/federation">← federation hub</a> &nbsp;·&nbsp; <a href="/admin/federation/discovery">discovery</a> &nbsp;·&nbsp; <a href="/admin/federation/vouches">vouches</a> &nbsp;·&nbsp; <a href="/admin/federation/quorum">quorum</a> &nbsp;·&nbsp; <a href="/admin/federation/log">log</a></p>

  <div class="fn-stats">
    <div class="fn-stat"><div class="fn-stat-label">direct peers</div><div class="fn-stat-value">{{ stats.total_peers }}</div></div>
    <div class="fn-stat"><div class="fn-stat-label">vouched / trusted</div><div class="fn-stat-value">{{ stats.vouched_peers }}</div></div>
    <div class="fn-stat"><div class="fn-stat-label">vouches issued</div><div class="fn-stat-value">{{ stats.vouches_issued }}</div></div>
    <div class="fn-stat"><div class="fn-stat-label">signals (24h)</div><div class="fn-stat-value">{{ stats.signals_buffered_24h }}</div></div>
    <div class="fn-stat"><div class="fn-stat-label">distinct hashes</div><div class="fn-stat-value">{{ stats.distinct_signal_hashes_24h }}</div></div>
    <div class="fn-stat"><div class="fn-stat-label">quorum-met</div><div class="fn-stat-value">{{ stats.quorum_met_count }}</div></div>
  </div>

  <div class="fn-search-bar">
    <label for="fn-search">filter</label>
    <input type="search" id="fn-search" class="fn-search-input" placeholder="domain or fingerprint substring…" autocomplete="off" spellcheck="false">
    <span id="fn-search-count" class="fn-search-count"></span>
  </div>

  <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="self on top, direct peers in a row, transitives below">Hierarchical</button>
        <button type="button" class="topo-layout"           data-layout="radial"  title="self at center, peers on a ring, transitives outside">Radial</button>
      </div>
      <label class="topo-toggle"><input type="checkbox" id="fn-flow" checked> signal flow</label>
      <span class="topo-legend"><span class="lg-swatch fn-lg-self"></span>self</span>
      <span class="topo-legend"><span class="lg-swatch fn-lg-trusted"></span>trusted</span>
      <span class="topo-legend"><span class="lg-swatch fn-lg-vouched"></span>vouched</span>
      <span class="topo-legend"><span class="lg-swatch fn-lg-unknown"></span>unknown</span>
      <span class="topo-legend"><span class="lg-swatch fn-lg-blocked"></span>blocked</span>
      <button type="button" id="fn-reset" class="btn">re-settle</button>
      <span class="topo-hint">drag · scroll to zoom · hover for tooltip</span>
    </div>
    <svg id="federation-network-graph" preserveAspectRatio="xMidYMid meet"></svg>
    <div id="fn-tooltip" class="fn-tooltip"></div>
    <div id="fn-loading" class="page-intro" style="text-align:center; margin-top:10px;">loading federation network…</div>
    <div id="fn-error" class="gate-error" style="display:none;"></div>
  </div>

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

  <div class="fn-timeline-wrap">
    <div class="fn-timeline-head">
      <h3>signals · last 24h</h3>
      <span class="meta" id="fn-timeline-meta">—</span>
    </div>
    <div id="fn-timeline" class="fn-timeline" aria-label="signals received per hour for the last 24 hours"></div>
    <div id="fn-timeline-axis" class="fn-timeline-axis"></div>
  </div>

  <p class="page-intro" style="margin-top:18px;">Self fingerprint: <code style="color:var(--accent);">{{ fingerprint }}</code></p>
</section>

<script src="/static/federation_network.js" defer></script>
{% endblock %}