{{template "header" .}}
{{template "member_auth_card_start"}}
<h1 class="text-2xl font-bold text-white mb-2">注册</h1>
<p data-bj-register-desc class="text-sm text-gray-400 mb-6">
    {{if .require_verify}}使用邮箱注册，验证码将发送至您的邮箱{{else}}使用邮箱注册，请设置登录密码{{end}}
</p>
<form data-bj-member-form="register" data-bj-require-verify="{{if .require_verify}}1{{else}}0{{end}}" class="space-y-4">
    <div>
        <label class="block text-sm text-gray-300 mb-1.5 mb-2" for="member-email">邮箱</label>
        <input id="member-email" name="email" type="email" autocomplete="email" required
            class="w-full px-4 py-2.5 rounded-md bg-black/40 border border-white/10 text-white outline-none focus:border-gold-500/50"
            placeholder="you@example.com">
    </div>
    <div data-bj-register-code-wrap class="{{if not .require_verify}}hidden {{end}}space-y-0">
        <label class="block text-sm text-gray-300 mb-1.5 mb-2" for="member-code">验证码</label>
        <div class="flex gap-2">
            <input id="member-code" name="code" type="text" inputmode="numeric" maxlength="6"
                {{if .require_verify}}required{{end}}
                class="flex-1 px-4 py-2.5 rounded-md bg-black/40 border border-white/10 text-white outline-none focus:border-gold-500/50"
                placeholder="6 位验证码">
            <button type="button" data-bj-send-code="register"
                class="shrink-0 px-4 py-2.5 rounded-md border border-gold-500/30 text-gold-400 text-sm font-medium hover:bg-gold-500/10 transition-colors whitespace-nowrap">
                获取验证码
            </button>
        </div>
    </div>
    <div>
        <label class="block text-sm text-gray-300 mb-1.5 mb-2" for="member-nickname">昵称（可选）</label>
        <input id="member-nickname" name="nickname" type="text" maxlength="32"
            class="w-full px-4 py-2.5 rounded-md bg-black/40 border border-white/10 text-white outline-none focus:border-gold-500/50"
            placeholder="您的昵称">
    </div>
    <div>
        <label class="block text-sm text-gray-300 mb-1.5 mb-2" for="member-password">密码</label>
        <input id="member-password" name="password" type="password" autocomplete="new-password" required
            class="w-full px-4 py-2.5 rounded-md bg-black/40 border border-white/10 text-white outline-none focus:border-gold-500/50"
            placeholder="至少 8 位，含字母和数字">
    </div>
    <div data-bj-register-confirm-wrap class="{{if .require_verify}}hidden {{end}}space-y-0">
        <label class="block text-sm text-gray-300 mb-1.5 mb-2" for="member-password-confirm">确认密码</label>
        <input id="member-password-confirm" name="password_confirm" type="password" autocomplete="new-password"
            {{if not .require_verify}}required{{end}}
            class="w-full px-4 py-2.5 rounded-md bg-black/40 border border-white/10 text-white outline-none focus:border-gold-500/50"
            placeholder="请再次输入密码">
    </div>
    <div data-bj-member-error class="hidden text-sm text-red-400"></div>
    <button type="submit" data-bj-member-submit
        class="w-full py-2.5 rounded-md bg-gradient-to-r from-gold-400 to-gold-600 text-black font-bold hover:from-gold-300 hover:to-gold-500 transition-all">
        注册
    </button>
</form>
<p class="mt-6 text-center text-sm text-gray-400">
    已有账号？<a href="{{get_option `login_url`}}" class="text-gold-400 hover:text-gold-300">立即登录</a>
</p>
{{template "member_auth_card_end"}}
{{template "footer" .}}