{% extends "base.html" %}
{% load static %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-key text-primary"></i>
                        Backup-Codes verwalten
                    </h4>
                </div>
                <div class="card-body">
                    {% if has_tokens %}
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle"></i> Backup-Codes Status</h6>
                            <p class="mb-0">
                                Sie haben derzeit <strong>{{ token_count }} Backup-Codes</strong> verfügbar.
                                Aus Sicherheitsgründen werden die Codes nicht angezeigt.
                            </p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Neue Backup-Codes generieren</h5>
                                <p class="text-muted">
                                    Wenn Sie neue Backup-Codes benötigen (z.B. weil Sie alle verbraucht haben
                                    oder sie verloren haben), können Sie neue generieren.
                                </p>
                                
                                <div class="alert alert-warning small">
                                    <strong>Warnung:</strong> Das Generieren neuer Codes macht alle 
                                    bisherigen Backup-Codes ungültig.
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <h5>Passwort eingeben</h5>
                                <p class="text-muted">
                                    Geben Sie Ihr Passwort ein, um neue Backup-Codes zu generieren:
                                </p>
                                
                                <form method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="regenerate" value="1">
                                    
                                    <div class="mb-3">
                                        <label for="password" class="form-label">Passwort</label>
                                        <input type="password" 
                                               class="form-control" 
                                               id="password" 
                                               name="password" 
                                               required
                                               autocomplete="current-password">
                                    </div>
                                    
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-warning">
                                            <i class="fas fa-sync-alt"></i>
                                            Neue Backup-Codes generieren
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    {% else %}
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle"></i> Keine Backup-Codes vorhanden</h6>
                            <p class="mb-0">
                                Sie haben derzeit keine Backup-Codes. Das kann passieren, wenn:
                            </p>
                            <ul class="mb-0 mt-2">
                                <li>Sie alle Codes bereits verwendet haben</li>
                                <li>Die Zwei-Faktor-Authentifizierung neu eingerichtet wurde</li>
                                <li>Die Codes aus anderen Gründen gelöscht wurden</li>
                            </ul>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Neue Backup-Codes generieren</h5>
                                <p class="text-muted">
                                    Generieren Sie neue Backup-Codes, um sicherzustellen, dass Sie
                                    auch ohne Authenticator-App auf Ihr Konto zugreifen können.
                                </p>
                            </div>
                            
                            <div class="col-md-6">
                                <h5>Passwort eingeben</h5>
                                
                                <form method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="regenerate" value="1">
                                    
                                    <div class="mb-3">
                                        <label for="password" class="form-label">Passwort</label>
                                        <input type="password" 
                                               class="form-control" 
                                               id="password" 
                                               name="password" 
                                               required
                                               autocomplete="current-password">
                                    </div>
                                    
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-plus"></i>
                                            Backup-Codes generieren
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    {% endif %}
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <h6><i class="fas fa-lightbulb"></i> Über Backup-Codes:</h6>
                                <ul class="mb-0 small">
                                    <li><strong>Zweck:</strong> Zugriff auf Ihr Konto, wenn die Authenticator-App nicht verfügbar ist</li>
                                    <li><strong>Anzahl:</strong> 10 Codes werden generiert</li>
                                    <li><strong>Verwendung:</strong> Jeder Code kann nur einmal verwendet werden</li>
                                    <li><strong>Format:</strong> 8 Zeichen (Buchstaben und Zahlen)</li>
                                    <li><strong>Sicherheit:</strong> Codes sollten sicher aufbewahrt werden</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-3">
                        <a href="{% url 'stiftung:home' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i>
                            Zurück zur Startseite
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}