{%- extends "manhattan/manage/generics/add.html" -%}
{%- import "manhattan/manage/components/form.html" as _form with context -%}

{%- block fieldsets -%}

    {% call _form.fieldset() -%}

        {% call _form.note(class='mh-formatted') %}
            <p>
                <b>1. Scan the QR code image</b>
                <br>
                Scan the QR code image below with the two-factor authentication
                app on your phone.
            </p>
        {% endcall %}

        <div class="mh-qr-code">
            {{ qr_image|safe }}
        </div>

        {% call _form.note(class='mh-formatted') %}
            <p>
                <b>2. Enter the six-digit code</b>
                <br>
                After scanning in the QR code image your app will display
                six-digit code, enter this code below and click the
                <em>Enable 2FA</em> button.
            </p>
        {% endcall %}

        {{ _form.field(form.totp, class='mh-field--3-3') }}

    {%- endcall %}

{%- endblock %}

{%- block buttons -%}
    {{ _form.button('Enable 2FA') }}
{%- endblock -%}
