{% extends layout | default('lila/base.html') %}
{% block title %}{{title}}{% endblock %}

{% block content %}
<div
    class="min-h-screen bg-bg-body dark:bg-bg-body-dark text-slate-800 dark:text-slate-200 transition-colors duration-300 font-sans flex flex-col">
    <!-- Header -->
    <header
        class="bg-surface dark:bg-surface-dark border-b border-slate-200 dark:border-slate-800 shadow-sm py-4 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
            <h3>
                <a href="/dashboard"
                    class="text-2xl font-black bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Lila</a>
            </h3>
            <div class="flex items-center gap-2">
                <span
                    class="text-sm font-semibold px-3 py-1 bg-primary/10 text-primary rounded-full">{{user.name}}</span>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <div class="max-w-7xl w-full mx-auto px-4 py-8 flex-1 grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- Sidebar Menu -->
        <aside class="md:col-span-1 flex flex-col gap-2">
            <div class="card p-4 space-y-1">
                <h4 class="text-xs font-black uppercase text-slate-400 px-3 mb-2 tracking-wider">Menu</h4>

                <a href="/dashboard"
                    class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-bold bg-primary text-white shadow-material transition-all">
                    <span>🏠</span> {{translate['home']}}
                </a>
                <a href="/profile"
                    class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-primary transition-all">
                    <span>👤</span> {{user.name}}
                </a>
                <a href="?lang=es"
                    class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 transition-all">
                    <span>🇪🇸</span> Español (Esp)
                </a>
                <a href="?lang=en"
                    class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 transition-all">
                    <span>🇺🇸</span> English (US)
                </a>

                <hr class="border-slate-200 dark:border-slate-800 my-2" />

                <a href="/logout" class="flex btn-secondary transition-all">
                    {{translate['logout']}}
                </a>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="md:col-span-3 flex flex-col gap-6">
            <article class="card p-8">
                <h3 class="text-3xl font-black text-slate-800 dark:text-slate-100 tracking-tight mb-4">
                    {{translate['Welcome']}}, {{user.name}}!
                </h3>

            </article>
        </main>
    </div>
</div>
{% endblock %}