{% extends "base.html" %}
{% block head %}<meta http-equiv="refresh" content="30">{% endblock %}
{% block content %}
<section class="stats-grid">
  <article class="card status-card status-{{ health }}">
    <div class="card-label">Tunnel Status</div>
    <div class="status-card-body">
      <div class="status-icon">
        <svg viewBox="0 0 64 64" aria-hidden="true"><path d="M32 6 52 14v16c0 13-8.3 22.4-20 28C20.3 52.4 12 43 12 30V14L32 6Z"/><path d="m23 32 6 6 13-16"/></svg>
      </div>
      <div>
        <div class="status-badge {{ health }}">{{ health|upper }}</div>
        <p>Last handshake <strong>{{ handshake_age if handshake_age is not none else "unknown" }}</strong> seconds ago</p>
      </div>
    </div>
  </article>

  <article class="card instance-card">
    <div class="card-label">Instance</div>
    <div class="card-split">
      <div>
        <h2>{{ instance_short or "Not enrolled" }}</h2>
        <dl>
          <dt>Tunnel IP</dt><dd>{{ instance.wg_ip if instance else "none" }}</dd>
          <dt>Edge</dt><dd>{{ edge_endpoint }}</dd>
        </dl>
      </div>
      <div class="soft-icon">
        <svg viewBox="0 0 64 64" aria-hidden="true"><rect x="16" y="10" width="32" height="12" rx="3"/><rect x="16" y="26" width="32" height="12" rx="3"/><rect x="16" y="42" width="32" height="12" rx="3"/><circle cx="39" cy="16" r="2"/><circle cx="45" cy="16" r="2"/><circle cx="39" cy="32" r="2"/><circle cx="45" cy="32" r="2"/><circle cx="39" cy="48" r="2"/><circle cx="45" cy="48" r="2"/></svg>
      </div>
    </div>
  </article>

  <article class="card agent-card">
    <div class="card-label">Agent</div>
    <div class="card-split">
      <div>
        <p class="state-line"><span class="dot {{ 'green' if agent_state == 'active' else 'red' }}"></span>Agent: {{ agent_state }}</p>
        <dl>
          <dt>Last heartbeat</dt><dd>{{ heartbeat_age if heartbeat_age is not none else "unknown" }} seconds ago</dd>
          <dt>Version</dt><dd>{{ version }}</dd>
        </dl>
      </div>
      <div class="agent-shield">
        <svg viewBox="0 0 64 64" aria-hidden="true"><path d="M32 5 53 13v17c0 13.8-8.8 23.6-21 29-12.2-5.4-21-15.2-21-29V13L32 5Z"/><path d="M24 25c4-5 12-5 16 0M24 39c4 5 12 5 16 0M22 32h20M32 20v24"/></svg>
      </div>
    </div>
  </article>
</section>

<section class="dashboard-panels">
  <article class="card">
    <div class="panel-title"><h2><i data-lucide="git-branch"></i>Advertised Routes</h2><a href="/routes">View all routes →</a></div>
    {% if routes %}
    <table class="data-table compact">
      <thead><tr><th>Route</th><th>Source / Interface</th></tr></thead>
      <tbody>
        {% for route in routes %}
        <tr><td><span class="dot green"></span>{{ route.cidr }}</td><td><span class="chip">{{ route.interface }}</span></td></tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="empty-copy">No routes advertised.</p>
    {% endif %}
    <p class="panel-foot"><i data-lucide="refresh-cw"></i>Last updated: 0 seconds ago</p>
  </article>

  <article class="card clients-summary">
    <div class="panel-title"><h2><i data-lucide="users"></i>Clients</h2><a href="/clients">View all clients →</a></div>
    <div class="client-count">{{ clients|length }}</div>
    <div class="client-copy">Total client{% if clients|length != 1 %}s{% endif %}</div>
    {% if latest_client %}
    <div class="latest-client">
      <span class="dot green"></span>
      <div><strong>{{ latest_client.label }}</strong><p>{{ latest_client.created_at }}</p></div>
    </div>
    {% else %}
    <p class="empty-copy">No client configs created.</p>
    {% endif %}
  </article>
</section>

<section class="card flow-card">
  <div class="panel-title"><h2><i data-lucide="network"></i>Tunnel Connection Flow</h2></div>
  <div class="flow">
    <div class="flow-line"></div>
    <div class="flow-node">
      <svg viewBox="0 0 96 72" aria-hidden="true"><rect x="16" y="28" width="42" height="26" rx="4"/><path d="M22 28V14M48 28V14M58 40h14v16H58z"/><path d="M62 40v-5a5 5 0 0 1 10 0v5"/><circle cx="25" cy="41" r="3"/><circle cx="36" cy="41" r="3"/><circle cx="47" cy="41" r="3"/></svg>
      <h3>Behind NAT</h3><p>Your Network</p>
    </div>
    <div class="flow-node edge">
      <svg viewBox="0 0 96 72" aria-hidden="true"><rect x="28" y="10" width="40" height="14" rx="4"/><rect x="28" y="29" width="40" height="14" rx="4"/><rect x="28" y="48" width="40" height="14" rx="4"/><circle cx="56" cy="17" r="2"/><circle cx="62" cy="17" r="2"/><circle cx="56" cy="36" r="2"/><circle cx="62" cy="36" r="2"/><circle cx="56" cy="55" r="2"/><circle cx="62" cy="55" r="2"/></svg>
      <h3>Edge Relay</h3><p>wg-diglett.calhta.com</p>
    </div>
    <div class="flow-node">
      <svg viewBox="0 0 96 72" aria-hidden="true"><path d="M22 52h52l8 10H14l8-10Z"/><rect x="26" y="12" width="44" height="36" rx="4"/><path d="M48 23 58 27v8c0 6-4 10-10 13-6-3-10-7-10-13v-8l10-4Z"/><path d="m43 34 4 4 8-10"/></svg>
      <h3>Peer</h3><p>Connected Client</p>
    </div>
  </div>
</section>
{% endblock %}