<!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"/>
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/manager.css">
    <!--[if lte IE 8]>
    <style type="text/css">
        .container-fluid {
            -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{ theme }}/img/formBg.jpg',sizingMethod='scale')";
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{ theme }}/img/formBg.jpg', sizingMethod='scale');
        }
        .container-fluid form .has-feedback.username .form-control-feedback {
            background: none;
            -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{ theme }}/img/gray_username_icon.png',sizingMethod='scale')";
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{ theme }}/img/gray_username_icon.png', sizingMethod='scale');
        }
        .container-fluid form .has-feedback.password .form-control-feedback {
            background: none;
            -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{ theme }}/img/gray_password_icon.png',sizingMethod='scale')";
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{ theme }}/img/gray_password_icon.png', sizingMethod='scale');
        }
        .container-fluid form .has-feedback .form-control {
            width: 74%;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <![endif]-->
    <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 %}
            document.addEventListener('touchmove', function(e){
                e.preventDefault();
            });
        });
    </script>
</head>
<body>

<div class="container-fluid">
    <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">
    </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>