{% extends 'user/form.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block form_body %}
    <div class="card-body">
        <div class="row mb-3">
            <p>
                {{ 'profile.2fa_intro'|trans }}
            </p>
            <p>
                <img onclick="document.getElementById('totp_secret').classList.toggle('d-none');" data-toggle="tooltip" title="Click to show code" alt="TOTP QR Code" style="max-width: 200px; max-height: 200px;" src="{{ qr_code.dataUri }}" />
                <span id="totp_secret" style="display: block" class="d-none">{{ secret }}</span>
            </p>
            {% if not user.totpAuthenticationEnabled %}
                {{ form_start(form, {'attr': {'id': 'user_two_factor_form'}}) }}
                <p>{{ 'profile.2fa_confirmation'|trans }}</p>
                {{ form_widget(form) }}
                {{ form_end(form) }}
            {% else %}
                <strong><i class="{{ 'success'|icon(true) }} text-success"></i> {{ 'activated'|trans }}</strong>
            {% endif %}
        </div>
    </div>
    <div class="card-footer">
        {% if user.totpAuthenticationEnabled %}
            {{ form_start(deactivate, {'attr': {'id': 'user_two_factor_form'}}) }}
                <input type="submit" value="{{ 'deactivate'|trans }}" class="btn btn-warning" id="user_two_factor_button" />
            {{ form_end(deactivate) }}
        {% else %}
            <input type="submit" value="{{ 'action.save'|trans }}" class="btn btn-primary" id="user_two_factor_button" />
        {% endif %}
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if not user.totpAuthenticationEnabled %}
    <script>
        document.getElementById('user_two_factor_button').addEventListener('click', function(){
            document.getElementById('user_two_factor_form').submit();
        });
    </script>
    {% endif %}
{% endblock %}