{% extends "base.html" %}
{% block title %}{% if mode == 'register' %}创建账号{% elif mode == 'sent' %}查收邮件{% elif mode == 'verified' %}邮箱验证{% else %}登录{% endif %} · WK1NG VPN{% endblock %}
{% block content %}
<section class="auth-layout">
  <div class="auth-intro">
    <div class="eyebrow"><span class="signal-dot"></span> 安全、简单的连接体验</div>
    <h1>连接世界，<br><em>由你掌控。</em></h1>
    <p>一个账号管理你的线路、订阅和使用时间。付款由管理员核对后开通，进度始终看得见。</p>
    <div class="intro-points"><span>01 / 邮箱注册</span><span>02 / 提交付款</span><span>03 / 获取订阅</span></div>
  </div>
  <div class="auth-card">
    {% if error %}<div class="alert error" role="alert">{{ error }}</div>{% endif %}
    {% if mode == 'login' %}
      <p class="card-kicker">欢迎回来</p><h2>登录 WK1NG VPN</h2><p class="muted">查看服务状态和订阅地址。</p>
      <form method="post" action="/login" class="form-stack"><input type="hidden" name="csrf" value="{{ csrf }}">
        <label>邮箱<input name="email" type="email" autocomplete="username" required></label>
        <label>密码<input name="password" type="password" autocomplete="current-password" required></label>
        <button class="button primary" type="submit">登录账号 <span aria-hidden="true">→</span></button>
      </form>
      <p class="form-foot">还没有账号？<a href="/register">现在注册</a></p>
    {% elif mode == 'register' %}
      <p class="card-kicker">开始使用</p><h2>创建你的账号</h2><p class="muted">注册后先验证邮箱，再提交付款申请。</p>
      {% if email_ready %}
      <form method="post" action="/register" class="form-stack"><input type="hidden" name="csrf" value="{{ csrf }}">
        <label>邮箱<input name="email" type="email" autocomplete="email" required maxlength="254"></label>
        <label>密码<input name="password" type="password" autocomplete="new-password" minlength="12" maxlength="128" required><small>至少 12 位字符</small></label>
        <button class="button primary" type="submit">发送验证邮件 <span aria-hidden="true">→</span></button>
      </form>
      {% else %}<div class="empty-state"><strong>注册即将开放</strong><p>邮件服务还在配置中，请稍后再来。</p></div>{% endif %}
      <p class="form-foot">已经注册？<a href="/login">返回登录</a></p>
    {% elif mode == 'sent' %}
      <p class="card-kicker">验证邮箱</p><h2>请查收邮件</h2><p class="muted">验证链接已发送到 {{ email }}。链接 1 小时内有效，也请检查垃圾邮件箱。</p>
      <form method="post" action="/resend-verification" class="form-stack"><input type="hidden" name="csrf" value="{{ csrf }}"><input type="hidden" name="email" value="{{ email }}"><button class="button secondary" type="submit">重发验证邮件</button></form>
      <p class="form-foot"><a href="/login">返回登录</a></p>
    {% else %}
      <p class="card-kicker">邮箱验证</p><h2>{% if error %}验证未完成{% else %}邮箱已验证{% endif %}</h2><p class="muted">{% if error %}可以返回注册邮箱页面重发验证邮件。{% else %}现在可以登录并查看购买流程。{% endif %}</p>
      <a class="button primary" href="/login">前往登录 <span aria-hidden="true">→</span></a>
    {% endif %}
  </div>
</section>
{% endblock %}