<div class="top-bar">
    <div class="-intro-x breadcrumb mr-auto hidden sm:flex">
        <div class="mr-4">
            <div class="font-medium"><%= __('topbar.agent_balance') %></div>
            <div class="text-xs">
                <span id="agent_balance">0</span>
            </div>
        </div>
        <div class="mr-4">
            <div class="font-medium"><%= __('topbar.child_total_balance') %></div>
            <div class="text-xs">
                <span id="lower_balance">0</span>
            </div>
        </div>
        <div class="mr-4">
            <div class="font-medium"><%= __('topbar.agent_rtp') %></div>
            <div class="text-xs">
                <span id="agent-rtp"> <%= session.auth.rtp %>%</span>
                &nbsp;
                <span style="cursor: pointer; color: blue" onclick="changeRtp()">[<%= __('topbar.change') %>]</span>
            </div>
        </div>
    </div>

    <!-- <div class="intro-x dropdown mr-auto sm:mr-6">
        <div class="dropdown">
            <div class="dropdown-toggle notification--bullet cursor-pointer"><%= session.locale == 'en' ? 'English' : '한국어' %></div>
            <div class="dropdown-box w-40">
                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
                    <a
                        href="/api/agent/i18n/en"
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
                    >
                        English
                    </a>
                    <a
                        href="/api/agent/i18n/ko"
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
                    >
                        한국어
                    </a>
                </div>
            </div>
        </div>
    </div> -->

    <div class="intro-x dropdown mr-auto sm:mr-6">
        <div class="dropdown-toggle notification--bullet cursor-pointer" id="new-message-alarm">
            <i data-feather="bell" class="notification__icon dark:text-gray-300"></i>
        </div>
        <div class="notification-content pt-2 dropdown-box">
            <div class="notification-content__box dropdown-box__content box dark:bg-dark-6">
                <div class="notification-content__title"><%= __('topbar.message') %></div>
                <div id="new-message-content">
                    <span class="text-gray-600"><%= __('topbar.no_message') %></span>
                </div>
            </div>
        </div>
    </div>

    <div class="p-2 border-theme-40">
        <div class="font-medium"><%= session.auth.agentCode %></div>
    </div>

    <div class="intro-x dropdown w-8 h-8">
        <div class="dropdown-toggle w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in">
            <img class="rounded-full bg-theme-1" src="/assets/images/logo.svg" draggable="false" />
            <div class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"></div>
        </div>
        <div class="dropdown-box w-56">
            <div class="dropdown-box__content box bg-theme-38 dark:bg-dark-6 text-white">
                <div class="p-2">
                    <a
                        href="/app/profile"
                        class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
                    >
                        <i data-feather="user" class="w-4 h-4 mr-2"></i> <%= __('topbar.profile') %>
                    </a>
                </div>
                <div class="p-2 border-t border-theme-40 dark:border-dark-3">
                    <a
                        href="#"
                        id="logout-button"
                        class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
                        onclick="handleLogout()"
                    >
                        <i data-feather="power" class="w-4 h-4 mr-2"></i> <%= __('topbar.logout') %>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
