{% 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-6 col-lg-4">
            <div class="card shadow">
                <div class="card-header text-center">
                    <h4 class="mb-0">
                        <i class="fas fa-shield-alt text-primary"></i>
                        Zwei-Faktor-Authentifizierung
                    </h4>
                </div>
                <div class="card-body">
                    <p class="text-center text-muted mb-4">
                        Geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein
                        oder verwenden Sie einen Backup-Code.
                    </p>
                    
                    <form method="post">
                        {% csrf_token %}
                        {% if next %}
                            <input type="hidden" name="next" value="{{ next }}">
                        {% endif %}
                        
                        <div class="mb-4">
                            <label for="otp_token" class="form-label">Authentifizierungscode</label>
                            <input type="text" 
                                   class="form-control form-control-lg text-center" 
                                   id="otp_token" 
                                   name="otp_token" 
                                   placeholder="000000"
                                   maxlength="8" 
                                   required
                                   autocomplete="off"
                                   autofocus>
                            <div class="form-text text-center">
                                6-stelliger Code aus der App oder 8-stelliger Backup-Code
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-sign-in-alt"></i>
                                Bestätigen
                            </button>
                        </div>
                    </form>
                    
                    <div class="text-center mt-4">
                        <details>
                            <summary class="text-muted small">Probleme beim Anmelden?</summary>
                            <div class="mt-2 small text-muted">
                                <p>Falls Sie keinen Zugriff auf Ihre Authenticator-App haben:</p>
                                <ul class="text-start">
                                    <li>Verwenden Sie einen der 8-stelligen Backup-Codes</li>
                                    <li>Kontaktieren Sie den Administrator</li>
                                </ul>
                            </div>
                        </details>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tokenInput = document.getElementById('otp_token');
    if (tokenInput) {
        // Auto-submit when 6 digits entered (TOTP) or 8 characters (backup code)
        tokenInput.addEventListener('input', function() {
            const value = this.value.trim();
            if ((value.length === 6 && /^\d{6}$/.test(value)) || 
                (value.length === 8 && /^[a-f0-9]{8}$/i.test(value))) {
                // Small delay to allow user to see complete input
                setTimeout(() => {
                    this.closest('form').submit();
                }, 300);
            }
        });
    }
});
</script>
{% endblock %}