{# The multi-factor authentication initialization template.

Display a QR-code and the OTP secret.

:param secret: The OTP secret.
:type secret: :class:`str`
:param qr_image: A QR-code image representing the OTP secret.
:type qr_image: A base64 encoded :class:`str`
#}
{% if g.auth and not g.session %}
    {% extends g.auth.template or 'core/auth/base.html' %}
{% else %}
    {% extends theme('base.html') %}
{% endif %}
{% import 'macro/flask.html' as flask %}
{% import 'macro/form.html' as fui %}
{% import 'core/partial/login_field.html' as login_field %}

{% block script %}
    <script src="{{ url_for("static", filename="js/copy.js") }}" defer></script>
{% endblock %}

{% block submenu %}
    {% if g.session %}
        <a class="item" href="{{ url_for('core.account.profile_edition', edited_user=user) }}">
            <i class="id card icon"></i>
            {% trans %}Personal information{% endtrans %}
        </a>
        <a class="active item" href="{{ url_for('core.account.profile_settings', edited_user=user) }}">
            <i class="tools icon"></i>
            {% trans %}Account settings{% endtrans %}
        </a>
    {% endif %}
{% endblock %}

{% block auth_subtitle %}
    <div class="sub header">{{ _("Set up multi-factor authentication.") }}</div>
{% endblock %}

{% block auth_content %}
    {% include 'core/auth/partials/otp_setup_content.html' %}

    {% call fui.render_form(form, hx_boost="false") %}
        <div class="ui attached clearing segment">
            {{ login_field.render_field(form.otp, class="autofocus") }}
        </div>

        <div class="ui attached clearing segment">
            <div class="ui clearing container">
                {% if not g.session %}
                    <div class="ui left floated stackable buttons">
                        <a type="button" class="ui button" href="{{ url_for('core.auth.login') }}">
                            {% trans %}Switch account{% endtrans %}
                        </a>
                    </div>
                {% endif %}
                <div class="ui right floated stackable buttons">
                    <button type="submit" class="ui primary button">
                        {{ _("Verify") }}
                    </button>
                </div>
            </div>
        </div>
    {% endcall %}
{% endblock %}

{% block container %}
    {% if g.auth and not g.session %}
        {{ super() }}
    {% else %}
        <div class="ui container" hx-boost="false">
            <div class="content">
                <div class="ui top attached segment">
                    <h2 class="ui center aligned header">
                        <div class="content">
                            {% trans %}Set up multi-factor authentication.{% endtrans %}
                        </div>
                    </h2>
                </div>

                {% block messages %}
                    {{ flask.messages() }}
                {% endblock %}

                {% include 'core/auth/partials/otp_setup_content.html' %}

                <div class="ui attached clearing segment">
                    {% call fui.render_form(form, hx_boost="false") %}
                        {{ login_field.render_field(form.otp, class="autofocus") }}

                        <div class="ui clearing container">
                            <div class="ui right floated stackable buttons">
                                <button type="submit" class="ui primary button">
                                    {{ _("Verify") }}
                                </button>
                            </div>
                        </div>
                    {% endcall %}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}