{% extends "base.html" %}
{% load allauth %}
{% load i18n %}
{% block head_title %}
    {% trans "Two-Factor Authentication" %}
{% endblock head_title %}
{% 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="text-center mb-5">
                    <h1 class="display-4 fw-bold text-primary mb-3">
                        <i class="fas fa-shield-alt me-3"></i>{% trans "Two-Factor Authentication" %}
                    </h1>
                    <p class="lead text-muted">
                        {% trans "Enhance your account security with multi-factor authentication. Choose from authenticator apps, security keys, and recovery codes." %}
                    </p>
                </div>

                {% if messages %}
                    <div class="mb-4">
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                <div class="row g-4">
                    {% if "totp" in MFA_SUPPORTED_TYPES %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 shadow-sm border-0">
                                <div class="card-body text-center">
                                    <div class="mb-3">
                                        <i class="fas fa-mobile-alt fa-3x text-primary"></i>
                                    </div>
                                    <h5 class="card-title fw-bold">{% translate "Authenticator App" %}</h5>
                                    <p class="card-text text-muted">
                                        {% if authenticators.totp %}
                                            {% translate "Authentication using an authenticator app is active." %}
                                        {% else %}
                                            {% translate "An authenticator app is not active." %}
                                        {% endif %}
                                    </p>
                                    <div class="mt-auto">
                                        {% url 'mfa_deactivate_totp' as deactivate_url %}
                                        {% url 'mfa_activate_totp' as activate_url %}
                                        {% if authenticators.totp %}
                                            <a href="{{ deactivate_url }}" class="btn btn-outline-danger btn-sm">
                                                <i class="fas fa-times me-1"></i>{% translate "Deactivate" %}
                                            </a>
                                        {% else %}
                                            <a href="{{ activate_url }}" class="btn btn-primary btn-sm">
                                                <i class="fas fa-plus me-1"></i>{% translate "Activate" %}
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if "webauthn" in MFA_SUPPORTED_TYPES %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 shadow-sm border-0">
                                <div class="card-body text-center">
                                    <div class="mb-3">
                                        <i class="fas fa-key fa-3x text-success"></i>
                                    </div>
                                    <h5 class="card-title fw-bold">{% translate "Security Keys" %}</h5>
                                    <p class="card-text text-muted">
                                        {% if authenticators.webauthn|length %}
                                            {% blocktranslate count count=authenticators.webauthn|length %}You have added {{ count }} security key.{% plural %}You have added {{ count }} security keys.{% endblocktranslate %}
                                        {% else %}
                                            {% translate "No security keys have been added." %}
                                        {% endif %}
                                    </p>
                                    <div class="mt-auto">
                                        {% if authenticators.webauthn|length %}
                                            {% url 'mfa_list_webauthn' as webauthn_list_url %}
                                            <a href="{{ webauthn_list_url }}" class="btn btn-outline-secondary btn-sm">
                                                <i class="fas fa-cog me-1"></i>{% translate "Manage" %}
                                            </a>
                                        {% else %}
                                            {% url 'mfa_add_webauthn' as webauthn_add_url %}
                                            <a href="{{ webauthn_add_url }}" class="btn btn-success btn-sm">
                                                <i class="fas fa-plus me-1"></i>{% translate "Add" %}
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if "recovery_codes" in MFA_SUPPORTED_TYPES %}
                        {% with total_count=authenticators.recovery_codes.generate_codes|length unused_count=authenticators.recovery_codes.get_unused_codes|length %}
                            <div class="col-md-6 col-lg-4">
                                <div class="card h-100 shadow-sm border-0">
                                    <div class="card-body text-center">
                                        <div class="mb-3">
                                            <i class="fas fa-scroll fa-3x text-warning"></i>
                                        </div>
                                        <h5 class="card-title fw-bold">{% translate "Recovery Codes" %}</h5>
                                        <p class="card-text text-muted">
                                            {% if authenticators.recovery_codes %}
                                                {% blocktranslate count unused_count=unused_count %}There is {{ unused_count }} out of {{ total_count }} recovery codes available.{% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes available.{% endblocktranslate %}
                                            {% else %}
                                                {% translate "No recovery codes set up." %}
                                            {% endif %}
                                        </p>
                                        <div class="mt-auto d-flex flex-column gap-2">
                                            {% if is_mfa_enabled %}
                                                {% if authenticators.recovery_codes %}
                                                    {% if unused_count > 0 %}
                                                        {% url 'mfa_view_recovery_codes' as view_url %}
                                                        <a href="{{ view_url }}" class="btn btn-outline-info btn-sm">
                                                            <i class="fas fa-eye me-1"></i>{% translate "View" %}
                                                        </a>
                                                        {% url 'mfa_download_recovery_codes' as download_url %}
                                                        <a href="{{ download_url }}" class="btn btn-outline-secondary btn-sm">
                                                            <i class="fas fa-download me-1"></i>{% translate "Download" %}
                                                        </a>
                                                    {% endif %}
                                                {% endif %}
                                                {% url 'mfa_generate_recovery_codes' as generate_url %}
                                                <a href="{{ generate_url }}" class="btn btn-warning btn-sm">
                                                    <i class="fas fa-sync me-1"></i>{% translate "Generate" %}
                                                </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endwith %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}