#{include file="./Header.html"}
<!-- Main Container -->
<main class="auth-wrapper">
    <div class="auth-card">

        <div class="brand-header">
            <div class="brand-logo">
                <img src="/favicon.ico" alt="Logo" class="brand-icon">
            </div>

        </div>
        <p class="auth-subtitle small mb-3">注册<a class="text-link" href="/">#{$config.shop_name}</a>，获取更多折扣！</p>

        <form class="needs-validation">
            <div class="form-floating mb-4">
                <input type="text" class="form-control" name="username" placeholder="用户名，支持中文"
                       required>
                <label for="username">用户名，支持中文</label>
            </div>

            <div class="form-floating mb-4">
                <input type="text" class="form-control" name="password" placeholder="设置登录密码"
                       minlength="6" required>
                <label for="password">设置登录密码</label>
            </div>


            #{if $config.registered_type == 2}
                <div class="form-floating mb-4">
                    <input type="email" class="form-control" name="email" placeholder="邮箱" required>
                    <label for="email">邮箱</label>
                </div>
                #{if $config.registered_email_verification == 1}
                    <div class="row mb-4">
                        <div class="col-sm-8 col-8">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="email_captcha"
                                       name="email_captcha" placeholder="邮箱验证码">
                                <label class="form-label" for="email_captcha">邮箱验证码</label>
                            </div>
                        </div>
                        <div class="col-sm-4 col-4">
                            <button type="button" class="w-100 btn btn-outline-primary py-3 send-email-code">
                                发送验证码
                            </button>
                        </div>
                    </div>
                #{/if}
            #{/if}


            #{if $config.registered_type == 1}
                <div class="form-floating mb-4">
                    <input type="number" class="form-control" name="phone" placeholder="手机号" required>
                    <label for="phone">手机号</label>
                </div>
                #{if $config.registered_phone_verification == 1}
                    <div class="row mb-4">
                        <div class="col-sm-8 col-8">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="phone_captcha"
                                       name="phone_captcha" placeholder="手机验证码">
                                <label class="form-label" for="phone_captcha">手机验证码</label>
                            </div>
                        </div>
                        <div class="col-sm-4 col-4">
                            <button type="button" class="w-100 btn btn-outline-primary py-3 send-phone-captcha">
                                发送验证码
                            </button>
                        </div>
                    </div>
                #{/if}
            #{/if}


            #{if $config.registered_verification == 1}
                <div class="row mb-4">
                    <div class="col-sm-6 col-6">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="image-captcha" name="captcha"
                                   placeholder="请输入验证码">
                            <label class="form-label" for="image-captcha">图形验证码</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-6 d-flex align-items-center">
                        <img src="/user/captcha/image?action=register"
                             onclick="this.src='/user/captcha/image?action=register&t=' + new Date().getTime()"
                             class="image-code" alt="更换验证码">
                    </div>
                </div>
            #{/if}

            <div class="d-grid">
                <button type="submit" class="btn btn-gradient btn-lg">注册</button>
            </div>
        </form>


        #{if getHookNum(\App\Consts\Hook::USER_VIEW_AUTH_REGISTER_BUTTON) > 0}
            <!--begin::Separator-->
            <div class="divider small my-3">OR</div>
            <!--end::Separator-->
        #{/if}

        <!--start::HOOK-->
        #{hook(\App\Consts\Hook::USER_VIEW_AUTH_REGISTER_BUTTON)}
        <!--end::HOOK-->


            <p class="text-center small mt-3 mb-0">
                已有账号？
                <a class="text-link" href="/user/authentication/login">前往登录</a>
            </p>

    </div>
</main>
<!-- END Main Container -->
#{ready("/assets/user/controller/auth/register.js")}
#{include file="./Footer.html"}