{% extends "base.html" %}

{% block title %}Login{% endblock %}

{% block content %}
<main class="max-w-xl mx-auto px-6 py-40">
    <div class="glass p-12 rounded-3xl shadow-2xl relative overflow-hidden border-2 terminal-border group">
        <!-- Decorative Glows -->
        <div class="absolute -top-24 -right-24 w-64 h-64 neon-bg opacity-10 rounded-full blur-[100px]"></div>
        <div class="absolute -bottom-24 -left-24 w-64 h-64 neon-bg opacity-10 rounded-full blur-[100px]"></div>

        <div class="relative z-10 text-center">
            <div class="inline-block px-3 py-1 border terminal-border rounded-full mb-8 bg-zinc-900/40">
                <span class="text-[9px] font-black tracking-[0.5em] text-zinc-400 uppercase">Authentication_Required</span>
            </div>
            
            <h1 class="text-4xl font-black text-white tracking-tighter mb-10">Access Portal</h1>

            {% if error == "invalid_credentials" %}
            <div class="mb-8 p-4 bg-rose-500/10 border border-rose-500/50 rounded-xl">
                <p class="text-[10px] font-black text-rose-500 uppercase tracking-widest">Error: Invalid Username or Password</p>
            </div>
            {% elif error == "unauthorized" %}
            <div class="mb-8 p-4 bg-amber-500/10 border border-amber-500/50 rounded-xl">
                <p class="text-[10px] font-black text-amber-500 uppercase tracking-widest">Warning: Session Required for This Segment</p>
            </div>
            {% endif %}

            <form action="/login" method="post" class="space-y-6">
                <div class="relative">
                    <input type="text" name="username" placeholder="USERNAME" required
                           class="w-full bg-black border-2 terminal-border rounded-xl px-6 py-4 text-white text-xs font-black tracking-widest outline-none focus:neon-border transition-all placeholder:text-zinc-800">
                </div>
                <div class="relative">
                    <input type="password" name="password" placeholder="PASSWORD" required
                           class="w-full bg-black border-2 terminal-border rounded-xl px-6 py-4 text-white text-xs font-black tracking-widest outline-none focus:neon-border transition-all placeholder:text-zinc-800">
                </div>
                <button type="submit" class="w-full py-5 neon-bg text-black font-black text-[11px] uppercase tracking-[0.3em] rounded-xl hover:brightness-125 transition-all mt-4">
                    Authorize_Session
                </button>
            </form>
            
            <p class="mt-8 text-[9px] font-black text-zinc-600 uppercase tracking-widest">
                Security_Layer: v2.4_Stable
            </p>
        </div>
    </div>
</main>
{% endblock %}