{% 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') or is_granted('ROLE_AUDITOR') %}
            <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_loaders'
                or app.request.attributes.get('_route') starts with 'app_wfbo_expense'
                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>

                {% if is_granted('ROLE_AUDITOR') %}
                <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>
                    Report
                </a>
                {% endif %}

                {% if is_granted('ROLE_AUDITOR') %}
                <a href="{{ path('app_wfbo_expenses') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_expense' %}is-active{% endif %}"
                   data-testid="wfbo-nav-expenses">
                    <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/>
                    </svg>
                    Expenses
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_loaders') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_loaders' %}is-active{% endif %}"
                   data-testid="wfbo-nav-loaders">
                    <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="M20 7h-9M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/>
                    </svg>
                    Loaders
                </a>
                {% endif %}

                <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'
                or app.request.attributes.get('_route') starts with 'app_wfbo_lr_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>

                <a href="{{ path('app_wfbo_lr_banners') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_lr_banner' %}is-active{% endif %}"
                   data-testid="wfbo-nav-lr-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="2" y="4" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M4 15l4-5 4 3 4-6 4 5"/>
                    </svg>
                    Live Racing Banners
                </a>

                <a href="{{ path('app_wfbo_announcements') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_announcement' %}is-active{% endif %}"
                   data-testid="wfbo-nav-announcements">
                    <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="M3 11l18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>
                    </svg>
                    Announcements
                </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 %}

            {# ── Campaigns collapsible group (super admins only) ── #}
            {% if is_granted('ROLE_SUPER_ADMIN') %}
            {% set inCampaignsGroup = app.request.attributes.get('_route') == 'app_wfbo_campaigns_report'
                or app.request.attributes.get('_route') starts with 'app_wfbo_deposit_campaign'
                or app.request.attributes.get('_route') starts with 'app_wfbo_cashback_campaign'
                or app.request.attributes.get('_route') starts with 'app_wfbo_bonus' %}
            <button class="wfbo-sidebar__nav-section-toggle {% if inCampaignsGroup %}is-active{% endif %} {% if not inCampaignsGroup %}is-collapsed{% endif %}"
                    data-target="campaigns-group-body"
                    aria-expanded="{{ inCampaignsGroup ? 'true' : 'false' }}"
                    aria-controls="campaigns-group-body"
                    type="button"
                    data-testid="wfbo-nav-campaigns-group">
                <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="M3 11l18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>
                </svg>
                Campaigns
                <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="campaigns-group-body"
                 class="wfbo-sidebar__nav-section-body {% if not inCampaignsGroup %}is-collapsed{% endif %}">

                <a href="{{ path('app_wfbo_campaigns_report') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') == 'app_wfbo_campaigns_report' %}is-active{% endif %}"
                   data-testid="wfbo-nav-campaigns-report">
                    <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>
                    Overview
                </a>

                <a href="{{ path('app_wfbo_deposit_campaigns') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_deposit_campaign' %}is-active{% endif %}"
                   data-testid="wfbo-nav-deposit-campaigns">
                    <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="9"/><path d="M12 7v10"/><path d="M15 9.5c0-1.4-1.3-2.5-3-2.5s-3 1-3 2.3c0 3.2 6 1.8 6 5 0 1.4-1.3 2.7-3 2.7s-3-1.1-3-2.5"/>
                    </svg>
                    Deposit Campaigns
                </a>

                <a href="{{ path('app_wfbo_cashback_campaigns') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_cashback_campaign' %}is-active{% endif %}"
                   data-testid="wfbo-nav-cashback-campaigns">
                    <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="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                    </svg>
                    Cashback Campaigns
                </a>

                <a href="{{ path('app_wfbo_bonuses') }}"
                   class="wfbo-nav-item {% if app.request.attributes.get('_route') starts with 'app_wfbo_bonus' %}is-active{% endif %}"
                   data-testid="wfbo-nav-bonuses">
                    <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="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/>
                        <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
                    </svg>
                    Bonuses
                </a>

            </div>{# /campaigns-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') in ['app_wfbo_games_report', 'app_wfbo_games_leaderboard', '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', 'app_wfbo_spin_win_settings', 'app_wfbo_spin_win_results', 'app_wfbo_pusoy_settings', 'app_wfbo_pusoy_results', 'app_wfbo_pusoy_hand'] %}
            {% 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_ADMIN') %}
                <a href="{{ path('app_wfbo_games_report') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') == 'app_wfbo_games_report' %}is-active{% endif %}"
                   data-testid="wfbo-nav-games-report">
                    Report
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_games_leaderboard') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') == 'app_wfbo_games_leaderboard' %}is-active{% endif %}"
                   data-testid="wfbo-nav-games-leaderboard">
                    Leaderboard
                </a>
                {% 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>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_spin_win') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_spin_win' or app.request.attributes.get('_route') in ['app_wfbo_spin_win_settings', 'app_wfbo_spin_win_results'] %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-sw">
                    Spin &amp; Win
                </a>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_wfbo_game_hub_pusoy') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_game_hub_pusoy' or app.request.attributes.get('_route') in ['app_wfbo_pusoy_settings', 'app_wfbo_pusoy_results', 'app_wfbo_pusoy_hand'] %}is-active{% endif %}"
                   data-testid="wfbo-nav-game-hub-pd">
                    Pusoy Dos
                </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_leaderboard') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_leaderboard' %}is-active{% endif %}"
                   data-testid="wfbo-nav-live-racing-leaderboard">
                    Leaderboard
                </a>

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

                <a href="{{ path('app_wfbo_live_racing_ad_banners') }}"
                   class="wfbo-nav-item--sub {% if app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_ad_banner' %}is-active{% endif %}"
                   data-testid="wfbo-nav-live-racing-ad-banners">
                    Ad Banners
                </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') and not (app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_ad_banner') and not (app.request.attributes.get('_route') starts with 'app_wfbo_live_racing_leaderboard') and app.request.attributes.get('_route') != 'app_wfbo_live_racing_report' %}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 %}