{% extends "base.html" %}
{% set title = "注册" %}
{% set page = "register" %}

{% block content %}
<div style="display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 200px); padding: 20px;">
  <div class="card" style="width: 100%; max-width: 440px; padding: 32px 24px; border-radius: 20px; box-shadow: var(--shadow-lg);">
    <div style="text-align: center; margin-bottom: 32px;">
      <div style="width: 64px; height: 64px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; color: white; box-shadow: var(--shadow);">
        <i class="ri-user-add-fill" style="font-size: 2rem;"></i>
      </div>
      <h1 style="font-size: 1.75rem; margin-bottom: 8px;">创建账户</h1>
      <p class="muted" style="font-size: 1rem;">加入我们以获取更多高质量资源</p>
    </div>
    
    <div class="form">
      <div style="margin-bottom: 20px;">
        <label class="label" style="display: flex; align-items: center; gap: 6px;"><i class="ri-smartphone-line"></i> 手机号</label>
        <input id="phone" class="input" type="tel" inputmode="numeric" autocomplete="tel" maxlength="20" placeholder="请输入手机号" />
      </div>
      <div style="margin-bottom: 32px;">
        <label class="label" style="display: flex; align-items: center; gap: 6px;"><i class="ri-lock-password-line"></i> 密码（至少 6 位）</label>
        <input id="password" class="input" type="password" autocomplete="new-password" placeholder="请输入密码" />
      </div>
      
      <div style="display: flex; flex-direction: column; gap: 16px;">
        <button id="registerBtn" class="btn btn-primary" style="height: 48px; font-size: 1.1rem; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;">
          <i class="ri-user-add-line"></i> 注册
        </button>
        <div style="text-align: center; margin-top: 8px;">
          <span class="muted">已有账号？</span>
          <a id="toLogin" href="{{ url_for('page_login') }}" style="color: var(--brand); font-weight: 500; text-decoration: none;">去登录</a>
        </div>
      </div>
      <div id="msg" class="form-msg" style="display:none; margin-top: 16px; text-align: center; border-radius: 8px; padding: 12px;"></div>
    </div>
  </div>
</div>
{% endblock %}