{% extends "admin/layout.html" %}
{% block admin_title %}Дашборд{% endblock %}
{% block admin_content %}
<div class="admin-top">
  <h1>Дашборд</h1>
</div>

<div class="stats">
  <div class="stat">
    <div class="label">Серверы</div>
    <div class="value">{{ servers|length }}</div>
  </div>
  <div class="stat">
    <div class="label">Клиенты</div>
    <div class="value">{{ clients_total }}</div>
  </div>
  <div class="stat">
    <div class="label">Активные</div>
    <div class="value">{{ clients_active }}</div>
  </div>
</div>

<div class="panel">
  <div class="panel-head">
    <strong>Протоколы</strong>
    <a class="btn btn-sm btn-accent" href="/admin/clients">Управлять клиентами</a>
  </div>
  <table>
    <thead>
      <tr>
        <th>Имя</th>
        <th>Протокол</th>
        <th>Endpoint</th>
        <th>Подсеть</th>
        <th>Статус</th>
      </tr>
    </thead>
    <tbody>
      {% for s in servers %}
      <tr>
        <td>{{ s.name }}</td>
        <td><span class="badge badge-proto">{{ s.protocol }}</span></td>
        <td class="mono" style="background:transparent;color:inherit;padding:0">{{ s.public_host }}:{{ s.public_port }}</td>
        <td>{{ s.subnet }}</td>
        <td>
          {% if s.is_enabled %}
          <span class="badge badge-ok">enabled</span>
          {% else %}
          <span class="badge badge-off">disabled</span>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="muted">Серверы ещё не созданы</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}