{% extends "forms/field.html.twig" %}

{% block input %}
    <div class="form-input-wrapper twofa-wrapper">
        {% try %}
            {% set user = form.object ?? grav.user %}

            {% set secret = user.twofa_secret ?: grav.login.twoFactorAuth.createSecret() %}
            {% set image = grav.login.twoFactorAuth.getQrImageData(user.username, secret) %}

            <img style="border: 1px solid #ddd" data-2fa-image src="{{ image }}" />
            <div>
                <span>{{ 'PLUGIN_LOGIN.2FA_SECRET'|t }}: </span><span class="twofa-secret-code" data-2fa-secret>{{ secret|regex_replace('/(\\w{4})/', '\\1 ') }}</span>
            </div>

            <div class="danger twofa-wrapper">
                <button data-hint="{{ 'PLUGIN_LOGIN.2FA_REGEN_HINT'|t }}" class="button button-small hint--bottom" data-2fa-regenerate><i class="fa fa-fw fa-refresh"></i> {{ 'PLUGIN_LOGIN.2FA_REGENERATE'|t }}</button>
            </div>

            <input type="text" class="no-form" style="display:none;" name="{{ (scope ~ field.name)|fieldName }}" data-2fa-value value="{{ secret }}" />

        {% catch %}
            <div class="notice error">
                <p>{{ e.message }}</p>
            </div>
        {% endcatch %}
    </div>

    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('plugin://login/js/2fa.js', { 'group': 'bottom', 'loading': 'defer' }) %}
{% endblock %}