<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login - Lizenzverwaltung</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .error-failed {
            background-color: #dc3545 !important;
            color: white !important;
            font-weight: bold !important;
            font-size: 1.5rem !important;
            text-align: center !important;
            padding: 1rem !important;
            border-radius: 0.5rem !important;
            text-transform: uppercase !important;
            animation: shake 0.5s;
            box-shadow: 0 0 20px rgba(220, 53, 69, 0.5);
        }
        
        .error-blocked {
            background-color: #6f42c1 !important;
            color: white !important;
            font-weight: bold !important;
            font-size: 1.2rem !important;
            text-align: center !important;
            padding: 1rem !important;
            border-radius: 0.5rem !important;
            animation: pulse 2s infinite;
        }
        
        .error-captcha {
            background-color: #fd7e14 !important;
            color: white !important;
            font-weight: bold !important;
            font-size: 1.2rem !important;
            text-align: center !important;
            padding: 1rem !important;
            border-radius: 0.5rem !important;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
            20%, 40%, 60%, 80% { transform: translateX(10px); }
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        
        .attempts-warning {
            background-color: #ffc107;
            color: #000;
            padding: 0.5rem;
            border-radius: 0.25rem;
            text-align: center;
            margin-bottom: 1rem;
            font-weight: bold;
        }
        
        .security-info {
            font-size: 0.875rem;
            color: #6c757d;
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container">
        <div class="row min-vh-100 align-items-center justify-content-center">
            <div class="col-md-4">
                <div class="card shadow">
                    <div class="card-body p-5">
                        <h2 class="text-center mb-4">🔐 Admin Login</h2>
                        
                        {% if error %}
                        <div class="error-{{ error_type|default('failed') }}">
                            {{ error }}
                        </div>
                        {% endif %}
                        
                        {% if attempts_left is defined and attempts_left > 0 and attempts_left < 5 %}
                        <div class="attempts-warning">
                            ⚠️ Noch {{ attempts_left }} Versuch(e) bis zur IP-Sperre!
                        </div>
                        {% endif %}
                        
                        <form method="post">
                            <div class="mb-3">
                                <label for="username" class="form-label">Benutzername</label>
                                <input type="text" class="form-control" id="username" name="username" required autofocus>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">Passwort</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            
                            {% if show_captcha and recaptcha_site_key %}
                            <div class="mb-3">
                                <div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}"></div>
                            </div>
                            {% endif %}
                            
                            <button type="submit" class="btn btn-primary w-100">Anmelden</button>
                        </form>
                        
                        <div class="security-info">
                            🛡️ Geschützt durch Rate-Limiting und IP-Sperre
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {% if show_captcha and recaptcha_site_key %}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    {% endif %}
</body>
</html>