{% extends "ui/single.html" %}
{% block title %}Sign In | BioQueue{% endblock %}
{% block content %}
    <div class="container-fluid" style="margin: 50px 0;">
        <div class="row-fluid text-center">
            <h1>Login</h1>
            <div class="login-form">
                <form id="login-form" class="text-left" novalidate="novalidate">
                    <div class="Validform_checktip alert" style="display: none;"></div>
                    <div class="main-login-form">
                        <div class="login-group">
                            {{ form.as_p }}
                        </div>
                        <input type="hidden" name="next" value="{{ next }}" />
                        {% csrf_token %}
                        <button type="submit" class="login-button"><i class="glyphicon glyphicon-chevron-right"></i></button>
                    </div>
                    <div class="etc-login-form">
                        <p>new user? <a href="{% url 'accounts:register' %}">create new account</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
$(document)
    .ajaxStart(function(){
        $("button:submit").addClass("log-in").attr("disabled", true);
    })
    .ajaxStop(function(){
        $("button:submit").removeClass("log-in").attr("disabled", false);
    });
    $("form").submit(function(){
        var self = $(this);
        self.find(".Validform_checktip").hide();
        $.post(self.attr("action"), self.serialize(), success, "json");
        return false;

        function success(data){
            if(data.status){
                window.location.href = data.url;
            } else {
                $("#id_password").val('');
                self.find(".Validform_checktip").html(data.info).show();
            }
        }
    });
{% endblock %}