<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In - Rise</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-950 text-gray-100">
    <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-gray-950 to-black">
        <div class="w-full max-w-md p-8 bg-gray-900 rounded-lg border border-gray-800 shadow-2xl">
            <div class="text-center mb-6">
                <div class="flex justify-center mb-4">
                    <div class="w-16 h-16 svg-mask text-white" style="mask-image: url(/assets/logo.svg); -webkit-mask-image: url(/assets/logo.svg);"></div>
                </div>
                <h1 class="text-3xl font-bold text-white mb-2">Rise</h1>
                <span class="inline-block bg-indigo-600 text-white text-sm font-semibold px-3 py-1 rounded-full mb-4">🔒 Private Project</span>
                <h2 class="text-xl font-semibold text-gray-200 mb-2">Authentication Required</h2>
            </div>

            <div class="mb-6">
                <p class="text-gray-300 mb-4">
                    The project <strong class="font-mono text-white bg-gray-800 px-2 py-1 rounded">{{ project_name }}</strong> is private
                    and requires authentication to access.
                </p>
                <p class="text-sm text-gray-400">
                    You'll be redirected to sign in with your identity provider.
                    After authentication, you'll be able to access this project.
                </p>
            </div>

            <a href="{{ continue_url }}" class="block w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors text-center">
                Sign In
            </a>

            {% if redirect_url %}
            <p class="mt-4 text-center text-xs text-gray-500">
                <small>After signing in, you'll be redirected to:<br><code class="bg-gray-800 px-1 rounded">{{ redirect_url }}</code></small>
            </p>
            {% endif %}
        </div>
    </div>
</body>
</html>
