{% extends "base.html" %}
{% block title %}{{ _('auth.login_title') }}{% endblock %}
{% block content %}
<div class="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- Background Decor -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gold-500/5 rounded-full blur-[100px] -z-10 animate-pulse-slow"></div>

    <div class="max-w-md w-full space-y-8 bg-slate-900/70 backdrop-blur-xl p-10 rounded-3xl border border-slate-700 shadow-2xl relative">
        <div class="text-center">
            <a href="/" class="block mx-auto mb-6 w-28">
                <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Jadwa AI Logo">
            </a>
            <h2 class="text-3xl font-serif font-bold text-white mb-2">{{ _('auth.login_title') }}</h2>
            <p class="text-slate-400 text-sm">{{ _('auth.login_subtitle') }}</p>
        </div>

        <form class="mt-8 space-y-6" action="{{ url_for('auth.login') }}" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="space-y-4">
                <div>
                    <label for="email" class="sr-only">{{ _('auth.email') }}</label>
                    <input id="email" name="email" type="email" autocomplete="email" required 
                           class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 focus:z-10 sm:text-sm transition duration-300" 
                           placeholder="{{ _('auth.email') }}">
                </div>
                <div>
                    <label for="password" class="sr-only">{{ _('auth.password') }}</label>
                    <input id="password" name="password" type="password" autocomplete="current-password" required 
                           class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 focus:z-10 sm:text-sm transition duration-300" 
                           placeholder="{{ _('auth.password') }}">
                </div>
            </div>

            <div class="flex items-center justify-between text-sm">
                <div class="flex items-center">
                    <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-gold-600 focus:ring-gold-500 border-gray-600 rounded bg-black/50">
                    <label for="remember-me" class="{{ 'mr-2' if is_rtl else 'ml-2' }} block text-slate-400">{{ _('auth.remember_me') }}</label>
                </div>
                <div class="text-sm">
                    <a href="#" class="font-medium text-gold-400 hover:text-gold-300 transition">{{ _('auth.forgot_password') }}</a>
                </div>
            </div>

            <div>
                <button type="submit" class="group relative w-full flex justify-center py-4 px-4 border border-transparent text-sm font-bold rounded-xl text-black bg-gradient-to-r from-gold-400 to-gold-600 hover:from-gold-300 hover:to-gold-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gold-500 transition duration-300 shadow-[0_0_20px_rgba(210,175,32,0.3)] hover:shadow-[0_0_30px_rgba(210,175,32,0.5)] hover:-translate-y-0.5">
                    {{ _('auth.login_title') }}
                </button>
            </div>
            
            <div class="text-center text-sm text-slate-500 mt-6">
                {{ _('auth.no_account') }} 
                <a href="{{ url_for('auth.register') }}" class="font-medium text-gold-400 hover:text-gold-300 transition border-b border-gold-400/30 pb-0.5">{{ _('nav.register') }}</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}