{% extends "base.html" %}
{% block title %}用户注册 | SCU 选课控制台{% endblock %}
{% block body_class %}auth-body{% endblock %}
{% block content %}
<section class="auth-layout">
    <div class="hero-panel reveal-up">
        <span class="eyebrow">Registration</span>
        <h1>使用注册码创建你的抢课账号。</h1>
        <p>
            注册成功后，后续就可以直接使用学号和教务处密码登录，不需要重复输入注册码。
        </p>
        <div class="hero-metrics">
            <article>
                <strong>注册码校验</strong>
                <span>注册码由管理员在后台创建和管理</span>
            </article>
            <article>
                <strong>使用学号注册</strong>
                <span>请填写你的学号和教务处密码</span>
            </article>
            <article>
                <strong>自动进入用户体系</strong>
                <span>注册后即可管理课程目标与查看日志</span>
            </article>
        </div>
    </div>

    <div class="auth-card reveal-up delay-1">
        <div class="card-head compact">
            <span class="kicker">学生注册</span>
            <h2>注册新账号</h2>
            <p>请使用管理员发放的注册码，并填写学号与教务处密码。</p>
        </div>
        <form method="post" class="form-grid">
            <label class="field">
                <span>注册码</span>
                <input type="text" name="registration_code" placeholder="例如 SACC-AB12CD34" autocapitalize="characters" required>
            </label>
            <label class="field">
                <span>显示名称</span>
                <input type="text" name="display_name" placeholder="可选昵称或备注">
            </label>
            <label class="field">
                <span>学号</span>
                <input type="text" name="student_id" inputmode="numeric" placeholder="请输入学号" required>
            </label>
            <label class="field">
                <span>教务处密码</span>
                <input type="password" name="password" placeholder="请输入教务处密码" required>
            </label>
            <button type="submit" class="btn btn-primary btn-lg">完成注册</button>
        </form>
        <div class="auth-footnote">
            已有账号？直接返回 <a href="{{ url_for('login') }}">用户登录</a>。
        </div>
    </div>
</section>
{% endblock %}