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

<div class="page-header">
    <h2>🗝️ {{ t('twofa.recovery_title') }}</h2>
    <p>{{ t('twofa.recovery_intro') }}</p>
</div>

<div class="settings-section">
    <pre class="twofa-recovery-codes" id="twofa-codes">{% for code in codes %}{{ code }}
{% endfor %}</pre>
    <button type="button" class="btn btn-secondary" id="twofa-copy">
        📋 {{ t('twofa.recovery_copy') }}
    </button>
</div>

<div class="settings-section">
    <form method="POST" action="{{ url_for('twofa_finalize') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-group">
            <label>
                <input type="checkbox" name="codes_saved" value="1" required>
                {{ t('twofa.recovery_confirm_label') }}
            </label>
        </div>
        <button type="submit" class="btn btn-primary">{{ t('twofa.recovery_finish_btn') }}</button>
    </form>
</div>

<script>
document.getElementById('twofa-copy').addEventListener('click', function () {
    var text = document.getElementById('twofa-codes').textContent;
    if (navigator.clipboard) { navigator.clipboard.writeText(text); }
});
</script>
{% endblock %}