{% load static %}
{% load get_menu_json %}
{% get_menu_json 'TOPBAR_MENU' as TOPBAR_MENU %}
{% get_menu_json 'TOPBAR_MENU_LEFT' as TOPBAR_MENU_LEFT %}
{% get_menu_json 'TOPBAR_MENU_RIGHT' as TOPBAR_MENU_RIGHT %}
{% block extra_style %}
{% endblock %}

<nav id="gn-brand-navbar" class="gn-brand-navbar ms-main-colors _padding-md ms-flex-box _flex">
    <div class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v">
        {% block logo %}
            <a href="/">
                {% if custom_theme.logo and custom_theme.logo.url %}
                    <img src="{{ custom_theme.logo.url }}">
                {% else %}
                    <img src="{% block logo_src %}/static/mapstore/img/geonode-logo.svg{% endblock %}">
                {% endif %}
            </a>
        {% endblock %}
        {% block left_menu %}
        <div class="gn-brand-navbar-left-menu-container ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v">
            <ul class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v gn-brand-navbar-menu">
                {% block default_left_menu_items %}
                    {% include './brand_navbar_default_left_menu_items.html' %}
                {% endblock %}
                {% for menu_item in TOPBAR_MENU %}
                    {% include './menu_item.html' with menu_item=menu_item %}
                {% endfor %}
                {% for menu_item in TOPBAR_MENU_LEFT %}
                    {% include './menu_item.html' with menu_item=menu_item %}
                {% endfor %}
            </ul>
        </div>
        {% endblock %}
        {% block right_menu %}
            {% block search_bar %}
                {% include './search_bar.html' with search_bar_id='gn-search-bar' %}
            {% endblock %}
            <ul class="gn-brand-navbar-right-menu-container ms-flex-box _flex _flex-gap-sm _flex-center-v">
                {% block language_selector %}
                    {% include './language_selector.html' with align_right=True %}
                {% endblock %}
                {% for menu_item in TOPBAR_MENU_RIGHT %}
                    {% include './menu_item.html' with menu_item=menu_item align_right=True %}
                {% endfor %}
                {% block default_right_menu_items %}
                    {% include './brand_navbar_default_right_menu_items.html' %}
                {% endblock %}
            </ul>
        {% endblock %}
    </div>
</nav>
<div id="gn-brand-navbar-bottom">
    {% block bottom_menu %}
        <div class="gn-brand-navbar-menu dropdown">
            <button
                class="btn dropdown-toggle btn-default"
                type="button"
                id="gn-brand-navbar-menu-btn"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="true"
            >
                <i class="fa fa-bars"> </i>
            </button>
            <ul
                class="dropdown-menu"
                aria-labelledby="gn-brand-navbar-dropdown-menu"
            >
            </ul>
        </div>
        {% include './search_bar.html' with search_bar_id='gn-search-bar-bottom' %}
    {% endblock %}
</div>
{% block extra_script %}
    <script type="text/javascript">
        (function() {
            function manageUrlChange() {
                var signInElement = document.getElementById("sign-in");
                if (signInElement){
                    if (window.location.pathname === '/account/login/'){
                        signInElement.setAttribute("href", window.location.href)
                    }
                    else {
                        var href = signInElement.getAttribute("href").split("next=")[0];
                        var url_parts = window.location.href.split(window.location.pathname);
                        var path_name = encodeURIComponent(window.location.pathname + url_parts[url_parts.length-1]);
                        signInElement.setAttribute("href", href.concat("next=".concat(path_name)));
                    }
                }
            }

            function onLoadNavbar() {
                const menuContainer = document.querySelector('.gn-brand-navbar-left-menu-container');
                const menu = menuContainer.querySelector('.gn-brand-navbar-menu');
                const brandNavbarBottom = document.querySelector('#gn-brand-navbar-bottom');
                const menuBottomUl = brandNavbarBottom.querySelector('.gn-brand-navbar-menu.dropdown .dropdown-menu');
                const menuItems = Array.from(menu?.children ?? []);

                // Clear existing items in bottom menu
                menuBottomUl.innerHTML = '';

                function appendDivider() {
                    const divider = document.createElement('li');
                    divider.className = "divider";
                    divider.role = "separator";
                    menuBottomUl.appendChild(divider);
                }

                // Clone and add all menu items to bottom menu
                menuItems.forEach(item => {
                    const clone = item.cloneNode(true);
                    
                    if (clone.tagName === 'LI') {
                        menuBottomUl.appendChild(clone);

                        const dropdownButton = clone.querySelector('.dropdown button') || clone.querySelector('.dropdown-toggle');
                        if (dropdownButton) {
                            dropdownButton.addEventListener('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                const parentElement = dropdownButton.closest('.dropdown');
                                if (parentElement) {
                                    parentElement.classList.toggle('open');
                                }
                            });
                        }
                    }
                });
            }

            function onResizeNavbar() {
                const searchBar = document.querySelector('.gn-search-bar');
                const menuContainer = document.querySelector('.gn-brand-navbar-left-menu-container');
                const menu = menuContainer.querySelector('.gn-brand-navbar-menu');
                const brandNavbarBottom = document.querySelector('#gn-brand-navbar-bottom');
                const menuBottom = brandNavbarBottom.querySelector('.gn-brand-navbar-menu.dropdown');
                const searchBarBottom = brandNavbarBottom.querySelector('#gn-search-bar-bottom');

                searchBar.style.visibility = 'hidden';
                searchBar.style.display = 'block';

                const menuRight = menu?.getBoundingClientRect()?.right;
                const searchBarLeft = searchBar?.getBoundingClientRect()?.left;
                const contentLeft = document.querySelector('.gn-brand-navbar-right-menu-container')?.getBoundingClientRect()?.left;

                if (menuRight == null || searchBarLeft == null || contentLeft == null) {
                    return;
                }
                // Default state
                menuContainer.style.visibility = 'visible';
                searchBar.style.visibility = 'visible';
                brandNavbarBottom.style.display = 'none';
                menuBottom.style.display = 'none';
                searchBarBottom.style.visibility = 'hidden';

                // Menu overlaps with search bar
                if (menuRight > searchBarLeft) {
                    searchBar.style.display = 'none';
                    brandNavbarBottom.style.display = 'block';
                    menuBottom.style.display = 'none';
                    searchBarBottom.style.visibility = 'visible';

                    // Menu also overlaps with right menu items
                    if (menuRight > contentLeft) {
                        menuContainer.style.visibility = 'hidden';
                        brandNavbarBottom.style.display = 'flex';
                        menuBottom.style.display = 'block';
                    }
                }
            }

            window.addEventListener('DOMContentLoaded', function() {
                manageUrlChange();
                onResizeNavbar();
                onLoadNavbar();
            });

            window.addEventListener('resize', onResizeNavbar);
            window.addEventListener('hashchange', manageUrlChange);
        })();
    </script>
{% endblock extra_script %}