{% extends "office/base_headline.html" %}
{% load bootstrap4 %}
{% load i18n %}
{% load qrcode_inline %}

{% block headline %}{% trans "Set up multi-factor authentication" %}{% endblock %}

{% block content %}
    {% if request.mfa_locked %}
        <div class="alert alert-info">
            {% trans "Multi-factor authentication is required for all administrators of this byro installation. Please set it up to continue." %}
        </div>
    {% endif %}
    <div class="row">
        <div class="col-lg-6">
            <div class="card member-form-card">
                <div class="card-header">{% trans "Step 1: Add byro to your authenticator app" %}</div>
                <div class="card-body">
                    <p>{% trans "Scan this QR code with your authenticator app (for example Aegis, Google Authenticator, Microsoft Authenticator, 1Password or Bitwarden)." %}</p>
                    <p class="text-center">
                        <img src="{{ config_url|qrcode_inline }}" alt="{% trans "QR code for your authenticator app" %}"
                             style="width: 14em; height: 14em; image-rendering: pixelated;">
                    </p>
                    <p>{% trans "Or enter this key manually:" %}</p>
                    <p><code style="font-size: 1.2em; letter-spacing: 0.05em;">{{ manual_key }}</code></p>
                    <p class="text-muted small">{% trans "Type: time-based (TOTP), 6 digits, 30 seconds, SHA-1." %}</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card member-form-card">
                <div class="card-header">{% trans "Step 2: Confirm" %}</div>
                <div class="card-body">
                    <form method="post" autocomplete="off">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{{ next }}">
                        <p>{% trans "Enter the six-digit code generated by your authenticator app:" %}</p>
                        {% bootstrap_form form %}
                        <button class="btn btn-success" type="submit">{% trans "Verify and enable" %}</button>
                        {% if not request.mfa_locked %}
                            <a class="btn btn-outline-secondary" href="{% url 'mfa:settings' %}">{% trans "Cancel" %}</a>
                        {% endif %}
                    </form>
                    <p class="text-muted small mt-3">
                        {% trans "Multi-factor authentication is only enabled after a code has been verified successfully. You will then receive recovery codes for the case that you lose access to your authenticator app." %}
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}