{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="min-h-[70vh] flex items-center justify-center p-4">
        <div class="w-full max-w-md relative">
            <!-- Glow backdrops -->
            <div class="absolute -top-12 -right-12 w-64 h-64 bg-sky-500/10 rounded-full blur-3xl pointer-events-none">
            </div>
            <div
                class="absolute -bottom-12 -left-12 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none">
            </div>

            <div class="glass-panel relative z-10 p-10 rounded-3xl shadow-2xl border-white/5 overflow-hidden">
                <!-- Header -->
                <div class="text-center mb-10">
                    <div
                        class="w-16 h-16 rounded-2xl bg-gradient-to-tr from-sky-500 to-indigo-500 flex items-center justify-center mx-auto mb-6 shadow-xl shadow-sky-500/20">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <h2 class="text-3xl font-bold text-white mb-2">Authenticator</h2>
                    <p class="text-slate-500 text-sm font-medium tracking-wide">Enter your credentials to access the
                        node.
                    </p>
                </div>

                <!-- Flash Messages -->
                {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                {% for category, message in messages %}
                <div
                    class="mb-8 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold uppercase tracking-wider flex items-center gap-3">
                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    {{ message }}
                </div>
                {% endfor %}
                {% endif %}
                {% endwith %}

                <!-- Form -->
                <form method="POST" class="space-y-6">
                    <div class="space-y-2">
                        <label
                            class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] ml-1">Identity</label>
                        <input type="text" name="username" required
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-4 text-white placeholder-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500/30 focus:border-sky-500/50 transition-all font-medium"
                            placeholder="Username">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] ml-1">Secret
                            Key</label>
                        <input type="password" name="password" required
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-4 text-white placeholder-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500/30 focus:border-sky-500/50 transition-all font-medium"
                            placeholder="••••••••">
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                            class="w-full bg-gradient-to-r from-sky-600 to-indigo-600 hover:from-sky-500 hover:to-indigo-500 text-white font-bold py-4 rounded-xl transition-all shadow-xl shadow-sky-900/40 hover:shadow-sky-500/20 active:scale-[0.98] transform">
                            Initialize Session
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endblock %}