{% extends "base.html" %}
{% load request_static %}
{% load i18n %}

{% block common_sciprt %}

    <script src="{% static_path 'bundle/auth~doc~spa.chunk.js' %}"></script>
    <script src="{% static_path 'bundle/auth~spa.chunk.js' %}"></script>
    <script src="{% static_path 'bundle/auth.js' %}"></script>

{% endblock %}

{% block login_body %}
     <div class="login-box-body rounded">
        <div class="overlay" id="login_wrapper">
            <div id="loader" class="loader-center"></div>
        </div>
        <p class="login-box-msg">Sign in to start your session {% block session_message_suffix %}{% endblock %}</p>

        <form method="post" action="{% url 'login' %}" class="app-form-signin form-signin" id="login_form">
            {% csrf_token %}
            {% block auth_key %}
            <div class="form-group has-feedback">
                <input type="text"
                    class="form-control"
                    placeholder="Username"
                    name='{{ form.username.name }}'
                    id="{{ form.username.name }}"
                    maxlength="254"
                    autocomplete="username"
                    required autofocus>
            </div>
            {% endblock %}
            <div class="form-group has-feedback">
                <input type="password"
                    class="form-control"
                    placeholder="Password"
                    name='{{ form.password.name }}'
                    id="{{ form.password.name }}"
                    autocomplete="current-password">
            </div>

            {% block button %}
                <div class="row">
                    <div class="col-xs-4">
                        <button type="submit" class="btn btn-primary btn-block" style="margin-bottom: 5px" id="login_button" onclick="loaderVisibility(false)">Sign In</button>
                        {% block additional_link %}
                            <a style="margin-bottom: 10px" href="/password_reset">Forgot password?</a>
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}
            <input id="next" type="hidden" name="next" value="{{ next }}" />
            {% if form.errors %}
                {% if form.non_field_errors %}
                    <ul class='form-errors' id='form_error'>
                        {% for error in form.non_field_errors %}
                            <li style='color: red'>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endif %}
        </form>
        <script>
            // Set form field next to current url for ?next= redirects
            var match = /next=(?<next>[^&]+)/.exec(window.location.href);
            if (match && match.groups.next) {
                document.getElementById('next').value = match.groups.next
            }
        </script>
        {% block alter_auth %}
        {% endblock %}
    </div>
{% endblock %}
