{% extends "base.html" %}

{% block title %}{{ crate::i18n::t("login-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- Logo -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-primary-400 to-cyan-400 bg-clip-text text-transparent">
                Remotto Console
            </h1>
            <p class="text-slate-400 mt-2">{{ crate::i18n::t("login-subtitle", lang) }}</p>
        </div>

        <!-- Login Card -->
        <div class="glass rounded-2xl p-8 border border-white/10 shadow-2xl">
            <h2 class="text-2xl font-semibold mb-6 text-center">{{ crate::i18n::t("login-title", lang) }}</h2>

            {% if !error.is_empty() %}
            <div class="bg-red-500/20 border border-red-500/50 rounded-lg p-4 mb-6 text-red-300">
                {{ error }}
            </div>
            {% endif %}

            <form hx-post="/admin/login" hx-swap="innerHTML" hx-target="body" class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("login-username",
                        lang) }}</label>
                    <input type="text" name="username" required
                        class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all outline-none text-white">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("login-password",
                        lang) }}</label>
                    <input type="password" name="password" required
                        class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all outline-none text-white">
                </div>

                <button type="submit"
                    class="w-full py-3 px-4 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all duration-300 shadow-lg hover:shadow-primary-500/25">
                    {{ crate::i18n::t("login-submit", lang) }}
                </button>
            </form>
        </div>

        <!-- Language Switcher -->
        <div class="flex justify-center mt-6">
            <select onchange="window.location.href='/admin/lang?lang='+this.value"
                class="bg-slate-800/50 border border-slate-600 text-slate-300 text-sm rounded-lg px-3 py-1.5 focus:ring-primary-500 focus:border-primary-500">
                <option value="en-US" {% if lang=="en-US" %}selected{% endif %}>English (US)</option>
                <option value="en-GB" {% if lang=="en-GB" %}selected{% endif %}>English (UK)</option>
                <option value="zh-CN" {% if lang=="zh-CN" %}selected{% endif %}>简体中文</option>
                <option value="zh-TW" {% if lang=="zh-TW" %}selected{% endif %}>繁體中文</option>
                <option value="es" {% if lang=="es" %}selected{% endif %}>Español</option>
                <option value="fr" {% if lang=="fr" %}selected{% endif %}>Français</option>
                <option value="de" {% if lang=="de" %}selected{% endif %}>Deutsch</option>
                <option value="pt" {% if lang=="pt" %}selected{% endif %}>Português</option>
                <option value="ru" {% if lang=="ru" %}selected{% endif %}>Русский</option>
                <option value="ar" {% if lang=="ar" %}selected{% endif %}>العربية</option>
                <option value="it" {% if lang=="it" %}selected{% endif %}>Italiano</option>
                <option value="tr" {% if lang=="tr" %}selected{% endif %}>Türkçe</option>
                <option value="ja" {% if lang=="ja" %}selected{% endif %}>日本語</option>
                <option value="ko" {% if lang=="ko" %}selected{% endif %}>한국어</option>
                <option value="th" {% if lang=="th" %}selected{% endif %}>ไทย</option>
                <option value="ta" {% if lang=="ta" %}selected{% endif %}>தமிழ்</option>
                <option value="te" {% if lang=="te" %}selected{% endif %}>తెలుగు</option>
                <option value="mr" {% if lang=="mr" %}selected{% endif %}>मराठी</option>
            </select>
        </div>

        <!-- Footer -->
        <p class="text-center text-slate-500 text-sm mt-6">
            {{ crate::i18n::t("login-footer", lang) }}
        </p>
    </div>
</div>
{% endblock %}