{% trans_default_domain 'uniweb-auth' %}

{# Title #}
<div class="mb-4 pb-2 border-bottom">
    <h1 class="h3 font-weight-bold text-primary mb-0">
        {{ 'auth.twoFactorSetup.googleAuthenticator.title'|trans }}
    </h1>
    <div class="text-muted mt-1">
        {{ 'auth.twoFactorSetup.title'|trans }}
    </div>
</div>

{# Already enabled info #}
{% if exists %}
    <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
        <i class="zmdi zmdi-info-outline mr-3" style="font-size: 22px;"></i>
        <div>
            {{ 'auth.twoFactorSetup.googleAuthenticator.message.alreadyEnabled'|trans }}
        </div>
    </div>
{% endif %}

{# Step 1: QR code #}
<div class="card mb-4">
    <div class="card-header">
        <strong>{{ 'auth.twoFactorSetup.googleAuthenticator.step1'|trans }}</strong>
    </div>
    <div class="card-body text-center">
        <div class="d-inline-block p-3 bg-white rounded">
            {{ qr_code_svg(qrCodeUrl, 260) }}
        </div>
        <div class="text-muted mt-3">
            {{ 'auth.twoFactorSetup.googleAuthenticator.step1'|trans }}
        </div>
    </div>
</div>

{# Step 2: Confirm code #}
<div class="card">
    <div class="card-header">
        <strong>{{ 'auth.twoFactorSetup.googleAuthenticator.step2'|trans }}</strong>
    </div>
    <div class="card-body">
        {% form_theme form 'Form/beagle_theme.html.twig' %}
        {{ form(form) }}
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('google_authenticator_setup_code');
        if (!input) return;

        input.addEventListener('input', function () {
            const value = input.value.replace(/\s+/g, '');

            if (value.length === 6) {
                const form = input.closest('form');
                if (form) {
                    form.submit();
                }
            }
        });
    });
</script>