{% load static %}
<header class="gn-main-header">
    {% include './brand_navbar.html' %}
</header>
<div class="gn-main-header-placeholder"></div>
{% if show_hero %}
    {% include './hero.html' %}
{% endif %}

<script>
    (function () {
        const mainHeader = document.querySelector('.gn-main-header');
        const mainHeaderPlaceholder = document.querySelector('.gn-main-header-placeholder');
        function resize() {
            if (mainHeaderPlaceholder && mainHeader) {
                mainHeaderPlaceholder.style.height = mainHeader.clientHeight + 'px';
            }
        }
        window.addEventListener('resize', resize);
        window.addEventListener('DOMContentLoaded', resize);
        resize();

        function cleanHref(href) {
            return (href || '').split('#')[0];
        }

        function updateActiveMenuItems() {
            const menuDropdowns = document.querySelectorAll('.gn-main-header .dropdown');
            const pathname = window.location.pathname;
            const hash = (window.location.hash || '').split('?')[0] || '#/';
            const shouldActivate = hash === '#/';
            for (var i = 0; i < menuDropdowns.length; i++) {
                const menuDropdown = menuDropdowns[i];
                const menuItems = menuDropdown.querySelectorAll('.dropdown-menu > li a');
                const toggle = menuDropdown.querySelector('.dropdown-toggle');
                for (var j = 0; j < menuItems.length; j++) {
                    const menuItem = menuItems[j];
                    const href = cleanHref(menuItem.getAttribute('href'));
                    if (href === pathname) {
                        menuItem.parentNode.classList.add('active');
                        if (shouldActivate && ![...menuDropdown.classList].includes('gn-brand-navbar-menu')) {
                            toggle.classList.add('active');
                        }
                    }
                }
                const isNotActive = !Array.from(menuItems).some(a => a.parentNode?.classList?.contains('active'))
                if (isNotActive) { toggle.classList.remove('active'); }
            }
            const menuLinks = document.querySelectorAll('.gn-brand-navbar-menu > li a');
            for (var i = 0; i < menuLinks.length; i++) {
                const menuLink = menuLinks[i];
                const href = cleanHref(menuLink.getAttribute('href'));
                menuLink.classList.remove('active');
                if (shouldActivate && href === pathname) {
                    menuLink.classList.add('active');
                }
            }
        }
        
        updateActiveMenuItems();

        window.addEventListener("hashchange", updateActiveMenuItems);
    })();
</script>