{#
    Site Menu - semantic, fully server-rendered navigation tree.

    Every link at every depth is a real <a href>, so the whole menu is present
    in the initial HTML response (crawlable, works without JavaScript). Dropdown
    and mega-menu behaviour is layered on by progressive-enhancement JS keyed off
    the data-site-menu-* attributes below.

    Context:
      items   - Collection/array of menu nodes (each may have a `subs` list)
      options - { container_class, first_container_class, menu_name }
#}
{% import _self as site_menu %}

{% macro chevron() %}
    <i class="siteMenu__icon" aria-hidden="true">
        {{ file_get_contents(settings.SITE_PATH ~ "/sites/" ~ settings.SITE ~ "/images/icons/chevron.svg")|raw }}
    </i>
{% endmacro %}

{#
    Render a single menu node and (recursively) its children.
    depth: 1 = top level, 2 = first dropdown, etc.
#}
{% macro render_item(item, depth) %}
    {% import _self as site_menu %}

    {% if item.published %}
        {% set has_children = item.subs is defined and item.subs|length > 0 %}
        {% set is_mega = depth == 1 and (item.mega_menu or 'megaMenu' in item.css_class) %}
        {# Map the legacy `mobileOnly` utility token to a BEM modifier and strip
           it from the passthrough so the global utility can't also hide it. #}
        {% set item_css = item.css_class|default('') %}
        {% set is_mobile_only = 'mobileOnly' in item_css %}
        {% set item_css = is_mobile_only ? (item_css|replace({'mobileOnly': ''})|trim) : item_css %}

        <li class="siteMenu__item
            {{- has_children ? ' siteMenu__item--has-children' }}
            {{- is_mega ? ' siteMenu__item--mega' }}
            {{- is_mobile_only ? ' siteMenu__item--mobile-only' }}
            {{- item_css ? ' ' ~ item_css }}"
            {% if has_children %}data-site-menu-parent{% endif %}
        >
            <a class="siteMenu__link"
               href="{{ item.url }}"
               {% if item.target %}target="{{ item.target }}"{% endif %}
               {% if item.id is defined %}data-id="{{ item.id }}"{% endif %}
               {% if has_children %}
                   data-site-menu-toggle
                   aria-haspopup="true"
                   aria-expanded="false"
               {% endif %}
            >
                <span class="siteMenu__label">{{ item.name|raw }}</span>
                {% if has_children %}{{ site_menu.chevron() }}{% endif %}
            </a>

            {% if has_children %}
                {% if is_mega %}
                    {# Mega menu: data-driven link columns. Title and "View all"
                       reuse the node's own name/url; no placeholder content. #}
                    <div class="siteMenu__mega" data-site-menu-panel>
                        <div class="siteMenu__mega-inner">
                            <div class="siteMenu__mega-info">
                                <h2 class="siteMenu__mega-title">{{ item.name|raw }}</h2>
                                {% if item.url %}
                                    <div class="siteMenu__mega-action">
                                        <a class="button siteMenu__mega-view-all" href="{{ item.url }}">View all</a>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="siteMenu__mega-menus">
                                <ul class="siteMenu__mega-list">
                                    {% for child in item.subs %}
                                        {% if child.published %}
                                            <li class="siteMenu__mega-item{{ child.css_class ? ' ' ~ child.css_class }}">
                                                <a class="siteMenu__mega-link"
                                                   href="{{ child.url }}"
                                                   {% if child.target %}target="{{ child.target }}"{% endif %}
                                                   {% if child.id is defined %}data-id="{{ child.id }}"{% endif %}
                                                >{{ child.name|raw }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <ul class="siteMenu__dropdown siteMenu__dropdown--level{{ depth }}" data-site-menu-panel>
                        {% for child in item.subs %}
                            {{ site_menu.render_item(child, depth + 1) }}
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endif %}
        </li>
    {% endif %}
{% endmacro %}

{% if items|length > 0 %}
    <ul class="siteMenu__list{{ options.container_class ? ' ' ~ options.container_class }}">
        {% for item in items %}
            {{ site_menu.render_item(item, 1) }}
        {% endfor %}
    </ul>
{% endif %}
