<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - NanoIDP</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            width: 100%;
            max-width: 420px;
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }
        .login-header {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            color: #fff;
            padding: 2rem;
            border-radius: 1rem 1rem 0 0;
            text-align: center;
        }
        .login-header i {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
        .login-body {
            padding: 2rem;
        }
        .form-floating > label {
            color: #6c757d;
        }
        .quick-login {
            border-top: 1px solid #e9ecef;
            padding-top: 1rem;
            margin-top: 1rem;
        }
        .quick-login-btn {
            font-size: 0.85rem;
            padding: 0.5rem 0.75rem;
        }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="login-header">
            <i class="bi bi-shield-lock"></i>
            <h3 class="mb-0">NanoIDP</h3>
            <small class="opacity-75">Identity Provider</small>
        </div>
        <div class="login-body">
            {% if error %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endif %}

            <form method="POST">
                {% if saml_request %}
                <input type="hidden" name="SAMLRequest" value="{{ saml_request|e }}">
                <input type="hidden" name="saml_original_verb" value="{{ original_verb|e }}">
                {% endif %}
                {% if relay_state %}
                <input type="hidden" name="RelayState" value="{{ relay_state|e }}">
                {% endif %}

                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" required>
                    <label for="username"><i class="bi bi-person me-2"></i>Username</label>
                </div>

                <div class="form-floating mb-4">
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                    <label for="password"><i class="bi bi-key me-2"></i>Password</label>
                </div>

                <button type="submit" class="btn btn-primary w-100 py-2">
                    <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
                </button>
            </form>

            {% if users %}
            <div class="quick-login">
                <small class="text-muted d-block mb-2">Quick fill username</small>
                <div class="d-flex flex-wrap gap-2">
                    {% for user in users[:6] %}
                    <button type="button" class="btn btn-outline-secondary quick-login-btn"
                            onclick='fillUsername({{ user|tojson }})' title="Fill username, enter password manually">
                        {{ user }}
                    </button>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <script>
        function fillUsername(username) {
            document.getElementById('username').value = username;
            document.getElementById('password').focus();
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
