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

{% block title %}{{ 'admin.recovery_codes.show_title'|trans }}{% endblock %}

{% block body %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="admin-card p-4">
                <h1 class="h4 mb-3">{{ 'admin.recovery_codes.show_title'|trans }}</h1>
                {% for label, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="alert alert-{{ label == 'error' ? 'danger' : (label == 'info' ? 'info' : 'success') }}">{{ message }}</div>
                    {% endfor %}
                {% endfor %}

                {% if app.user.isRecoveryRegenerationRequired %}
                    <div class="alert alert-danger fw-semibold">{{ 'admin.recovery_codes.after_login_warning'|trans }}</div>
                {% endif %}

                <div class="alert alert-warning">{{ 'admin.recovery_codes.once_only'|trans }}</div>

                <ol class="font-monospace fs-6 mb-4">
                    {% for code in codes %}
                        <li class="mb-2">{{ code }}</li>
                    {% endfor %}
                </ol>

                <div class="d-flex flex-wrap gap-2 mb-4">
                    <a href="{{ path('admin_recovery_codes_download') }}" class="btn btn-outline-primary">{{ 'admin.recovery_codes.download'|trans }}</a>
                    <button type="button" class="btn btn-outline-secondary" id="recovery-copy-btn">{{ 'admin.recovery_codes.copy'|trans }}</button>
                </div>

                <hr class="my-4">

                <p class="fw-semibold">{{ 'admin.recovery_codes.confirm_challenge'|trans({'%n%': challengeIndex}) }}</p>

                <form method="post" action="{{ path('admin_recovery_codes_confirm') }}" class="mt-3">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('recovery_codes_confirm') }}">
                    <div class="mb-3">
                        <label class="form-label" for="recovery-confirm-code">{{ 'admin.recovery_codes.code_label'|trans }}</label>
                        <input type="text" name="code" id="recovery-confirm-code" class="form-control font-monospace" autocomplete="off" spellcheck="false" required maxlength="64" />
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" name="confirmed" value="1" id="recovery-confirmed" class="form-check-input" required>
                        <label class="form-check-label" for="recovery-confirmed">{{ 'admin.recovery_codes.checkbox_label'|trans }}</label>
                    </div>
                    <button type="submit" class="btn btn-success">{{ 'admin.recovery_codes.finish'|trans }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
(function () {
    var btn = document.getElementById('recovery-copy-btn');
    if (!btn) return;
    var lines = {{ codes|json_encode|raw }};
    var text = lines.map(function (c, i) { return (i + 1) + '. ' + c; }).join('\n');
    btn.addEventListener('click', function () {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function () { btn.textContent = {{ 'admin.recovery_codes.copied'|trans|json_encode|raw }}; });
        }
    });
})();
</script>
{% endblock %}