{% extends 'layout/site.html.twig' %}

{% block main %}
<div style="display: flex; min-height: calc(100vh - 60px);">

    {# ── Sidebar ──────────────────────────────────────────────────────── #}
    <nav style="
        width: 220px;
        flex-shrink: 0;
        background: #1e293b;
        color: #cbd5e1;
        display: flex;
        flex-direction: column;
        padding: 0;
    ">
        <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid #334155;">
            <span style="font-weight: 700; font-size: 1rem; color: #f1f5f9;">Game Admin</span>
        </div>

        <ul style="list-style: none; margin: 0; padding: 0.5rem 0; flex: 1;">
            {% set current = app.request.attributes.get('_route') %}

            {% set navItems = [
                { route: 'game_admin_dashboard', label: 'Dashboard',  icon: '▦' },
                { route: 'game_admin_users',     label: 'Users',      icon: '👤' },
                { route: 'game_admin_games',     label: 'Games',      icon: '🎮' },
                { route: 'game_admin_sessions',  label: 'Sessions',   icon: '▶' },
                { route: 'game_admin_email_log', label: 'Email Log',  icon: '✉' },
            ] %}

            {% for item in navItems %}
                {% set isActive = current starts with item.route %}
                <li>
                    <a href="{{ path(item.route) }}" style="
                        display: flex;
                        align-items: center;
                        gap: 0.6rem;
                        padding: 0.6rem 1.5rem;
                        color: {{ isActive ? '#f1f5f9' : '#94a3b8' }};
                        background: {{ isActive ? '#334155' : 'transparent' }};
                        text-decoration: none;
                        font-size: 0.9rem;
                        border-left: 3px solid {{ isActive ? '#3b82f6' : 'transparent' }};
                    ">
                        <span>{{ item.icon }}</span>
                        {{ item.label }}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <div style="padding: 1rem 1.5rem; border-top: 1px solid #334155;">
            <a href="{{ path('game_dashboard') }}" style="color: #64748b; font-size: 0.8rem; text-decoration: none;">
                ← Back to game
            </a>
        </div>
    </nav>

    {# ── Content ──────────────────────────────────────────────────────── #}
    <main style="flex: 1; background: #f8fafc; padding: 2rem; overflow-x: auto;">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div style="
                    padding: 0.75rem 1rem;
                    margin-bottom: 1rem;
                    border-radius: 6px;
                    background: {{ label == 'success' ? '#dcfce7' : (label == 'danger' ? '#fee2e2' : '#fef9c3') }};
                    color: {{ label == 'success' ? '#166534' : (label == 'danger' ? '#991b1b' : '#854d0e') }};
                    border: 1px solid {{ label == 'success' ? '#86efac' : (label == 'danger' ? '#fca5a5' : '#fde047') }};
                ">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        {% block admin_body %}{% endblock %}
    </main>

</div>
{% endblock %}