#{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="/">联系客服</a>协助帮忙找回！</p>

        <form class="needs-validation">
            <div class="form-floating mb-4">
                <input type="number" class="form-control" name="username" placeholder="手机号" required>
                <label for="username">手机号</label>
            </div>

            <div class="row mb-4">
                <div class="col-sm-8 col-8">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="captcha"
                               name="captcha" placeholder="验证码">
                        <label class="form-label" for="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>

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


            <div class="d-grid">
                <button type="submit" class="btn btn-gradient btn-lg">确认重置</button>
            </div>
        </form>


            <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/forget.phone.js")}
#{include file="./Footer.html"}