<!DOCTYPE html>
<html lang="{{ lang|default('en') }}" {% if lang=='fa' %}dir="rtl" {% endif %}>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - MCP Hub</title>
    <link rel="icon" type="image/svg+xml" href="/static/logo.svg">
    {% include "dashboard/partials/head_assets.html" %}
    <style>
        .login-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .card-shadow {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .btn-github {
            background: #24292e;
        }

        .btn-github:hover {
            background: #2f363d;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(36, 41, 46, 0.4);
        }

        .btn-google {
            background: #4285f4;
        }

        .btn-google:hover {
            background: #3367d6;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(66, 133, 244, 0.4);
        }

        .btn-admin {
            border: 1px solid #4b5563;
        }

        .btn-admin:hover {
            background: #374151;
            transform: translateY(-1px);
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .transition-all {
            transition: all 0.3s ease;
        }
    </style>
</head>

<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
    <!-- Background decoration -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl animate-float"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl animate-float"
            style="animation-delay: -3s;"></div>
    </div>

    <div class="relative w-full max-w-md">
        <div class="card-shadow bg-gray-800 rounded-2xl p-8">
            <!-- Logo -->
            <div class="text-center mb-8">
                <div class="mx-auto w-16 h-16 login-gradient rounded-2xl flex items-center justify-center mb-4">
                    <img src="/static/logo.svg" alt="MCP Hub Logo"
                        class="w-10 h-10 object-contain drop-shadow-[0_0_8px_rgba(255,255,255,0.8)]">
                </div>
                <h1 class="text-2xl font-bold text-white">MCP Hub</h1>
                <p class="text-gray-400 mt-2" {% if lang=='fa' %}dir="rtl" {% endif %}>
                    {% if lang == 'fa' %}برای مدیریت سایت‌هایتان وارد شوید{% else %}Sign in to manage your sites{% endif
                    %}
                </p>
            </div>

            <!-- Error Message -->
            {% if error %}
            <div class="mb-6 p-4 bg-red-500/20 border border-red-500/50 rounded-lg">
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-red-400 {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %} flex-shrink-0"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="text-red-400 text-sm">
                        {% if error == 'rate_limit' %}
                        {% if lang == 'fa' %}تلاش‌های ثبت‌نام زیاد. لطفاً بعداً تلاش کنید.{% else %}Too many
                        registration attempts. Please try again later.{% endif %}
                        {% elif error == 'oauth_denied' %}
                        {% if lang == 'fa' %}احراز هویت لغو یا رد شد.{% else %}Authentication was cancelled or denied.{%
                        endif %}
                        {% elif error == 'no_email' %}
                        {% if lang == 'fa' %}آدرس ایمیل شما قابل دریافت نبود.{% else %}Could not retrieve your email
                        address. Please check your provider settings.{% endif %}
                        {% elif error == 'invalid_state' %}
                        {% if lang == 'fa' %}نشست منقضی شده. لطفاً دوباره تلاش کنید.{% else %}Session expired. Please
                        try again.{% endif %}
                        {% elif error == 'exchange_failed' %}
                        {% if lang == 'fa' %}احراز هویت ناموفق. لطفاً دوباره تلاش کنید.{% else %}Authentication failed.
                        Please try again.{% endif %}
                        {% elif error == 'provider_unavailable' %}
                        {% if lang == 'fa' %}این ارائه‌دهنده ورود در دسترس نیست.{% else %}This login provider is not
                        available.{% endif %}
                        {% else %}
                        {% if lang == 'fa' %}خطایی رخ داد. لطفاً دوباره تلاش کنید.{% else %}An error occurred. Please
                        try again.{% endif %}
                        {% endif %}
                    </span>
                </div>
            </div>
            {% endif %}

            <!-- OAuth Buttons -->
            <div class="space-y-3">
                {% if "github" in providers %}
                <a href="/auth/github"
                    class="btn-github transition-all flex items-center justify-center w-full py-3 px-4 text-white font-semibold rounded-lg">
                    <svg class="w-5 h-5 {% if lang == 'fa' %}ml-3{% else %}mr-3{% endif %}" fill="currentColor"
                        viewBox="0 0 24 24">
                        <path
                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                    </svg>
                    {% if lang == 'fa' %}ورود با GitHub{% else %}Continue with GitHub{% endif %}
                </a>
                {% endif %}

                {% if "google" in providers %}
                <a href="/auth/google"
                    class="btn-google transition-all flex items-center justify-center w-full py-3 px-4 text-white font-semibold rounded-lg">
                    <svg class="w-5 h-5 {% if lang == 'fa' %}ml-3{% else %}mr-3{% endif %}" viewBox="0 0 24 24">
                        <path
                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                            fill="#fff" />
                        <path
                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                            fill="#fff" fill-opacity="0.8" />
                        <path
                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                            fill="#fff" fill-opacity="0.6" />
                        <path
                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                            fill="#fff" fill-opacity="0.9" />
                    </svg>
                    {% if lang == 'fa' %}ورود با Google{% else %}Continue with Google{% endif %}
                </a>
                {% endif %}

                {% if not providers %}
                <div class="text-center p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
                    <p class="text-yellow-400 text-sm">
                        {% if lang == 'fa' %}هیچ ارائه‌دهنده OAuth پیکربندی نشده.{% else %}No OAuth providers
                        configured. Set GITHUB_CLIENT_ID/SECRET or GOOGLE_CLIENT_ID/SECRET in your environment.{% endif
                        %}
                    </p>
                </div>
                {% endif %}
            </div>

            <!-- Divider + Admin Login Link (hidden when DISABLE_MASTER_KEY_LOGIN=true) -->
            {% if not master_login_disabled %}
            <div class="my-6 flex items-center">
                <div class="flex-1 border-t border-gray-600"></div>
                <span class="px-4 text-sm text-gray-400">
                    {% if lang == 'fa' %}یا{% else %}or{% endif %}
                </span>
                <div class="flex-1 border-t border-gray-600"></div>
            </div>

            <a href="/dashboard/login{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
                class="btn-admin transition-all flex items-center justify-center w-full py-3 px-4 text-gray-300 font-medium rounded-lg text-sm">
                <svg class="w-4 h-4 {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                </svg>
                {% if lang == 'fa' %}ورود مدیر با کلید API{% else %}Admin Login with API Key{% endif %}
            </a>
            {% endif %}

            <!-- Language Toggle -->
            <div class="mt-6 text-center">
                <a href="?lang={% if lang == 'fa' %}en{% else %}fa{% endif %}"
                    class="text-sm text-gray-400 hover:text-white transition-colors">
                    {% if lang == 'fa' %}English{% else %}فارسی{% endif %}
                </a>
            </div>
        </div>

        <p class="text-center text-gray-500 text-sm mt-6">MCP Hub v{{ version }}</p>
    </div>
</body>

</html>