{% 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>

  <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">
        <h2>{{ node.name }}</h2>
        <span class="tag">{{ node.created_at[:10] }}</span>
      </div>
      <div class="field">
        <label>VLESS + Reality</label>
        <div class="copy-row">
          <input readonly value="{{ node.links.vless }}">
          <button class="btn" data-copy="{{ node.links.vless }}">复制</button>
        </div>
      </div>
      <div class="field">
        <label>Hysteria2</label>
        <div class="copy-row">
          <input readonly value="{{ node.links.hy2 }}">
          <button class="btn" data-copy="{{ node.links.hy2 }}">复制</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="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}