{% load bootstrap3 %}
{% load static from staticfiles %}
{% load i18n %}

{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'css/admin.css' %}">
{% endblock %}

{% block content %}

    <div class="locked-out-container">
        <div class="login-message" style="margin: 0 auto;padding-top: 15%;width: 45%;">
            Your login is blocked due to multiple failing login attempts. Solve the following captcha to get unblocked!
        </div>
        <div style="padding-top: 20px;">
            <form action="{{ form.action }}" method="post">
                {% csrf_token %}

                <div class="input-group" style="margin: 0 auto;text-align: center">
                    <input class="form-control input-lg" id="id_username" maxlength="254" name="username" type="email" placeholder="Email Address" {% if form.username.value %}value="{{ form.username.value }}{% endif %}" style="height: 30px;width: 300px;font-size: smaller;">
                </div>

                <div style="text-align: center; padding-top: 15px">
                     <div class="error-list" style="display: inline-block;margin: 0 auto;text-align: left">
                         {{ form.username.errors }}
                         {{ form.captcha.errors }}
                    </div>

                    {{ form.captcha }}

                </div>


                <div class="form-actions" align="center" style="padding-top: 15px;text-align: center">
                    <button type="submit" class="btn btn-default btn-primary" style="background-color: #79aec8;outline: none;">Unblock Me</button>
                </div>
            </form>
        </div>
    </div>

{% endblock %}