{% set sidebarStyle =  app.request.cookies.get('sidebarStyle') %}

<style>
     .tooltip-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip-text {
        visibility: hidden;
        background-color: white;
        color: #000000;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the copy button */
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 12px;
    }

    .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

     .sidebar-content .tooltip-text {
         left: -48px;
     }

    #copyButton:focus + .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-item-header #linkText {
        display: none !important; /* Hide the link text */
    }

    .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-item-header .tooltip-container {
        justify-content: center; /* Center the copy button */
    }

</style>
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg {% if sidebarStyle != null  %} sidebar-main-resized {% endif %}">
    <!-- Sidebar content -->
    <div class="sidebar-content">
        <!-- Sidebar header -->
        <div class="sidebar-section">
            <div class="sidebar-section-body">
                {% if app.user %}
                    <div class="media d-flex justify-content-between">
                        <img src="{{ asset(app.user.image | default(asset('/assets/icons/user.png'))) }}" class="w-32px h-32px rounded-pill" alt="">&nbsp;&nbsp;&nbsp;&nbsp;
                        <h5 class="sidebar-resize-hide flex-grow-1 my-auto text-nowrap text-center">{{ app.user.firstName }} {{ app.user.lastName }}</h5>
                    <div>
                {% endif %}
                    <button type="button" class="btn btn-flat-white btn-icon btn-sm rounded-pill border-transparent sidebar-control sidebar-main-resize d-none d-lg-inline-flex">
                        <i class="ph-arrows-left-right"></i>
                    </button>
                    <button type="button" class="btn btn-flat-white btn-icon btn-sm rounded-pill border-transparent sidebar-mobile-main-toggle d-lg-none">
                        <i class="ph-x"></i>
                    </button>
                </div>
                </div>
            </div>
        </div>
       
        <div class="sidebar-section text-nowrap">
            <ul class="nav nav-sidebar" data-nav-type="accordion">

                {# ref link and coppy button #}
                {% if is_granted('ROLE_AFFILIATE') %}
                    <div class="nav-item-header pt-0 d-block w-100">
                        <span id="linkText">{{ app.request.server.get('REF_LINK_URL') ~ "/ref/" ~ app.user.refcode }}</span>
                        <span class="tooltip-container my-auto">
                            <i onclick="copyLink('tooltip2')" id="copyButton" class="fas fa-copy"></i> <!-- Font Awesome icon for copy -->
                            <span class="tooltip-text" id="tooltip2">Copy to clipboard</span>
                        </span>
                    </div>

                {% endif %}

                <!-- Main -->
                <li class="nav-item-header pt-0 d-block w-100">
                    <div class="text-uppercase fs-sm lh-sm opacity-50 sidebar-resize-hide">Main</div>
                    <i class="ph-dots-three sidebar-resize-show"></i>
                </li>

                <li class="nav-item">
                    <a href="{{path('app_front_account')}}" class="nav-link {% if active is defined and active=='app_admin_dashboard' %}active{% endif %}">
                        <i class="ph-house"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                {% if is_granted('ROLE_AFFILIATE') %}
                    <li class="nav-item nav-item-submenu {% if active is defined and active == 'app_front_team' or active == 'app_front_my_customers' or active == 'app_front_my_commission' %} nav-item-open {% endif %}">
                        <a href="#" class="nav-link">
                        <i class="ph ph-tree-structure"></i>
                            <span>Network</span>
                        </a>
                        <ul class="nav-group-sub {% if active is defined and  active == 'app_front_team' or active == 'app_front_rank' or active == 'app_front_my_customers' or active == 'app_front_my_commission'  or active == 'app_front_my_rank' %} show {% else %} collapse {% endif %}" data-submenu-title="Themes" >
                            <li class="nav-item"><a href="{{path('app_front_team')}}" class="nav-link {% if active is defined and active == 'app_front_team' %} active {% endif %}"><i class="ph ph-users-four"></i>My Team</a></li>
                            <li class="nav-item"><a href="{{ path('app_front_rank') }}" class="nav-link {% if active is defined and active == 'app_front_rank'%} active {% endif %}"><i class="ph ph-medal"></i>My Rank</a></li>
                            <li class="nav-item"><a href="{{path('app_front_my_commission')}}" class="nav-link {% if active is defined and active == 'app_front_my_commission' %} active {% endif %}"><i class="ph ph-coins"></i>My Commission</a></li>
                            <li class="nav-item"><a href="{{path('app_front_my_customers')}}" class="nav-link {% if active is defined and active == 'app_front_my_customers' %} active {% endif %}"><i class="ph ph-users"></i>My Customers</a></li>
                        </ul>
                    </li>
                {% endif %}
                <li class="nav-item">
                    <a href="{{path('app_front_my_orders')}}" class="nav-link {% if active is defined and active == 'app_front_my_orders' %} active {% endif %}">
                        <i class="ph ph-bag"></i>
                        <span>My Orders</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{path('app_front_my_payment')}}" class="nav-link {% if active is defined and active == 'app_front_my_payment' %} active {% endif %}">
                        <i class="ph ph-currency-eur"></i>
                        <span>My Payments</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{path('app_front_my_subscription')}}" class="nav-link {% if active is defined and active == 'app_front_my_subscription'%} active {% endif %}">
                        <i class="ph ph-repeat"></i>
                        <span>My Subscriptions</span>
                    </a>
                </li>
                {% if is_granted('ROLE_AFFILIATE') %}
                    <li class="nav-item">
                        <a href="{{path('app_front_wallet')}}" class="nav-link {% if active is defined and active == 'app_front_wallet' %} active {% endif %}">
                            <i class="ph ph-wallet"></i>
                            <span>My Wallet</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ path('app_front_payout') }}" class="nav-link {% if active is defined and active == 'app_front_payout'%} active {% endif %}">
                            <i class="ph ph-swap"></i>
                            <span>My Payouts</span>
                        </a>
                    </li>
                {% endif %}
                {# <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="ph ph-credit-card"></i>
                        <span>Payment Method</span>
                    </a>
                </li> #}
                 {# Admin Support Ticket #}
                <li class="nav-item nav-item-submenu {% if active is defined and active == 'app_front_tickets'%} nav-item-open {% endif %}">
                    <a href="#" class="nav-link">
                    <i class="ph ph-bell"></i>
                        <span>Support Tickets</span>
                    </a>
                    <ul class="nav-group-sub {% if active is defined and  active == 'app_front_tickets'  %} show {% else %} collapse {% endif %}" data-submenu-title="Themes" >
                        <li class="nav-item"><a href="{{path('app_front_tickets')}}" class="nav-link {% if active is defined and active == 'app_front_tickets' %} active {% endif %}"><i class="ph ph-ticket"></i>Tickets</a></li>
                    </ul>
                </li>
                {# End Support Ticket #}
                
                {# Affiliate Feedback System #}
                <li class="nav-item nav-item-submenu {% if active is defined and active == 'app_front_give_feedback' or active == 'app_front_my_feedback' or active == 'app_front_team_feedback'%} nav-item-open {% endif %}">
                    <a href="#" class="nav-link">
                    <i class="ph ph-chat-circle-text"></i>
                        <span>Feedback System</span>
                    </a>
                    <ul class="nav-group-sub {% if active is defined and active == 'app_front_give_feedback' or active == 'app_front_my_feedback' or active == 'app_front_team_feedback'%} show {% else %} collapse {% endif %}" data-submenu-title="Themes" >
                        <li class="nav-item"><a href="{{path('app_front_give_feedback')}}" class="nav-link {% if active is defined and active == 'app_front_give_feedback' %} active {% endif %}"><i class="ph ph-pencil-line"></i>Give Feedback</a></li>
                        {% if is_granted('ROLE_AFFILIATE') %}
                            <li class="nav-item"><a href="{{path('app_front_my_feedback')}}" class="nav-link {% if active is defined and active == 'app_front_my_feedback' %} active {% endif %}"><i class="ph ph-list-checks"></i>My Feedback</a></li>
                            <li class="nav-item"><a href="{{path('app_front_team_feedback')}}" class="nav-link {% if active is defined and active == 'app_front_team_feedback' %} active {% endif %}"><i class="ph ph-user-list"></i>Team Feedback</a></li>
                        {% endif %}
                    </ul>
                </li>
                {# End Affiliate Feedback System #}
            </ul>
        </div>
    </div>
</div>