{% extends 'base.html' %}
{% load static %}
{% block tittle %}登陆{% endblock tittle %}
{% block body %}
<section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('{% static 'images/backgrounds/img-1.jpg' %}')">
    <span class="mask bg-primary alpha-7"></span>
    <div class="spotlight-holder py-lg pt-lg-xl" style="height: auto;">
        <div class="container align-items-center no-padding">
            <div class="col">
                <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                    <div class="col-7">
                        <div class="text-center mt-5">
                            <img src="{% static 'images/brand/icon.png' %}" style="width: 80px;" class="img-fluid animated" data-animation-in="jackInTheBox" data-animation-delay="1000">
                            <h2 class="heading display-4 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                                登陆
                            </h2>
                            <form id="loginForm" onsubmit="event.preventDefault(); submitForm();">
                                {% csrf_token %}
                                <div class="input-group mb-4">
                                    <span id="login-message"></span>
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><svg class="svg-inline--fa fa-user fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 0c88.366 0 160 71.634 160 160s-71.634 160-160 160S96 248.366 96 160 167.634 0 256 0zm183.283 333.821l-71.313-17.828c-74.923 53.89-165.738 41.864-223.94 0l-71.313 17.828C29.981 344.505 0 382.903 0 426.955V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48v-37.045c0-44.052-29.981-82.45-72.717-93.134z"></path></svg></span>
                                    </div>
                                    <input type="text" id="username" name="username" required class="form-control" placeholder="用户名">
                                </div>
                                <div class="input-group mb-4">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><svg class="svg-inline--fa fa-user fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/></svg></span>
                                    </div>
                                    <input type="password" id="password" name="password" required class="form-control" placeholder="密码">
                                </div>
                                <div class="input-group mb-4">
                                    <button type="submit" class="btn btn-block btn-primary">登陆</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock body %}

{% block script %}
        <script>
        function submitForm() {
            $.ajax({
                url: "{% url 'exam:login' %}",
                type: "POST",
                data: $('#loginForm').serialize(),
                success: function(response) {
                    if (response.code === 200) {
                        var element = document.getElementById("username");
                        element.classList.add("is-valid");
                        element = document.getElementById("password");
                        element.classList.add("is-valid");
                        element = document.getElementById("login-message");
                        element.InnerHTML="登陆失败！"
                        setTimeout(() => {
                            window.location.href = "{% url 'exam:home' %}";
                        }, 1500)
                    } else {
                        var element = document.getElementById("username");
                        element.classList.add("is-invalid");
                        element = document.getElementById("password");
                        element.classList.add("is-invalid");
                        element = document.getElementById("login-message");
                        element.InnerHTML=response.message;
                    }
                },
                error: function() {
                    alert("请求参数错误！");
                    window.location.href = "{% url 'exam:home' %}";
                }
            });
        }
    </script>
{% endblock script %}