<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ZKP Authentication{% endblock %}</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <!-- GSAP Animations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        mono: ['JetBrains Mono', 'monospace'],
                    },
                    colors: {
                        brand: {
                            dark:    '#0a0a0a',
                            gray:    '#171717',
                            accent:  '#00f2ff',
                            purple:  '#bd00ff',
                            success: '#00ff9d',
                            danger:  '#ff0055',
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            background-color: #050505;
            color: #ffffff;
            overflow-x: hidden;
        }
        .bg-gradient-mesh {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background:
                radial-gradient(circle at 15% 50%, rgba(76, 29, 149, 0.15), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(0, 242, 255, 0.10), transparent 25%);
            z-index: -1;
            pointer-events: none;
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }
        .glass-input {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            transition: all 0.3s ease;
        }
        .glass-input:focus {
            border-color: #00f2ff;
            outline: none;
            box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
        }
        .custom-scroll::-webkit-scrollbar { width: 8px; }
        .custom-scroll::-webkit-scrollbar-track { background: #0a0a0a; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
        .custom-scroll::-webkit-scrollbar-thumb:hover { background: #00f2ff; }
    </style>

    {% block extra_head %}{% endblock %}
</head>
<body class="antialiased min-h-screen flex flex-col font-sans">

    <div class="bg-gradient-mesh"></div>

    <!-- Navbar -->
    <nav class="glass-panel sticky top-0 z-50 border-b border-white/10">
        <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
            <a href="/" class="text-2xl font-extrabold tracking-tighter flex items-center gap-2 group">
                <div class="w-8 h-8 bg-brand-accent rounded-sm rotate-45 group-hover:rotate-90 transition-transform duration-500"></div>
                <span class="text-white group-hover:text-brand-accent transition-colors">{% block brand %}ZKP{% endblock %}</span>
            </a>

            <div class="flex items-center gap-6 font-mono text-sm">
                {% if user.is_authenticated %}
                    <a href="{% url 'django_zkp_auth:logout' %}"
                       class="px-4 py-2 border border-brand-danger/50 text-brand-danger rounded hover:bg-brand-danger/10 transition-colors">
                        DISCONNECT
                    </a>
                {% else %}
                    <a href="{% url 'django_zkp_auth:login' %}"
                       class="text-brand-accent hover:text-white transition-colors relative group">
                        INITIALIZE_ZKP
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent group-hover:w-full transition-all"></span>
                    </a>
                    <a href="{% url 'django_zkp_auth:register' %}"
                       class="px-5 py-2 bg-white text-black font-bold rounded hover:bg-brand-accent hover:scale-105 transition-all">
                        REGISTER
                    </a>
                {% endif %}
            </div>
        </div>
    </nav>

    <main class="flex-grow max-w-7xl mx-auto w-full p-6 relative z-10">
        {% block content %}{% endblock %}
    </main>

    <footer class="border-t border-white/5 mt-12 py-8 text-center text-gray-600 font-mono text-xs">
        <p>SECURE PROTOCOL // POWERED BY ZERO KNOWLEDGE PROOFS</p>
    </footer>

    <script>
        gsap.from("nav",  { y: -100, duration: 1,   ease: "power4.out" });
        gsap.from("main", { opacity: 0, y: 20, duration: 0.8, delay: 0.3 });
    </script>

    {% block extra_scripts %}{% endblock %}
</body>
</html>
