{% extends 'base.html' %}
{% block title %}注册{% endblock %}

{% block content %}
<div class="card auth-card shadow-lg">
  <div class="card-body p-5">
    <div class="text-center mb-4">
      <i class="bi bi-person-plus text-primary" style="font-size:3rem"></i>
      <h2 class="fw-bold mt-2">创建账号</h2>
    </div>

    <form method="POST" action="{{ url_for('auth.register') }}" novalidate>
      {{ form.hidden_tag() }}

      {% macro field(f, placeholder='', type='text') %}
      <div class="mb-3">
        <label class="form-label">{{ f.label.text }}</label>
        {{ f(class='form-control' + (' is-invalid' if f.errors else ''),
             placeholder=placeholder, type=type) }}
        {% for err in f.errors %}
          <div class="invalid-feedback">{{ err }}</div>
        {% endfor %}
      </div>
      {% endmacro %}

      {{ field(form.username, '3-64 位用户名') }}
      {{ field(form.email, 'your@email.com', 'email') }}

      <div class="mb-3">
        <label class="form-label">密码</label>
        <div class="input-group">
          {{ form.password(class='form-control' + (' is-invalid' if form.password.errors else ''),
             placeholder='至少 8 位', id='regPwd') }}
          <button class="btn btn-outline-secondary" type="button"
                  onclick="togglePwd('regPwd',this)">
            <i class="bi bi-eye"></i>
          </button>
        </div>
        {% for err in form.password.errors %}
          <div class="text-danger small">{{ err }}</div>
        {% endfor %}
      </div>

      <div class="mb-4">
        <label class="form-label">确认密码</label>
        {{ form.password2(class='form-control' + (' is-invalid' if form.password2.errors else ''),
           placeholder='再次输入密码') }}
        {% for err in form.password2.errors %}
          <div class="invalid-feedback">{{ err }}</div>
        {% endfor %}
      </div>

      <button type="submit" class="btn btn-success btn-lg w-100">
        <i class="bi bi-check-circle me-1"></i>注册
      </button>
    </form>

    <hr class="my-4">
    <p class="text-center text-muted mb-0">
      已有账号？<a href="{{ url_for('auth.login') }}" class="text-decoration-none">立即登录</a>
    </p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function togglePwd(id, btn) {
  const input = document.getElementById(id);
  const icon = btn.querySelector('i');
  input.type = input.type === 'password' ? 'text' : 'password';
  icon.className = input.type === 'text' ? 'bi bi-eye-slash' : 'bi bi-eye';
}
</script>
{% endblock %}