{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="flex justify-end mb-4">
        {% include 'menu_toggle.html' %}
    </div>
    <div class="min-h-[70vh] flex items-center justify-center p-4">
        <div class="w-full max-w-md relative">
            <div class="glass-panel relative z-10 p-10 rounded-3xl shadow-2xl border-white/5 overflow-hidden">
                <div class="text-center mb-10">
                    <div class="w-16 h-16 rounded-2xl accent-solid flex items-center justify-center mx-auto mb-6 shadow-xl">
                        <svg class="w-8 h-8" 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">
                        {% if mode == 'register' %}Create Account{% else %}Welcome Back{% endif %}
                    </h2>
                    <p class="text-slate-500 text-sm font-medium tracking-wide">
                        {% if mode == 'register' %}Set up your Glimpsy admin account.{% else %}Sign in to access your dashboard.{% endif %}
                    </p>
                </div>

                <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">Username</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-[var(--color-primary)]/30 transition-all font-medium"
                            placeholder="Username">
                    </div>

                    {% if mode == 'register' %}
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] ml-1">Email</label>
                        <input type="email" name="email"
                            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-[var(--color-primary)]/30 transition-all font-medium"
                            placeholder="you@example.com">
                    </div>
                    {% endif %}

                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] ml-1">Password</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-[var(--color-primary)]/30 transition-all font-medium"
                            placeholder="••••••••">
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="w-full accent-btn font-bold py-4 transition-all shadow-xl active:scale-[0.98] transform">
                            {% if mode == 'register' %}Create Account{% else %}Sign In{% endif %}
                        </button>
                    </div>
                </form>

                {% if mode == 'login' and not user_exists %}
                <p class="text-center text-slate-500 text-sm mt-6">
                    No account yet? <a href="/register" class="accent-text hover:opacity-80">Set up admin</a>
                </p>
                {% elif mode == 'register' %}
                <p class="text-center text-slate-500 text-sm mt-6">
                    Already have an account? <a href="/login" class="accent-text hover:opacity-80">Sign in</a>
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}