<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Swan | Beta</title>
    <meta name="description" content="Responsive, Bootstrap, BS4"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <!-- style -->
    <!-- build:css ../css/site.min.css -->
    <link rel="stylesheet" href="{{static_url('css/bootstrap.css')}}" type="text/css"/>
    <link rel="stylesheet" href="{{static_url('css/theme.css')}}" type="text/css"/>
    <link rel="stylesheet" href="{{static_url('css/style.css')}}" type="text/css"/>
    <!-- endbuild -->
</head>
<body class="layout-row">
<div class="flex">
    <div class="w-xl w-auto-sm mx-auto py-5">
        <div class="p-4 d-flex flex-column h-100">
            <!-- brand -->
            <a href="index.html" class="navbar-brand align-self-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-slack">
                    <path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path>
                    <path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path>
                    <path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path>
                    <path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path>
                    <path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path>
                    <path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path>
                    <path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path>
                    <path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path>
                </svg>
                <span class="hidden-folded d-inline l-s-n-1x align-self-center">Swan</span>
            </a>
            <!-- / brand -->
        </div>
        <div class="card">
            <div id="content-body">
                <div class="p-3 p-md-5">
                    <h5>欢迎光临</h5>
                    <p>
                        <small class="text-muted">登录你的管理账户</small>
                    </p>
                    <div class="">
                        {% module xsrf_form_html() %}
                        <p>
                        <div class="alert alert-warning" role="alert" id="error-div" style="display: none">
                            <i data-feather="alert-circle"></i>
                            <span class="mx-2" id="error-msg"></span>
                        </div>
                        </p>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input name="username" id="username" type="email" class="form-control" placeholder="输入您的邮箱">

                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input name="password" id="password" type="password" class="form-control"
                                   placeholder="请输入6-20个字符的密码">
                            <div class="my-3 text-right">
                                <a href="forgot-password.html" class="text-muted">找回密码?</a>
                            </div>
                        </div>
                        <!--<div class="checkbox mb-3">-->
                        <!--<label class="ui-check">-->
                        <!--<input type="checkbox" name="cookie" id="cookie">-->
                        <!--<i></i> 记住我-->
                        <!--</label>-->
                        <!--</div>-->
                        <button class="btn btn-primary mb-4" id="login-btn">登录</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center text-muted">&copy; Copyright. Swan</div>
    </div>
</div>
<!-- build:js ../js/site.min.js -->
<!-- jQuery -->
<script src="{{static_url('libs/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap -->
<script src="{{static_url('libs/popper.js/dist/umd/popper.min.js')}}"></script>
<script src="{{static_url('libs/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- ajax page -->
<!--<script src="{{static_url('libs/pjax/pjax.min.js')}}"></script>-->
<!--<script src="{{static_url('js/ajax.js')}}"></script>-->
<!-- lazyload plugin -->
<script src="{{static_url('js/lazyload.config.js')}}"></script>
<script src="{{static_url('js/lazyload.js')}}"></script>
<script src="{{static_url('js/plugin.js')}}"></script>
<!-- scrollreveal -->
<script src="{{static_url('libs/scrollreveal/dist/scrollreveal.min.js')}}"></script>
<!-- feathericon -->
<script src="{{static_url('libs/feather-icons/dist/feather.min.js')}}"></script>
<script src="{{static_url('js/plugins/feathericon.js')}}"></script>
<!-- theme -->
<script src="{{static_url('js/theme.js')}}"></script>
<script src="{{static_url('js/utils.js')}}"></script>
<!-- endbuild -->
<script>
    $(document).on("click", "#login-btn", function () {
        var dataArray = {
            username: $("#username").val(),
            password: $("#password").val(),
            _xsrf: $("[name='_xsrf']").val(),
        };
        $.ajax({
            url: "/login",
            type: "POST",
            dataType: "json",
            data: dataArray,
            success: function (res) {
                if (res['status'] == 0) {
                    $("#error-div").show();
                    $("#error-msg").empty();
                    $("#error-msg").append(res['msg']);
                } else if (res['status'] == 10) {
                    location.href = "/update";
                } else if (res['status'] == 11) {
                    location.href = "/inits";
                } else {
                    location.href = "/dashboard";
                }
            },
            error: function (res) {
                console.log(res);
            }
        });
    });
</script>
</body>
</html>
