{# 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">
            {% if settings.base.BrandSettings.brand_logo %}
                {% image settings.base.BrandSettings.brand_logo original %}
            {% 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 original %}
                                        {% 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 %}
            </ul>
        </div>
    </div>
</nav>