{% extends "base.html" %}
{% block title %}节点管理 · jiedian{% endblock %}
{% block body %}
<header class="topbar">
  <div>
    <strong>jiedian 面板</strong>
    <span class="muted"> · {{ domain }}</span>
  </div>
  <a class="btn ghost" href="{{ url_for('logout') }}">退出</a>
</header>

<main class="container">
  <section class="hero">
    <div>
      <h1>节点列表</h1>
      <p class="muted">VPS {{ vps_ip }} · Reality 443 · Hysteria2 8443</p>
    </div>
    <button id="addBtn" class="btn primary">+ 添加节点</button>
  </section>

  <section id="summaryBar" class="summary-bar">
    <div class="summary-item">
      <span class="summary-label">在线节点</span>
      <strong id="summaryOnline">-</strong>
    </div>
    <div class="summary-item">
      <span class="summary-label">实时上行</span>
      <strong id="summaryUp">-</strong>
    </div>
    <div class="summary-item">
      <span class="summary-label">实时下行</span>
      <strong id="summaryDown">-</strong>
    </div>
    <div class="summary-item">
      <span class="summary-label">统计服务</span>
      <strong id="summaryStatus" class="status-text">检测中</strong>
    </div>
  </section>

  <div id="toast" class="toast hidden"></div>
  <div id="nodeList" class="node-list">
    {% for node in nodes %}
    <article class="node-card" data-id="{{ node.id }}">
      <div class="node-head">
        <div class="node-title">
          <h2>{{ node.name }}</h2>
          <span class="status-badge offline" data-role="status">检测中</span>
        </div>
        <span class="tag">{{ node.created_at[:10] }}</span>
      </div>
      <div class="node-stats">
        <div class="stat-grid">
          <div class="stat-box">
            <span class="stat-label">连接数</span>
            <span class="stat-value" data-role="connections">-</span>
          </div>
          <div class="stat-box">
            <span class="stat-label">实时 ↑</span>
            <span class="stat-value" data-role="speed-up">-</span>
          </div>
          <div class="stat-box">
            <span class="stat-label">实时 ↓</span>
            <span class="stat-value" data-role="speed-down">-</span>
          </div>
          <div class="stat-box">
            <span class="stat-label">累计 ↑</span>
            <span class="stat-value" data-role="total-up">-</span>
          </div>
          <div class="stat-box">
            <span class="stat-label">累计 ↓</span>
            <span class="stat-value" data-role="total-down">-</span>
          </div>
        </div>
      </div>
      <div class="field">
        <label>VLESS + Reality</label>
        <div class="copy-row">
          <input class="copy-input" readonly value="{{ node.links.vless }}">
          <button type="button" class="btn copy-btn">复制</button>
        </div>
      </div>
      <div class="field">
        <label>Hysteria2</label>
        <div class="copy-row">
          <input class="copy-input" readonly value="{{ node.links.hy2 }}">
          <button type="button" class="btn copy-btn">复制</button>
        </div>
      </div>
      <div class="node-actions">
        <button class="btn danger delete-btn" data-id="{{ node.id }}">删除</button>
      </div>
    </article>
    {% endfor %}
  </div>
</main>

<div id="modal" class="modal hidden">
  <div class="modal-card">
    <h3>添加节点</h3>
    <label>节点名称</label>
    <input id="nodeName" type="text" placeholder="例如：手机、电脑">
    <div class="modal-actions">
      <button id="cancelBtn" class="btn ghost">取消</button>
      <button id="confirmAddBtn" class="btn primary">创建</button>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ panel_base }}/static/app.js"></script>
{% endblock %}