<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login - AgentForms</title>
    <link rel="icon" href="{{ url_for('static', filename='images/logo.svg') }}" type="image/svg+xml">
    <style nonce="{{ csp_nonce }}">
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: #e2e8f0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        .login-container { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 400px; }
        .logo { text-align: center; margin-bottom: 2rem; }
        .logo h1 { font-size: 1.5rem; color: #3b82f6; margin-bottom: 0.25rem; }
        .logo p { color: #94a3b8; font-size: 0.875rem; }
        .form-group { margin-bottom: 1.5rem; }
        label { display: block; font-size: 0.875rem; color: #94a3b8; margin-bottom: 0.5rem; }
        input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #334155; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 1rem; }
        input:focus { outline: none; border-color: #3b82f6; }
        button { width: 100%; padding: 0.75rem; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; }
        button:hover { background: #2563eb; }
        .error { background: #7f1d1d; border: 1px solid #991b1b; color: #fecaca; padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.875rem; }
        .back-link { text-align: center; margin-top: 1.5rem; }
        .back-link a { color: #3b82f6; text-decoration: none; font-size: 0.875rem; }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="logo">
            <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="AgentForms" height="40" style="filter: brightness(0) invert(1);">
            <p>Admin Panel</p>
        </div>

        {% if errors %}
        <div class="error">
            <ul style="margin: 0; padding-left: 1.25rem;">
                {% for error in errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <form method="POST">
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" value="{{ email or '' }}" required autocomplete="email">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required autocomplete="current-password">
            </div>
            <button type="submit">Sign In</button>
        </form>

        <div class="back-link">
            <a href="/">← Back to AgentForms</a>
        </div>
    </div>
</body>
</html>
