{% extends "base.html" %}
{% block content %}
<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 -left-12 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none">
        </div>
        <div class="absolute -bottom-12 -right-12 w-64 h-64 bg-teal-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-emerald-500 to-teal-500 flex items-center justify-center mx-auto mb-6 shadow-xl shadow-emerald-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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                    </svg>
                </div>
                <h2 class="text-3xl font-bold text-white mb-2">Setup Admin</h2>
                <p class="text-slate-500 text-sm font-medium tracking-wide">Establish the primary administrative
                    identity.</p>
            </div>

            <!-- 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">New
                        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-emerald-500/30 focus:border-emerald-500/50 transition-all font-medium"
                        placeholder="Choose Username">
                </div>
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] ml-1">Security
                        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-emerald-500/30 focus:border-emerald-500/50 transition-all font-medium"
                        placeholder="••••••••">
                </div>

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