{% extends 'game/admin/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .er-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem 1.25rem;
            max-width: 720px;
        }
        .er-form .er-field-wide { grid-column: 1 / -1; }
        .er-form label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.3rem;
            color: #374151;
            font-size: 0.8rem;
        }
        .er-form input[type=text],
        .er-form input[type=number],
        .er-form input[type=url],
        .er-form input[type=tel],
        .er-form select,
        .er-form textarea {
            width: 100%;
            padding: 0.5rem 0.7rem;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 0.9rem;
            box-sizing: border-box;
        }
        .er-form .form-error,
        .er-form ul { color: #b91c1c; font-size: 0.8rem; margin: 0.25rem 0 0; padding-left: 1rem; }
        .er-btn {
            padding: 0.55rem 1.2rem;
            background: #3b82f6;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .er-btn--ghost { background: #f1f5f9; color: #475569; }
        .er-badge {
            display: inline-block;
            padding: 0.1rem 0.5rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .er-badge--published { background: #dcfce7; color: #166534; }
        .er-badge--pending   { background: #fef9c3; color: #854d0e; }
        .er-badge--rejected  { background: #fee2e2; color: #991b1b; }
        .er-badge--hidden    { background: #e2e8f0; color: #475569; }
        .er-actions form { display: inline; }
        .er-actions button,
        .er-actions a {
            background: none;
            border: none;
            padding: 0;
            margin-right: 0.6rem;
            font-size: 0.82rem;
            color: #3b82f6;
            cursor: pointer;
            text-decoration: none;
        }
        .er-actions button.er-danger { color: #ef4444; }
    </style>
{% endblock %}

{% block admin_sidebar %}
<nav class="admin-sidebar">
    <div class="admin-sidebar-title">Website Admin</div>

    <ul class="admin-nav-list">
        {% set current = app.request.attributes.get('_route') %}
        {% set navItems = [
            { route: 'website_admin_escaperooms',        label: 'Escape Rooms', icon: '📍' },
            { route: 'website_admin_escaperoom_reviews',  label: 'Reviews',      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_admin_dashboard') }}" style="color: #64748b; font-size: 0.8rem; text-decoration: none; display: block; margin-bottom: 0.4rem;">
            ← Game admin
        </a>
        <a href="{{ path('website_home') }}" style="color: #64748b; font-size: 0.8rem; text-decoration: none;">
            ← Back to site
        </a>
    </div>
</nav>
{% endblock %}