{% extends 'admin/base.html' %}
{% block title %}{{ t('twofa.setup_title') }}{% endblock %}
{% block content %}

<div class="page-header">
    <h2>🔐 {{ t('twofa.setup_title') }}</h2>
    <p>{{ t('twofa.setup_intro') }}</p>
</div>

<div class="settings-section">
    <h3>1. {{ t('twofa.setup_scan') }}</h3>
    <div id="twofa-qr" class="mt-2 mb-2"></div>
    <div class="help-text">
        {{ t('twofa.setup_manual_key') }}
        <code id="twofa-secret">{{ secret }}</code>
    </div>
</div>

<div class="settings-section">
    <h3>2. {{ t('twofa.setup_code_step') }}</h3>
    <form method="POST" action="{{ url_for('twofa_confirm') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-group">
            <label for="code">{{ t('twofa.login_code_label') }}</label>
            <input type="text" id="code" name="code" required
                   autocomplete="one-time-code" inputmode="numeric"
                   pattern="[0-9 ]*" spellcheck="false">
        </div>
        <button type="submit" class="btn btn-primary">{{ t('twofa.setup_verify_btn') }}</button>
        <a href="{{ url_for('admin_profile') }}" class="btn btn-secondary">{{ t('twofa.setup_cancel') }}</a>
    </form>
</div>

<!-- QR is rendered locally by a vendored MIT library — the secret never
     leaves this page; there is no CDN and no external QR service. If the
     script fails for any reason, the manual key above still works. -->
<script src="{{ static_v('js/vendor/qrcode.min.js') }}"></script>
<script>
(function () {
    try {
        new QRCode(document.getElementById('twofa-qr'), {
            text: {{ otpauth|tojson }},
            width: 180, height: 180, correctLevel: QRCode.CorrectLevel.M
        });
    } catch (e) { /* manual key remains available */ }
})();
</script>
{% endblock %}