{% 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 %}