{{define "registerDialog"}}
<div class="register-dialog-mask" id="registerDialog">
  <div class="register-dialog-stack">
    <div class="register-dialog-card" role="dialog" aria-modal="true" aria-labelledby="registerDialogTitle">
        <div class="register-dialog-head">
            <div class="register-dialog-title" id="registerDialogTitle">创建账号</div>
            <div class="register-dialog-desc">
                <span class="register-dialog-desc-h5">注册后同步收藏、历史与会员权益</span>
                <span class="register-dialog-desc-pc">注册成功即可同步收藏与追剧记录</span>
            </div>
        </div>
        <form class="register-dialog-form" action="/api/auth/register" method="post" data-register-dialog-form novalidate>
            <div class="register-dialog-field-group" data-register-field="account">
                <span class="register-dialog-label register-dialog-label--account">账号</span>
                <label class="register-dialog-field" data-register-control>
                    <span class="register-dialog-sr">账号</span>
                    <input
                        class="register-dialog-input"
                        name="account"
                        type="text"
                        placeholder="请输入账号(最少6位字母)"
                        autocomplete="username"
                        minlength="4"
                        maxlength="16"
                        data-register-account
                        aria-describedby="registerDialogAccountError"
                    />
                </label>
                <p class="register-dialog-error" id="registerDialogAccountError" hidden data-register-error>账号需为 4–16 个字符</p>
            </div>
            <div class="register-dialog-field-group" data-register-field="password">
                <span class="register-dialog-label register-dialog-label--password">密码</span>
                <label class="register-dialog-field register-dialog-field--tall" data-register-control>
                    <span class="register-dialog-sr">密码</span>
                    <input
                        class="register-dialog-input"
                        name="password"
                        type="password"
                        placeholder="请输入密码"
                        autocomplete="new-password"
                        minlength="4"
                        maxlength="16"
                        data-register-password
                        aria-describedby="registerDialogPasswordError"
                    />
                </label>
                <p class="register-dialog-error" id="registerDialogPasswordError" hidden data-register-error>密码需为 4–16 个字符</p>
            </div>
            <div class="register-dialog-field-group" data-register-field="password_confirm">
                <span class="register-dialog-label register-dialog-label--password">确认密码</span>
                <label class="register-dialog-field register-dialog-field--tall" data-register-control>
                    <span class="register-dialog-sr">确认密码</span>
                    <input
                        class="register-dialog-input"
                        name="password_confirm"
                        type="password"
                        placeholder="请再次输入密码"
                        autocomplete="new-password"
                        minlength="4"
                        maxlength="16"
                        data-register-password-confirm
                        aria-describedby="registerDialogPasswordConfirmError"
                    />
                </label>
                <p class="register-dialog-error" id="registerDialogPasswordConfirmError" hidden data-register-error>两次输入的密码不一致</p>
            </div>
            <button class="register-dialog-submit" type="submit" data-register-submit>立即注册</button>
        </form>
        <div class="register-dialog-login">
            <span class="register-dialog-login-prefix">已有账号？</span>
            <a class="register-dialog-login-link register-dialog-login-link--pc" href="#login" data-login-dialog-open>去登录</a>
            <a class="register-dialog-login-link register-dialog-login-link--h5" href="#login" data-login-dialog-open>去登录</a>
        </div>
    </div>
    <button class="register-dialog-close" type="button" aria-label="关闭" data-register-dialog-close>
      <img src="/static/images/figma-dialogs/dialog-close.svg" alt="" />
    </button>
  </div>
</div>
{{end}}