{% extends 'base.html.twig' %}

{% block title %}Sign In | TextBlast AI{% endblock %}

{% block body %}
<div class="min-h-screen bg-[#0f172a] flex items-center justify-center relative overflow-hidden font-sans">
    
    {# Background Glows (Matching Dashboard) #}
    <div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-emerald-600/10 blur-[100px] rounded-full"></div>
    <div class="absolute bottom-0 right-0 w-[30%] h-[30%] bg-blue-600/5 blur-[100px] rounded-full"></div>

    <div class="relative z-10 w-full max-w-md px-6">
        <div class="text-center mb-8">
            <h2 class="text-4xl font-bold tracking-tighter text-white">
                Text<span class="text-emerald-400">Blast</span>
            </h2>
        </div>

        <div class="bg-slate-900/60 backdrop-blur-md border border-white/10 p-8 rounded-2xl shadow-xl">
            {{ form_start(loginForm, {'attr': {'class': 'space-y-5'}}) }}
                
                <div>
                    {{ form_label(loginForm.email, 'Email', {'label_attr': {'class': 'block text-xs font-bold text-emerald-400 uppercase tracking-widest mb-2'}}) }}
                    {{ form_widget(loginForm.email, {
                        'attr': {
                            'class': 'w-full bg-slate-800/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-emerald-500 transition-colors',
                            'placeholder': 'your@email.com'
                        }
                    }) }}
                </div>

                <div>
                    {{ form_label(loginForm.password, 'Password', {'label_attr': {'class': 'block text-xs font-bold text-emerald-400 uppercase tracking-widest mb-2'}}) }}
                    {{ form_widget(loginForm.password, {
                        'attr': {
                            'class': 'w-full bg-slate-800/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-emerald-500 transition-colors',
                            'placeholder': '••••••••'
                        }
                    }) }}
                </div>

                <div class="flex items-center">
                    {{ form_widget(loginForm.remember_me, {'attr': {'class': 'h-4 w-4 rounded border-white/10 bg-slate-800 text-emerald-500 focus:ring-0 focus:ring-offset-0'}}) }}
                    {{ form_label(loginForm.remember_me, 'Remember me', {'label_attr': {'class': 'ml-2 text-sm text-slate-400'}}) }}
                </div>

                <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 rounded-lg shadow-[0_0_15px_rgba(16,185,129,0.2)] transition-all">
                    Sign In
                </button>
            {{ form_end(loginForm) }}
        </div>

        <p class="mt-8 text-center text-[10px] text-slate-500 uppercase tracking-widest">
            &copy; 2026 NextG 
        </p>
    </div>
</div>
{% endblock %}