{% extends "mfa/recovery_codes/base.html" %}
{% load i18n %}
{% load allauth %}
{% block content %}
<div class="container-fluid bg-light py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="card shadow border-0">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <i class="fas fa-scroll fa-4x text-warning mb-3"></i>
                            <h1 class="h3 fw-bold text-dark">{% translate "Recovery Codes" %}</h1>
                            <p class="text-muted">
                                {% blocktranslate count unused_count=unused_codes|length %}There is {{ unused_count }} out of {{ total_count }} recovery codes available.{% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes available.{% endblocktranslate %}
                            </p>
                        </div>

                        {% if unused_codes %}
                            <div class="mb-4">
                                <label for="recovery_codes" class="form-label fw-semibold">
                                    <i class="fas fa-list me-2"></i>{% translate "Unused codes" %}
                                </label>
                                <textarea id="recovery_codes" class="form-control font-monospace" rows="{{ unused_codes|length }}" readonly>
{% for code in unused_codes %}{% if forloop.counter0 %}{% endif %}{{ code }}{% endfor %}
                                </textarea>
                                <div class="form-text">
                                    {% trans "Keep these codes safe. Each code can only be used once." %}
                                </div>
                            </div>

                            <div class="d-flex gap-2 justify-content-center flex-wrap">
                                {% url 'mfa_download_recovery_codes' as download_url %}
                                <a href="{{ download_url }}" class="btn btn-outline-primary">
                                    <i class="fas fa-download me-2"></i>{% translate "Download codes" %}
                                </a>
                                {% url 'mfa_generate_recovery_codes' as generate_url %}
                                <a href="{{ generate_url }}" class="btn btn-warning">
                                    <i class="fas fa-sync me-2"></i>{% translate "Generate new codes" %}
                                </a>
                            </div>
                        {% else %}
                            <div class="text-center">
                                <p class="text-muted mb-3">{% trans "No unused recovery codes available." %}</p>
                                {% url 'mfa_generate_recovery_codes' as generate_url %}
                                <a href="{{ generate_url }}" class="btn btn-warning">
                                    <i class="fas fa-plus me-2"></i>{% translate "Generate codes" %}
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}