{% extends "base.html" %}

{% block login_body_content %}
    <form method="post" action="{% url 'login' %}" class="app-form-signin form-signin" id="login_form">
        {% csrf_token %}
        <div class="form-group has-feedback">
            <label for="{{ form.pin.name }}">{% translate_text "two-factor authentication code" capfirst %}</label>
            <input type="text"
                class="form-control"
                name='{{ form.pin.name }}'
                id="{{ form.pin.name }}"
                required autofocus>

            {% translate_errors form.pin.errors %}

            <p class="pin-desc">{% translate_text "Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes." %}</p>

            <button type="submit" class="btn btn-primary btn-block" style="margin-bottom: 5px">
                {% translate_text "verify code" capfirst %}
            </button>
            <hr>
            <a href="{% url 'logout' %}">{% translate_text "logout" capfirst %}</a>
        </div>
    </form>
    <style>
        input {
            margin: 10px 0;
        }
        .pin-desc {
            margin: 10px 0;
        }
    </style>
{% endblock %}
