{% extends 'base.html.twig' %}

{% block title %}{{ block('wfbo_title') }}{% endblock %}

{% block navbar %}{% endblock %}

{% block body %}
<div class="wfbo-layout" data-layout="wfbo" data-turbo="false"
     {% if is_granted('ROLE_FINANCE') %}
     data-controller="wfbo-pending"
     data-wfbo-pending-url-value="{{ path('app_wfbo_pending_status') }}"
     {% endif %}>

    {# ── Sidebar ── #}
    <aside class="wfbo-sidebar"
           data-testid="wfbo-sidebar">

        {# Brand row — always visible, holds hamburger on mobile #}
        <div class="wfbo-sidebar__brand-row">
            <a href="{{ path('app_wfbo_dashboard') }}"
               class="wfbo-sidebar__brand-link"
               data-testid="wfbo-sidebar-brand">
                <span class="wfbo-sidebar__brand-subtitle">
                    Admin Panel
                </span>
                <span class="wfbo-sidebar__brand-title">
                    WFBO
                </span>
            </a>
            {# Hamburger — only visible on mobile #}
            <button id="wfbo-hamburger"
                    class="wfbo-sidebar__hamburger d-flex d-md-none"
                    aria-label="Toggle navigation">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="3" y1="6"  x2="21" y2="6"/>
                    <line x1="3" y1="12" x2="21" y2="12"/>
                    <line x1="3" y1="18" x2="21" y2="18"/>
                </svg>
            </button>
        </div>

        {# Nav items #}
        <nav class="wfbo-sidebar__nav" data-testid="wfbo-sidebar-nav">
            <p class="wfbo-sidebar__nav-section-label">
                Menu
            </p>

            <a href="{{ path('app_wfbo_dashboard') }}"
               class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_dashboard' %}is-active{% endif %}"
               data-testid="wfbo-nav-dashboard">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
                </svg>
                Dashboard
            </a>

            {% if is_granted('ROLE_OPERATIONS') or is_granted('ROLE_FINANCE') %}
            <a href="{{ path('app_wfbo_users') }}"
               class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_user' %}is-active{% endif %}"
               data-testid="wfbo-nav-users">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
                Users
            </a>
            {% endif %}

            {% if is_granted('ROLE_FINANCE') %}
            <a href="{{ path('app_wfbo_leaderboard') }}"
               class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_leaderboard' %}is-active{% endif %}"
               data-testid="wfbo-nav-leaderboard">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                    <polyline points="2 20 22 20"/>
                </svg>
                Leaderboard
            </a>
            {% endif %}

            {% if is_granted('ROLE_ADMIN') %}
            <a href="{{ path('app_wfbo_master_agents') }}"
               class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_master_agent' %}is-active{% endif %}"
               data-testid="wfbo-nav-master-agents">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
                Agents
            </a>
            {% endif %}

            {% if is_granted('ROLE_FINANCE') %}
            <a href="{{ path('app_wfbo_recent_bets') }}"
               class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_recent_bets' %}is-active{% endif %}"
               data-testid="wfbo-nav-recent-bets">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                </svg>
                Recent Bets
            </a>
            {% endif %}

            {# ── Finance collapsible group ── #}
            {% if is_granted('ROLE_FINANCE') %}
            {% set inFinanceGroup = app.request.attributes.get('_route') starts with 'app_wfbo_deposit'
                or app.request.attributes.get('_route') starts with 'app_wfbo_withdrawal'
                or app.request.attributes.get('_route') starts with 'app_wfbo_cashflow'
                or app.request.attributes.get('_route') starts with 'app_wfbo_payment_detail' %}
            <button class="wfbo-sidebar__nav-section-toggle {% if inFinanceGroup %}is-active{% endif %} {% if not inFinanceGroup %}is-collapsed{% endif %}"
                    data-target="finance-group-body"
                    aria-expanded="{{ inFinanceGroup ? 'true' : 'false' }}"
                    aria-controls="finance-group-body"
                    type="button">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                </svg>
                Finance
                <span data-wfbo-pending-target="financeBadge"
                      style="display:none; margin-left:auto; background:#ef4444; color:#fff; border-radius:9999px; font-size:10px; font-weight:700; min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 4px;"></span>
                <svg class="wfbo-sidebar__nav-section-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>
            <div id="finance-group-body"
                 class="wfbo-sidebar__nav-section-body {% if not inFinanceGroup %}is-collapsed{% endif %}">

                <a href="{{ path('app_wfbo_deposits') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_deposit' %}is-active{% endif %}"
                   data-testid="wfbo-nav-deposits">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>
                    </svg>
                    Deposits
                    <span data-wfbo-pending-target="depositBadge"
                          style="display:none; margin-left:auto; background:#ef4444; color:#fff; border-radius:9999px; font-size:10px; font-weight:700; min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 4px;"></span>
                </a>

                <a href="{{ path('app_wfbo_withdrawals') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_withdrawal' %}is-active{% endif %}"
                   data-testid="wfbo-nav-withdrawals">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
                    </svg>
                    Withdrawals
                    <span data-wfbo-pending-target="withdrawalBadge"
                          style="display:none; margin-left:auto; background:#ef4444; color:#fff; border-radius:9999px; font-size:10px; font-weight:700; min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 4px;"></span>
                </a>

                <a href="{{ path('app_wfbo_cashflow') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_cashflow' %}is-active{% endif %}"
                   data-testid="wfbo-nav-cashflow">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                    Cash Flow
                </a>

                <a href="{{ path('app_wfbo_payment_details') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_payment_detail' %}is-active{% endif %}"
                   data-testid="wfbo-nav-payment-details">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/>
                    </svg>
                    Payment Details
                </a>

            </div>{# /finance-group-body #}
            {% endif %}

            {# ── Administration collapsible group ── #}
            {% if is_granted('ROLE_ADMIN') %}
            {% set inAdminGroup = app.request.attributes.get('_route') == 'app_wfbo_settings'
                or app.request.attributes.get('_route') == 'app_wfbo_settings_audit_trail'
                or app.request.attributes.get('_route') == 'app_wfbo_advanced_settings'
                or app.request.attributes.get('_route') starts with 'app_wfbo_site_banner' %}
            <button class="wfbo-sidebar__nav-section-toggle {% if inAdminGroup %}is-active{% endif %} {% if not inAdminGroup %}is-collapsed{% endif %}"
                    data-target="admin-group-body"
                    aria-expanded="{{ inAdminGroup ? 'true' : 'false' }}"
                    aria-controls="admin-group-body"
                    type="button">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
                Administration
                <svg class="wfbo-sidebar__nav-section-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>
            <div id="admin-group-body"
                 class="wfbo-sidebar__nav-section-body {% if not inAdminGroup %}is-collapsed{% endif %}">

                <a href="{{ path('app_wfbo_settings') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_settings' %}is-active{% endif %}"
                   data-testid="wfbo-nav-settings">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                    </svg>
                    General Settings
                </a>

                <a href="{{ path('app_wfbo_settings_audit_trail') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_settings_audit_trail' %}is-active{% endif %}"
                   data-testid="wfbo-nav-settings-audit-trail">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 8v4l3 3"/><circle cx="12" cy="12" r="10"/>
                    </svg>
                    Settings Audit Trail
                </a>

                <a href="{{ path('app_wfbo_site_banners') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_site_banner' %}is-active{% endif %}"
                   data-testid="wfbo-nav-site-banners">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
                    </svg>
                    Site Banners
                </a>

                {% if is_granted('ROLE_SUPER_ADMIN') %}
                <a href="{{ path('app_wfbo_advanced_settings') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_advanced_settings' %}is-active{% endif %}"
                   data-testid="wfbo-nav-advanced-settings">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                    </svg>
                    Advanced Settings
                </a>
                {% endif %}

            </div>{# /admin-group-body #}
            {% endif %}

            {# ── Games collapsible group ── #}
            {% set inGamesGroup = app.request.attributes.get('_route') starts with 'app_wfbo_game_hub'
                or app.request.attributes.get('_route') starts with 'app_wfbo_race_dividends'
                or app.request.attributes.get('_route') starts with 'app_wfbo_dividend_override'
                or app.request.attributes.get('_route') starts with 'app_wfbo_race_result'
                or app.request.attributes.get('_route') starts with 'app_wfbo_ezdos'
                or app.request.attributes.get('_route') starts with 'app_wfbo_h2h_'
                or app.request.attributes.get('_route') in ['app_wfbo_vk_settings', 'app_wfbo_pataasan_results', 'app_wfbo_pataasan_settings', 'app_wfbo_pataasan_rank_payouts', 'app_wfbo_color_game_settings', 'app_wfbo_color_game_results', 'app_wfbo_mines_settings', 'app_wfbo_fruit_king_settings', 'app_wfbo_fruit_king_results', 'app_wfbo_pachinko_settings', 'app_wfbo_pachinko_results'] %}
            {% if is_granted('ROLE_OPERATIONS') or is_granted('ROLE_FINANCE') or is_granted('ROLE_ADMIN') %}
            <button class="wfbo-sidebar__nav-section-toggle {% if inGamesGroup %}is-active{% endif %} {% if not inGamesGroup %}is-collapsed{% endif %}"
                    data-target="games-group-body"
                    aria-expanded="{{ inGamesGroup ? 'true' : 'false' }}"
                    aria-controls="games-group-body"
                    type="button">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                </svg>
                Games
                <svg class="wfbo-sidebar__nav-section-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>
            <div id="games-group-body"
                 class="wfbo-sidebar__nav-section-body {% if not inGamesGroup %}is-collapsed{% endif %}">

                {% if is_granted('ROLE_OPERATIONS') or is_granted('ROLE_FINANCE') or is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_vk') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_vk' or app.request.attributes.get('_route') starts with 'app_wfbo_race_dividends' or app.request.attributes.get('_route') starts with 'app_wfbo_dividend_override' or app.request.attributes.get('_route') starts with 'app_wfbo_race_result' or app.request.attributes.get('_route') == 'app_wfbo_vk_settings' %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-vk">
                    Video Karera
                </a>
                {% endif %}

                {% if is_granted('ROLE_FINANCE') or is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_pataasan') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_pataasan' or app.request.attributes.get('_route') in ['app_wfbo_pataasan_results', 'app_wfbo_pataasan_settings', 'app_wfbo_pataasan_rank_payouts'] %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-pataasan">
                    Pataasan
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_color_game') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_color_game' or app.request.attributes.get('_route') in ['app_wfbo_color_game_settings', 'app_wfbo_color_game_results'] %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-cg">
                    Color Game
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_mines') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_mines' or app.request.attributes.get('_route') == 'app_wfbo_mines_settings' %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-mg">
                    Mines
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_fruit_king') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_fruit_king' or app.request.attributes.get('_route') in ['app_wfbo_fruit_king_settings', 'app_wfbo_fruit_king_results'] %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-fk">
                    Fruit King
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_pachinko') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_pachinko' or app.request.attributes.get('_route') in ['app_wfbo_pachinko_settings', 'app_wfbo_pachinko_results'] %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-pk">
                    Pachinko
                </a>

                <a href="{{ path('app_wfbo_game_hub_head2head') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_head2head' or app.request.attributes.get('_route') starts with 'app_wfbo_h2h_' %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-h2h">
                    Head2Head Karera
                </a>

                <a href="{{ path('app_wfbo_game_hub_ezdos') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_ezdos' or app.request.attributes.get('_route') starts with 'app_wfbo_ezdos' %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-ez">
                    EZDOS
                </a>
                {% endif %}

            </div>{# /games-group-body #}
            {% endif %}

            {# ── Live Racing collapsible group ── #}
            {% if is_granted('ROLE_ADMIN') %}
            {% set inLiveRacingGroup = app.request.attributes.get('_route') starts with 'app_wfbo_management'
                or app.request.attributes.get('_route') starts with 'app_wfbo_event'
                or app.request.attributes.get('_route') starts with 'app_wfbo_live_racing' %}
            <button class="wfbo-sidebar__nav-section-toggle {% if inLiveRacingGroup %}is-active{% endif %} {% if not inLiveRacingGroup %}is-collapsed{% endif %}"
                    data-target="live-racing-group-body"
                    aria-expanded="{{ inLiveRacingGroup ? 'true' : 'false' }}"
                    aria-controls="live-racing-group-body"
                    type="button">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 19h16"/><path d="M4 15l4-6 4 2 4-7 4 5"/>
                </svg>
                Live Racing
                <svg class="wfbo-sidebar__nav-section-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>
            <div id="live-racing-group-body"
                 class="wfbo-sidebar__nav-section-body {% if not inLiveRacingGroup %}is-collapsed{% endif %}">

                <a href="{{ path('app_wfbo_managements') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_management' %}is-active{% endif %}"
                   data-testid="wfbo-nav-managements">
                    Arena Management
                </a>

                <a href="{{ path('app_wfbo_events') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_event' %}is-active{% endif %}"
                   data-testid="wfbo-nav-events">
                    Event Management
                </a>

                <a href="{{ path('app_wfbo_live_racing_bets') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_bets' %}is-active{% endif %}"
                   data-testid="wfbo-nav-live-racing-bets">
                    Bets
                </a>

                <a href="{{ path('app_wfbo_live_racing_settlements') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_settlements' %}is-active{% endif %}"
                   data-testid="wfbo-nav-live-racing-settlements">
                    Settlements
                </a>

                <a href="{{ path('app_wfbo_live_racing_settings') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_live_racing' and not (app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_bets') %}is-active{% endif %}"
                   data-testid="wfbo-nav-live-racing-settings">
                    Live Racing Settings
                </a>

            </div>{# /live-racing-group-body #}
            {% endif %}

            <a href="{{ path('app_home') }}"
               class="wfbo-nav-item"
               data-testid="wfbo-nav-baclto-site">

                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                </svg>
                Back to site
            </a>

            <a href="{{ path('app_logout') }}"
               class="wfbo-nav-item"
               data-testid="wfbo-nav-logout">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                    <polyline points="16 17 21 12 16 7"/>
                    <line x1="21" y1="12" x2="9" y2="12"/>
                </svg>
                Sign Out
            </a>
        </nav>

    </aside>

    {# ── Main content ── #}
    <main class="wfbo-main" data-testid="wfbo-main">

        {# Top bar #}
        <div class="wfbo-main__topbar">
            <h1 class="wfbo-main__page-title" data-testid="wfbo-page-title">
                {% block wfbo_title %}Dashboard{% endblock %}
            </h1>
        </div>

        {# Page content #}
        <div class="wfbo-main__content">
            {% block wfbo_content %}{% endblock %}
        </div>

    </main>

</div>

<script>
(function () {
    var btn = document.getElementById('wfbo-hamburger');
    var sidebar = document.querySelector('[data-testid="wfbo-sidebar"]');
    if (btn && sidebar) {
        btn.addEventListener('click', function () {
            sidebar.classList.toggle('is-open');
        });
    }

    document.querySelectorAll('.wfbo-sidebar__nav-section-toggle').forEach(function (toggle) {
        toggle.addEventListener('click', function () {
            var body = document.getElementById(toggle.getAttribute('data-target'));
            var collapsed = toggle.classList.toggle('is-collapsed');
            body.classList.toggle('is-collapsed', collapsed);
            toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
        });
    });
})();
</script>
{% endblock %}