<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=360, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/form.css">
    <script src="{{ theme }}/js/jquery.min.js"></script>
    <script src="{{ theme }}/js/jquery.validate.js"></script>
    <script src="{{ theme }}/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            var notice = $('#notice');
            var myModal = $('#myModal');
            $('#loginForm').validate({
                onkeyup: false,
                onfocusout: false,
                rules: {
                    phone: 'required',
                    password: 'required'
                },
                messages: {
                    phone: '请输入用户名',
                    password: '请输入密码'
                },
                errorLabelContainer: "#notice",
                errorElement: 'span',
                invalidHandler: function () {
                    myModal.modal('show');
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
            notice.bind('DOMNodeInserted',function(){
                $(this).children(':not(:first)').remove();
            });
            myModal.on('hide.bs.modal',function(){
                notice.children().remove();
            });
            {% if(error) %}
                notice.html('<span>{{ error }}</span>');
                myModal.modal('show');
            {% endif %}
        });
    </script>
</head>
<body>

<div class="container-fluid text-center">
    <form id="loginForm" method="post">
        <h2>登录</h2>

        <p class="has-feedback username">
            <label for="phone" class="sr-only">用户名</label>
            <input type="tel" name="phone" id="phone" class="form-control input-lg" placeholder="手机号码/账号">
            <span class="form-control-feedback"></span>
        </p>

        <p class="has-feedback password">
            <label for="password" class="sr-only">密码</label>
            <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码">
            <span class="form-control-feedback"></span>
        </p>
        <input type="submit" id="login_submit" value="登录" class="btn btn-lg btn-block">
        <a href="{{ forget }}" class="link-fgtpwd">忘记密码?</a>
        <a href="{{ register }}" class="link-register">
            <span></span>新用户注册<span></span>
        </a>
    </form>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4>提示</h4>
            <p id="notice"></p>
            <button type="button" class="btn btn-lg btn-block" data-dismiss="modal">确认</button>
        </div>
    </div>
</div>

</body>
</html>