{% 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-shield-alt text-primary"></i>
                        Zwei-Faktor-Authentifizierung einrichten
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Schritt 1: Authenticator App installieren</h5>
                            <p class="text-muted">
                                Installieren Sie eine Authenticator-App auf Ihrem Smartphone:
                            </p>
                            <ul class="mb-4">
                                <li><strong>Google Authenticator</strong> (iOS/Android)</li>
                                <li><strong>Microsoft Authenticator</strong> (iOS/Android)</li>
                                <li><strong>Authy</strong> (iOS/Android/Desktop)</li>
                                <li><strong>1Password</strong> (Premium)</li>
                            </ul>

                            <h5>Schritt 2: QR-Code scannen</h5>
                            <p class="text-muted">
                                Scannen Sie den QR-Code mit Ihrer Authenticator-App:
                            </p>
                            <div class="text-center mb-4">
                                <img src="{% url 'stiftung:two_factor_qr' %}" 
                                     alt="QR Code für 2FA Setup" 
                                     class="img-fluid border rounded" 
                                     style="max-width: 200px;">
                            </div>
                            
                            <details class="mb-4">
                                <summary class="text-muted small">Manueller Setup-Code anzeigen</summary>
                                <div class="mt-2 p-2 bg-light rounded">
                                    <small class="font-monospace">{{ device.key }}</small>
                                </div>
                                <small class="text-muted d-block mt-1">
                                    Falls der QR-Code nicht funktioniert, können Sie diesen Code manuell eingeben.
                                </small>
                            </details>
                        </div>
                        
                        <div class="col-md-6">
                            <h5>Schritt 3: Bestätigen</h5>
                            <p class="text-muted">
                                Geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein:
                            </p>
                            
                            <form method="post">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="token" class="form-label">Bestätigungscode</label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="token" 
                                           name="token" 
                                           placeholder="000000"
                                           maxlength="6" 
                                           pattern="[0-9]{6}"
                                           required
                                           autocomplete="off">
                                    <div class="form-text">
                                        Der Code wechselt alle 30 Sekunden.
                                    </div>
                                </div>
                                
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-check"></i>
                                        Zwei-Faktor-Authentifizierung aktivieren
                                    </button>
                                    <a href="{% url 'stiftung:home' %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times"></i>
                                        Abbrechen
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <h6><i class="fas fa-info-circle"></i> Wichtige Hinweise:</h6>
                                <ul class="mb-0 small">
                                    <li>Nach der Aktivierung erhalten Sie Backup-Codes für den Notfall</li>
                                    <li>Bewahren Sie diese Backup-Codes sicher auf</li>
                                    <li>Sie benötigen bei jeder Anmeldung einen Code aus der App</li>
                                    <li>Die Zwei-Faktor-Authentifizierung erhöht die Sicherheit Ihres Kontos erheblich</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-focus on token input
    const tokenInput = document.getElementById('token');
    if (tokenInput) {
        tokenInput.focus();
        
        // Auto-submit when 6 digits entered
        tokenInput.addEventListener('input', function() {
            if (this.value.length === 6 && /^\d{6}$/.test(this.value)) {
                // Small delay to allow user to see complete input
                setTimeout(() => {
                    this.closest('form').submit();
                }, 300);
            }
        });
    }
});
</script>
{% endblock %}