@{
    ViewBag.Title = "注册新用户";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css {
    <link href="~/Content/css/register.css" rel="stylesheet" />
}
@section javascript {
    <script src="~/content/js/jquery.validate.js"></script>
    <script src="~/content/js/messages_zh.js"></script>
    <script src="~/content/js/sweetalert.js"></script>
    <script src="~/Scripts/register.js"></script>
}
<div class="container">
    <div class="setup-wrapper">
        <div class="setup-header">
            <ol class="steps">
                <li class="current">
                    <strong class="step">步骤 1:</strong><span>创建一个账号</span>
                </li>
                <li>
                    <strong class="step">步骤 2:</strong><span>确认信息</span>
                </li>
            </ol>
        </div>
        <form autocomplete="off" id="signup-form" method="post">
            <div class="setup-main">
                <div class="setup-form-container">
                    <h2 class="setup-form-title mb-3">
                        创建您的账号
                    </h2>
                    <label for="userName">登陆账号：</label>
                    <div class="input-group">
                        <span class="input-group-addon">@@</span>
                        <input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus />
                    </div>
                    <label for="displayName">显示名称：</label>
                    <div class="input-group">
                        <span class="glyphicon glyphicon-user input-group-addon"></span>
                        <input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" />
                    </div>
                    <label for="password">密码：</label>
                    <div class="input-group">
                        <span class="glyphicon glyphicon-lock input-group-addon"></span>
                        <input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" />
                    </div>
                    <label for="assurePassword">确认密码：</label>
                    <div class="input-group">
                        <span class="glyphicon glyphicon-lock input-group-addon"></span>
                        <input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" />
                    </div>
                    <label for="description">申请理由：</label>
                    <div class="input-group">
                        <span class="glyphicon glyphicon-certificate input-group-addon"></span>
                        <textarea id="description" name="description" class="form-control"  placeholder="申请理由" ></textarea>
                    </div>
                    <button id="btnAccount" class="btn btn-primary" type="button">继续</button>
                </div> <!-- /.setup-form-container -->
            </div>
            <div class="setup-confirm">
                <h4>您注册的信息如下：</h4>
                <div>
                    <label>登陆账号：</label><span id="loginID"></span>
                </div>
                <div>
                    <label>显示名称：</label><span id="loginName"></span>
                </div>
                <div>
                    <label>申请理由：</label><span id="loginDesc"></span>
                </div>
                <button id="btnSubmit" class="btn btn-primary" type="submit">确认并提交</button>
            </div>
        </form>
        <div class="setup-secondary">
            <div class="setup-info-module">
                <h4>欢迎加入本系统</h4>
                <ul class="features-list">
                    <li><strong>Unlimited</strong>特性一</li>
                    <li><strong>Unlimited</strong>特性二</li>
                    <li><strong>Unlimited</strong>特性三</li>
                    <li><strong>Unlimited</strong>特性四</li>
                    <li class="list-divider"></li>
                    <li><i class="glyphicon glyphicon-ok"></i>优点一</li>
                    <li><i class="glyphicon glyphicon-ok"></i>优点二</li>
                    <li><i class="glyphicon glyphicon-ok"></i>优点三</li>
                    <li><i class="glyphicon glyphicon-ok"></i>优点四</li>
                </ul>
            </div>
        </div>
    </div>
</div>