{% extends "base.html" %}

{% block media %}
    <style>
        .inline-header {
            font-size: 1.1em;
            padding: 4px 8px;
            padding-left: 0;
        }

        .block-header {
            font-size: 1.1em;
        }

        .block-header:first-of-type {
            padding-top: 0.5em;
        }

        #center-float {
            position: relative;
            margin: 0 auto auto -28.5em;
            left: 50%;
            width: 700px;
        }

        #totp-disable-form {
            border: unset;
            background: unset;
            max-width: 700px;
        }
    </style>
{% endblock %}

{% block body %}
    <div id="center-float">
        <form id="totp-disable-form" action="" method="post" class="form-area">
            {% csrf_token %}
            <div class="block-header">{{ _('To protect your account, you must first authenticate before you can disable Two Factor Authentication.') }}</div>
            {% if form.totp_token.errors %}
                <div class="form-errors">
                    {{ form.totp_token.errors }}
                </div>
            {% endif %}
            <div>
                <label class="inline-header grayed">{{ _('Enter the 6-digit code generated by your app:') }}</label>
                <span class="fullwidth">{{ form.totp_token }}</span>
            </div>
            <button style="margin-top: 0.5em" class="button" type="submit">{{ _('Disable Two Factor Authentication') }}</button>
        </form>
    </div>
{% endblock %}
