{% extends "base.html" %}
{% block title %}活跃连接 · SOCKS Manager{% endblock %}

{% block content %}
<h5 class="mb-3"><i class="bi bi-activity"></i> 活跃连接 <span class="text-muted small">({{ conns|length }} 条)</span></h5>

<div class="card">
  <div class="card-body p-0">
    <table class="table table-dark table-hover align-middle">
      <thead>
        <tr><th>ID</th><th>实例</th><th>用户</th><th>源地址</th><th>目标地址</th>
            <th>协议</th><th>开始时间</th><th>入站</th><th>出站</th><th>操作</th></tr>
      </thead>
      <tbody>
        {% for c in conns %}
        <tr>
          <td><code>{{ c.id[:12] }}</code></td>
          <td>{{ c.instance }}</td>
          <td>{{ c.username or '-' }}</td>
          <td><code>{{ c.src }}</code></td>
          <td><code>{{ c.dst }}</code></td>
          <td><span class="badge badge-info">{{ c.protocol }}</span></td>
          <td><small class="text-muted">{{ c.started }}</small></td>
          <td>{{ fmtBytes(c.bytes_in) }}</td>
          <td>{{ fmtBytes(c.bytes_out) }}</td>
          <td>
            <form method="post" style="display:inline"
                  onsubmit="return confirm('确认断开此连接？')">
              <button class="btn btn-outline-danger btn-sm" type="submit">
                <i class="bi bi-x-circle"></i> 断开</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not conns %}
    <div class="text-center py-5 text-muted">
      <i class="bi bi-activity text-muted" style="font-size:2rem"></i>
      <p>当前无活跃连接</p>
    </div>
    {% endif %}
  </div>
</div>

{% endblock %}

{% block extra_script %}
<script>
// 每 5 秒刷新
setInterval(() => location.reload(), 5000);
</script>
{% endblock %}