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

{% block head %}
    <style>
        .form-group .input-group-addon {
            min-width: 36px;
        }
    </style>
{% endblock %}

{% block page-header %}
{% endblock %}

{% block main %}
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12 col-md-offset-4 col-sm-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading text-center">
                    {% trans 'Sign in to continue' %}
                </div>
                <div class="panel-body">
                    <form action="" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{{ view.request.GET.next }}" />
                        {% bootstrap_field form.username show_label=False bound_css_class='' addon_before='<i class="fa fa-user"></i>' %}
                        {% bootstrap_field form.password show_label=False bound_css_class='' addon_before='<i class="fa fa-lock"></i>' %}
                        <button type="submit" class="btn btn-primary btn-block" style="margin-bottom: 10px">
                            {% trans "Sign in" %}
                        </button>
                        <a class="pull-right btn-link" href="{% url 'password_reset' %}">
                            {% trans "Reset password" %}
                        </a>
                    </form>
                </div>
            </div>
            {% if form.non_field_errors %}
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script type="text/javascript">
        document.getElementById('id_username').focus();
    </script>
{% endblock %}