{% extends 'base.html.twig' %}

{% block title %}Activar verificación en dos pasos{% endblock %}

{% block body %}
<div class="container">

    <div class="perfil-edit-grid" style="max-width:640px;margin:0 auto;">
        <div class="perfil-edit-card" style="grid-column:1/-1;">
            <div class="perfil-card-header">
                <span class="perfil-card-icon">🔐</span>
                <h2>Activar verificación en dos pasos (2FA)</h2>
            </div>
            <div class="perfil-card-body">

                <ol style="color:var(--color-label-2);line-height:2;margin-bottom:var(--space-5);padding-left:var(--space-5);">
                    <li>Instala una app de autenticación en tu móvil:<br>
                        <strong>Google Authenticator</strong>, <strong>Authy</strong>, <strong>Microsoft Authenticator</strong>, etc.
                    </li>
                    <li>Escanea el código QR de abajo con la app.</li>
                    <li>Introduce el código de 6 dígitos que te muestre para confirmar.</li>
                </ol>

                <div style="display:flex;flex-direction:column;align-items:center;gap:var(--space-5);margin-bottom:var(--space-6);">
                    <img src="{{ path('app_perfil_2fa_qr') }}"
                         alt="Código QR para configurar 2FA"
                         width="200" height="200"
                         style="background:#fff;padding:12px;border-radius:var(--radius-md);">
                    <small style="color:var(--color-label-3);font-size:.75rem;">
                        Si no puedes escanear el QR, introduce esta clave manualmente en la app:
                    </small>
                    <code style="
                        background:var(--color-surface-3);
                        border:1px solid var(--glass-border);
                        border-radius:var(--radius-sm);
                        padding:var(--space-2) var(--space-4);
                        font-size:.85rem;
                        letter-spacing:.1em;
                        color:var(--color-primary);
                        word-break:break-all;
                        text-align:center;
                    ">{{ totp_secret }}</code>
                </div>

                <form method="post" action="{{ path('app_perfil_2fa_habilitar') }}" novalidate>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('2fa_enable') }}">

                    <div class="form-group">
                        <label class="form-label" for="code">Código de verificación</label>
                        <input
                            type="text"
                            id="code"
                            name="code"
                            class="form-control"
                            inputmode="numeric"
                            pattern="[0-9]{6}"
                            maxlength="6"
                            autocomplete="one-time-code"
                            autofocus
                            placeholder="123456"
                            required
                        >
                        <small class="form-help-text">Introduce el código que muestra la app para confirmar que todo está bien.</small>
                    </div>

                    <div style="display:flex;gap:var(--space-3);flex-wrap:wrap;">
                        <button type="submit" class="btn btn--primary">Activar 2FA</button>
                        <a href="{{ path('app_perfil_index') }}" class="btn btn--ghost">Cancelar</a>
                    </div>
                </form>

            </div>
        </div>
    </div>

</div>

{% endblock %}