{% extends "base.html" %}
{% block title %}节点管理 · jiedian{% endblock %}
{% block body %}
<header class="topbar">
  <div class="brand">
    <svg class="brand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <path d="M12 2L2 7l10 5 10-5-10-5z"/>
      <path d="M2 17l10 5 10-5"/>
      <path d="M2 12l10 5 10-5"/>
    </svg>
    <div>
      <div class="brand-name">jiedian</div>
      <div class="brand-domain">{{ domain }}</div>
    </div>
  </div>
  <a class="btn ghost" href="{{ url_for('logout') }}">退出</a>
</header>

<main class="container">
  <section class="hero">
    <div>
      <h1>节点控制台</h1>
      <p class="hero-tag">VPS {{ vps_ip }} · HYSTERIA2 UDP 8443+</p>
    </div>
    <button id="addBtn" class="btn primary">+ 添加节点</button>
  </section>

  <section id="summaryBar" class="summary-bar">
    <div class="summary-item">
      <div class="summary-head">
        <svg class="summary-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
        </svg>
        <span class="summary-label">在线节点</span>
      </div>
      <strong id="summaryOnline">-</strong>
    </div>
    <div class="summary-item speed-up">
      <div class="summary-head">
        <svg class="summary-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 19V5M5 12l7-7 7 7"/>
        </svg>
        <span class="summary-label">实时上行</span>
      </div>
      <strong id="summaryUp">-</strong>
    </div>
    <div class="summary-item speed-down">
      <div class="summary-head">
        <svg class="summary-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
        <span class="summary-label">实时下行</span>
      </div>
      <strong id="summaryDown">-</strong>
    </div>
    <div class="summary-item">
      <div class="summary-head">
        <svg class="summary-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
        </svg>
        <span class="summary-label">统计服务</span>
      </div>
      <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 speed">
            <span class="stat-label">实时 ↑</span>
            <span class="stat-value" data-role="speed-up">-</span>
          </div>
          <div class="stat-box speed">
            <span class="stat-label">实时 ↓</span>
            <span class="stat-value" data-role="speed-down">-</span>
          </div>
          <div class="stat-box total">
            <span class="stat-label">累计 ↑</span>
            <span class="stat-value" data-role="total-up">-</span>
          </div>
          <div class="stat-box total">
            <span class="stat-label">累计 ↓</span>
            <span class="stat-value" data-role="total-down">-</span>
          </div>
        </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>
        <p class="link-hint muted">一设备一节点 · SNI {{ domain }} · 端口 8443、8444…</p>
      </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 %}