{# resources/views/partials/admin_topbar.twig #}
<header class="bg-white shadow-sm sticky top-0 z-30">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <h1 class="text-xl md:text-2xl font-semibold text-gray-700">
                {{ page_title_header | default(__('sidebar.dashboard')) }}
            </h1>
            
            <div class="flex items-center space-x-3 md:space-x-4">
                {% include 'partials/language_switcher.twig' %}
                
                <div class="relative">
                    <button id="userMenuButton" class="flex items-center focus:outline-none p-1 rounded-full hover:bg-gray-100">
                        <span class="hidden md:inline text-sm mr-2 text-gray-700">{{ session.user_name | default(__('text.user')) }}</span>
                        <div class="w-8 h-8 rounded-full bg-slate-300 flex items-center justify-center text-slate-700 font-semibold ring-2 ring-slate-200 hover:ring-blue-500 transition-all">
                             {{ session.user_name | first | upper }}
                        </div>
                    </button>
                    <div id="userMenuDropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50" role="menu">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">{{ __('user_menu.my_profile') }}</a>
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('admin.settings.general.form') : '#' }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">{{ __('sidebar.settings_general') }}</a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('auth.logout') : '#' }}" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700" role="menuitem">
                            {{ __('sidebar.logout') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<script>
    // JS para o dropdown do menu do usuário
    document.addEventListener('DOMContentLoaded', function() {
        const userMenuButton = document.getElementById('userMenuButton');
        const userMenuDropdown = document.getElementById('userMenuDropdown');
        if (userMenuButton && userMenuDropdown) {
            userMenuButton.addEventListener('click', (event) => {
                event.stopPropagation();
                userMenuDropdown.classList.toggle('hidden');
            });
            document.addEventListener('click', (event) => {
                // Fechar se clicar fora tanto do botão quanto do menu
                if (userMenuDropdown && !userMenuDropdown.contains(event.target) && !userMenuButton.contains(event.target)) {
                    userMenuDropdown.classList.add('hidden');
                }
            });
        }
    });
</script>