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

{% block stylesheets %}
    {{ parent() }}
    <style>
        .admin-shell {
            display: flex;
            min-height: calc(100vh - 60px);
        }
        .admin-sidebar {
            width: 220px;
            flex-shrink: 0;
            background: #1e293b;
            color: #cbd5e1;
            display: flex;
            flex-direction: column;
        }
        .admin-sidebar-title {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #334155;
            font-weight: 700;
            font-size: 1rem;
            color: #f1f5f9;
        }
        .admin-nav-list {
            list-style: none;
            margin: 0;
            padding: 0.5rem 0;
            flex: 1;
        }
        .admin-nav-link {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.6rem 1.5rem;
            text-decoration: none;
            font-size: 0.9rem;
        }
        .admin-sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid #334155;
        }
        .admin-main {
            flex: 1;
            min-width: 0;
            background: #f8fafc;
            padding: 2rem;
            overflow-x: auto;
        }

        @media (max-width: 767.98px) {
            .admin-shell {
                flex-direction: column;
                min-height: auto;
            }
            .admin-sidebar {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .admin-sidebar-title {
                border-bottom: none;
                padding: 0.75rem 1rem 0.25rem;
            }
            .admin-nav-list {
                display: flex;
                flex: 0 0 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 0.25rem 0.5rem 0.75rem;
                gap: 0.25rem;
            }
            .admin-nav-link {
                flex-shrink: 0;
                white-space: nowrap;
                padding: 0.5rem 0.9rem;
                border-radius: 6px;
            }
            .admin-sidebar-footer {
                display: none;
            }
            .admin-main {
                padding: 1rem;
            }
        }
    </style>
{% endblock %}

{% block main %}
<div class="admin-shell">

    {# ── Sidebar ──────────────────────────────────────────────────────── #}
    <nav class="admin-sidebar">
        <div class="admin-sidebar-title">Game Admin</div>

        <ul class="admin-nav-list">
            {% 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) }}" class="admin-nav-link" style="
                        color: {{ isActive ? '#f1f5f9' : '#94a3b8' }};
                        background: {{ isActive ? '#334155' : 'transparent' }};
                        border-left: 3px solid {{ isActive ? '#3b82f6' : 'transparent' }};
                    ">
                        <span>{{ item.icon }}</span>
                        {{ item.label }}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <div class="admin-sidebar-footer">
            <a href="{{ path('game_dashboard') }}" style="color: #64748b; font-size: 0.8rem; text-decoration: none;">
                ← Back to game
            </a>
        </div>
    </nav>

    {# ── Content ──────────────────────────────────────────────────────── #}
    <main class="admin-main">
        {% 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 %}