{% extends "base.html" %}
{% block content %}
<div class="page-head"><h1>Dashboard</h1></div>
<section class="stats">
  <article class="card">
    <div class="label">Tunnel status</div>
    <div class="badge {{ health }}">{{ health|upper }}</div>
    <p class="muted">Last handshake {{ handshake_age if handshake_age is not none else "unknown" }} seconds ago</p>
  </article>
  <article class="card">
    <div class="label">Instance</div>
    <h2>{{ instance_short or "Not enrolled" }}</h2>
    <p>Tunnel IP: {{ instance.wg_ip if instance else "none" }}</p>
    <p class="muted">Edge: wg-diglett.calhta.com:54420</p>
  </article>
  <article class="card">
    <div class="label">Agent</div>
    <p><span class="dot {{ 'green' if agent_state == 'active' else 'red' }}"></span>Agent: {{ agent_state }}</p>
    <p class="muted">Last heartbeat: {{ heartbeat_age if heartbeat_age is not none else "unknown" }} seconds ago</p>
    <p>Version: {{ version }}</p>
  </article>
</section>
<section class="split">
  <article class="card">
    <div class="section-title"><h2>Advertised Routes</h2><a href="/routes">Routes page</a></div>
    {% if routes %}
      <ul class="clean-list">{% for route in routes %}<li><strong>{{ route.cidr }}</strong><span>{{ route.interface }}</span></li>{% endfor %}</ul>
    {% else %}<p class="muted">No routes advertised.</p>{% endif %}
  </article>
  <article class="card">
    <div class="section-title"><h2>Clients</h2><a href="/clients">Clients page</a></div>
    <p class="big-number">{{ clients|length }}</p>
    {% if latest_client %}<p>Most recent: <strong>{{ latest_client.label }}</strong></p><p class="muted">{{ latest_client.created_at }}</p>{% else %}<p class="muted">No client configs created.</p>{% endif %}
  </article>
</section>
{% endblock %}