{# includes/navigation.html #}
{% load wagtailcore_tags wagtailimages_tags wagtailsettings_tags %}
{% get_settings %}

<nav class="navbar navbar-expand-lg">
    <div class="container">
        {# Brand Logo #}
        <a href="/" class="navbar-brand" title="{{ settings.base.BrandSettings.brand_logo_alt }}">
            {% if menuitem.menu_image %}
    {% image menuitem.menu_image fill-200x100 as menu_img %}
    <img src="{{ menu_img.url }}" alt="{{ menuitem.title }}" class="menu-image">
{% endif %}
        </a>

        {# Navigation Toggle Button #}
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        {# Main Navigation #}
        <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav">
                {% for menuitem in menuitems %}
                    <li class="nav-item {% if menuitem.has_dropdown %}dropdown{% endif %}">
                        <a href="{% pageurl menuitem %}" class="nav-link {% if menuitem.has_dropdown %}dropdown-toggle{% endif %}" 
                           {% if menuitem.has_dropdown %}data-bs-toggle="dropdown"{% endif %}>
                            {{ menuitem.menu_title|default:menuitem.title }}
                        </a>

                        {% if menuitem.has_dropdown %}
                            <div class="dropdown-menu">
                                {# Menu Content #}
                                {% if menuitem.menu_description or menuitem.menu_image %}
                                    <div class="dropdown-header">
                                        {% if menuitem.menu_image %}
                                            {% image menuitem.menu_image fill-200x100 as menu_img %}
                                            <img src="{{ menu_img.url }}" alt="{{ menuitem.title }}" class="menu-image">
                                        {% endif %}
                                        {% if menuitem.menu_description %}
                                            <div class="menu-description">
                                                {{ menuitem.menu_description|richtext }}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}

                                {# Submenu Items #}
                                {% for submenu in menuitem.submenuitems %}
                                    <a href="{% pageurl submenu %}" class="dropdown-item">
                                        {{ submenu.menu_title|default:submenu.title }}
                                    </a>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </li>
                {% endfor %}
                 <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="marketsDropdown" data-bs-toggle="dropdown">
                        Anwendungen
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="marketsDropdown">
                        {% for market in markets %}
                        <li><a href="{{ market.url }}" class="dropdown-item">{{ market.title }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="productsDropdown" data-bs-toggle="dropdown">
                        Produkte
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="productsDropdown">
                        {% for product in products %}
                        <li><a href="{{ product.url }}" class="dropdown-item">{{ product.title }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>