{% assign nav = site.data.languages[page.language].navigation %}
<div class="header-wrapper">
    <div class="header-wrapper-main">
    <header>
        <a href="{% if page.language == 'default' %}{{ site.url }}/{% else %}{{ site.url }}/{{ page.language}}/{% endif %}" class="logo">
            {{ site.data.languages[page.language].plum_logo }}
            {{ site.data.languages[page.language].plum_logo_mobile }}
        </a>
        <nav>
            {% for main_item in nav.nav_main %}
                {% if main_item.t_name == "Products" or main_item.t_name == "Resources" %}
                    <div class="nav-item">
                        <a href="#">{{ main_item.t_name }}</a>
                        <div class="dropdown-menu">
                            <div class="dropdown-container">
                                <div class="dropdown-left">
                                    {% if main_item.t_name == "Products" %}
                                        {% assign target_menu = nav.device_menu %}
                                    {% else %}
                                        {% assign target_menu = nav.resource_menu %}
                                    {% endif %}
                                    {% for item in target_menu %}
                                        <a
                                        href="{% if item.p_show == true %}{{ site.url }}/{{ item.p_link }}{% else %}#{% endif %}"
                                        onmouseover="showImage('{{ item.i_image | slugify }}', this)"
                                        >
                                        {{ item.t_name }} <svg xmlns="http://www.w3.org/2000/svg" width="24.366" height="24.372" viewBox="0 0 24.366 24.372"><path id="Vector" d="M27.378,19.443A1.754,1.754,0,0,1,25.637,17.7v-7.01L7.718,28.611a1.737,1.737,0,0,1-2.46,0,1.751,1.751,0,0,1,0-2.46L23.177,8.232h-7.01a1.741,1.741,0,1,1,0-3.482H27.378a1.754,1.754,0,0,1,1.741,1.741V17.7A1.754,1.754,0,0,1,27.378,19.443Z" transform="translate(-4.753 -4.75)" fill="#fff"/></svg>
                                        </a>
                                    {% endfor %}
                                </div>
                                <div class="dropdown-right">
                                    {% for item in target_menu %}
                                        <div id="{{ item.i_image | slugify }}" class="nav-img-preview">
                                            {% assign image_alt = item.i_image | remove: '.webp' | remove: '.png' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' %}
                                            {% picture width_500 pages/{{ item.i_image }} alt="{{ image_alt }}" %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    {% assign is_external = main_item.p_link contains '://' %}
                    <a
                        href="{% if is_external %}{{ main_item.p_link }}{% else %}{{ site.url }}/{{ main_item.p_link }}{% endif %}"
                        {% if is_external %}target="_blank" rel="noopener noreferrer"{% endif %}
                    >
                        {{ main_item.t_name }}
                    </a>
                {% endif %}
            {% endfor %}
        </nav>
        <div class="button-group">
            {% for auth in nav.auth_menu %}
                <a href="{% if auth.t_name == 'Login' %}{{ auth.p_link }}{% else %}{{ site.url }}/{{ auth.p_link }}{% endif %}" {% if auth.t_name == 'Login' %}target="_blank"{% endif %} class="btn {% if auth.t_name == 'Login' %}btn-login{% else %}btn-demo{% endif %}">
                    {{ auth.t_name }}
                </a>
            {% endfor %}
        </div>
        <button class="hamburger" id="hamburger" aria-label="Open menu">
            <span></span><span></span><span></span>
        </button>
    </header>
    </div>
</div>
<div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>
<div class="mobile-menu" id="mobileMenu">
    <nav>
        {% for main_item in nav.nav_main %}
            {% if main_item.t_name == "Products" or main_item.t_name == "Resources" %}
                <a href="#" data-parent>{{ main_item.t_name }}</a>
                {% if main_item.t_name == "Products" %}
                    {% assign mobile_target = nav.device_menu %}
                {% else %}
                    {% assign mobile_target = nav.resource_menu %}
                {% endif %}
                {% for item in mobile_target %}
                    <a href="{% if item.p_show == true %}{{ site.url }}/{{ item.p_link }}{% else %}#{% endif %}" data-child>{{ item.t_name }}</a>
                {% endfor %}
            {% else %}
                {% assign is_external = main_item.p_link contains '://' %}
                <a
                    href="{% if is_external %}{{ main_item.p_link }}{% else %}{{ site.url }}/{{ main_item.p_link }}{% endif %}"
                    {% if is_external %}target="_blank" rel="noopener noreferrer"{% endif %}
                >
                    {{ main_item.t_name }}
                </a>
            {% endif %}
        {% endfor %}
    </nav>
</div>

<script>

function showImage(imgId, element) {
    const parentDropdown = element.closest('.dropdown-container');
    parentDropdown.querySelectorAll('.nav-img-preview').forEach(img => img.style.display = 'none');
    const targetImg = document.getElementById(imgId);
    if (targetImg) targetImg.style.display = 'block';
}
    const hamburger = document.getElementById('hamburger');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
    let scrollPosition = 0;

    function openMobileMenu() {
        scrollPosition = window.scrollY;
        hamburger.classList.add('active');
        mobileMenu.classList.add('active');
        mobileMenuOverlay.classList.add('active');
        document.body.classList.add('no-scroll');
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
    }
    function closeMobileMenu() {
        hamburger.classList.remove('active');
        mobileMenu.classList.remove('active');
        mobileMenuOverlay.classList.remove('active');
        document.body.classList.remove('no-scroll');
        document.body.style.position = '';
        document.body.style.width = '';
        window.scrollTo(0, scrollPosition);
    }
    hamburger.addEventListener('click', (e) => {
        e.stopPropagation();
        hamburger.classList.contains('active') ? closeMobileMenu() : openMobileMenu();
    });
    mobileMenuOverlay.addEventListener('click', closeMobileMenu);
    mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', closeMobileMenu);
    });
</script>