{% try %}
    {% set menu = gantry.menu.instance(particle) %}
{% catch %}
    <div class="alert alert-error">{{ e.getMessage }}</div>
{% endtry %}

{% set nav_init = particle.nav_style ? particle.nav_style : 'default' %}
{% set cv_nav_init = particle.cv_nav_style ? particle.cv_nav_style : 'default' %}

{% set inline_mc_style %}
{% if particle.dropdown_animation == 'slide' %}.tm-header-mobile-slide {z-index: 9;}{% endif %}
{% if particle.offcanvas_minheight %}
#{{ id }}-particle .jl-navbar-toggle {min-height:{{particle.offcanvas_minheight}}px; }
{% endif %}
{% if particle.toggle_color %}
#{{ id }}-particle .jl-navbar-toggle {color:{{particle.toggle_color}}; }
{% endif %}
{% if particle.toggle_color_hover %}
#{{ id }}-particle .jl-navbar-toggle:focus,#{{ id }}-particle .jl-navbar-toggle:hover {color:{{particle.toggle_color_hover}};}
{% endif %}
{% if particle.customize_bar_background %}
#mobile-{{ id }} .tm-nav-mobile { background: {{ particle.customize_bar_background }}; }
{% endif %}
{% if particle.nav_cv_color %}
#mobile-{{ id }} .jl-nav-{{ nav_init }}>li>a,#mobile-{{ id }} .jl-nav-{{ nav_init }} .jl-nav-sub a{color: {{ particle.nav_cv_color }};}
{% endif %}
{% if particle.nav_color_active %}
#mobile-{{ id }} .jl-nav-{{ nav_init }}>li>a:focus,#mobile-{{ id }} .jl-nav-{{ nav_init }}>li>a:hover,#mobile-{{ id }} .jl-nav-{{ nav_init }}>li.jl-active>a,#mobile-{{ id }} .jl-nav-{{ nav_init }} .jl-nav-sub a:focus,#mobile-{{ id }} .jl-nav-{{ nav_init }} .jl-nav-sub a:hover,#mobile-{{ id }} .jl-nav-{{ nav_init }} .jl-nav-sub li.jl-active > a {color: {{particle.nav_color_active|e}};}
{% endif %}
{% if particle.nav_color_header %}
#mobile-{{ id }} .jl-nav-{{ nav_init }} .jl-nav-header {color: {{ particle.nav_color_header }};}
{% endif %}
{% if particle.toggle_text_fontsize %}
#{{ id }}-particle .jl-navbar-toggle { font-size: {{ particle.toggle_text_fontsize }}px; }
{% endif %}
{% endset %}
{% do gantry.document.addInlineStyle(inline_mc_style, 0) %}

{% macro displayParticle(item, context) %}
    {% try %}
    {% set in_particle = (context.in_particle ?? 0) + 1 %}
    {% if in_particle > 5 %}
        {% throw 500 'Particle loop detected' %}
    {% endif %}

    {% set context = context|merge({ particle: item.options.particle, in_particle: in_particle}) %}
    {% set classes = item.options.block.class %}
    <div class="menu-item-particle{{ classes ? ' ' ~ classes }}">
        {% include ['particles/' ~ item.particle ~ '.html.twig', '@particles/' ~ item.particle ~ '.html.twig']
        ignore missing with context only %}
    </div>
    {% catch %}
        <div class="alert alert-error">{{ e.getMessage }}</div>
    {% endtry %}
{% endmacro %}

{% macro displayTitle(item) %}
    {% if not item.icon_only or not (item.image or item.icon) %}
        {% if item.subtitle %}
        <div>{{ item.title }}
        <div class="jl-nav-subtitle">{{ item.subtitle }}</div></div>
        {% else %}
        {{ item.title }}
        {% endif %}
    {% endif %}
{% endmacro %}

{% macro displayItem(item, menu, context, dropdown_type) %}
    {% import _self as self %}
    {% if item.type == 'particle' and not item.options.particle.enabled %}
        {% set enabled = 0 %}
    {% endif %}
    {% if item.visible and item.enabled and enabled|default(1) %}
        {% set title = item.icon_only or item.link_title ? ' title="' ~ item.link_title|default(item.title)|e ~ '"' %}
        {% set label = item.icon_only and (item.image or item.icon) ? ' aria-label="' ~ item.title|e ~'"' %}
        {% set active = menu.isActive(item) ? ' jl-active' %}
        {% set dropdown = item.level == 1 ? ' g-' ~ item.getDropdown() %}
        {% set parent = item.children|length ? ' jl-parent' %}
        {% set target = (item.target != '_self' or context.particle.forceTarget) ? ' target="' ~ item.target|e ~ '"' %}
        {% set rel = item.rel %}

        {% if item.target == '_blank' %}
            {% if 'noopener' not in rel %}
                {% set rel = rel ? rel ~ ' ' : rel %}
                {% set rel = rel ~ 'noopener' %}
            {% endif %}
            {% if 'noreferrer' not in rel %}
                {% set rel = rel ? rel ~ ' ' : rel %}
                {% set rel = rel ~ 'noreferrer' %}
            {% endif %}
        {% endif %}

        {% set listAttributes = item.attributes|attribute_array %}
        {% set linkAttributes = '' %}
        
        {% if item.link_attributes %}
            {% for attribute in item.link_attributes %}
                {% for key, value in attribute %}
                    {% if key == 'rel' %}
                        {% for hVal in value|split(' ') %}
                            {% if hVal not in rel %}
                                {% set rel = rel ? rel ~ ' ' : rel %}
                                {% set rel = rel ~ hVal %}
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        {% set linkAttributes = linkAttributes ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        {% endif %}

        {# Special handling for opening link in a new window without navigation #}
        {% if item.target == '_nonav' %}
            {% set target = 'target="_blank"' %}
            {% set linkAttributes = linkAttributes ~ ' onclick="window.open(this.href, \'targetWindow\', \'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes\'); return false;"' %}
        {% endif %}
        {% set item_accordion = (item.type == 'separator' or item.type == 'heading') and item.level == 1 and parent ? ' js-accordion' %}
        {% set rel = rel ? ' rel="' ~ rel|e('html_attr') ~ '"' %}
        <li class="item-{{ item.id }}{% if not item.dropdown_hide %}{{ active }}{{ item_accordion }}{% endif %}{{ parent and item_accordion and active ? ' jl-open' : '' }}{{ parent }}{% if item.class %} {{ item.class|default('') }}{% endif %}{% if not parent %}{% if item.type == 'separator' and item.level != 1 %} jl-nav-divider{% elseif item.type == 'heading' and item.level != 1 %} jl-nav-header{% endif %}{% endif %}"
            {%- if context.particle.renderTitles|default(0) %} title="{{ item.title }}"{% endif %}{{listAttributes|raw}}>
            {% if item.url %}
                <a{% if item.anchor_class %} class="{{ item.anchor_class }}"{% endif %} href="{{ item.url }}{{ item.hash }}"{{ (title ~ label ~ target ~ rel ~ linkAttributes)|raw }}{% if item.hash %} jl-scroll{% endif %}>
                    {% if item.image %}
                        <img src="{{ url(item.image) }}" alt="{{ item.title }}" />
                    {% elseif item.icon %}
                        <i class="{{ item.icon }}" aria-hidden="true"></i>
                    {% endif %}
                    {{ self.displayTitle(item) }}
                    {% if parent and not item.dropdown_hide -%}
                        <span jl-nav-parent-icon></span>
                    {%- endif %}
                </a>
            {% else %}
                {% if item.children|length or item.level == 1 %}
                    <a href="#" class="menu__{{ item.type }}{% if item.anchor_class %}{{ item.anchor_class }}{% endif %}"{{ (title ~ label ~ rel ~ linkAttributes)|raw }}{% if not item.children|length and item.level == 1 and (item.type == 'heading' or item.type == 'separator') %} aria-haspopup="true" aria-expanded="false" tabindex="0"{% endif %}>
                {% endif %}
                {% if item.type == 'particle' %}
                    {{ self.displayParticle(item, context) }}
                {% elseif item.type == 'heading' %}
                    {{ self.displayTitle(item) }}
                {% else %}
                
                {% if item.level == 1 -%}
                    {{ self.displayTitle(item) }}
                {%- endif %}

                {% endif %}

                {% if parent and not item.dropdown_hide -%}
                    <span jl-nav-parent-icon></span>
                {%- endif %}

                {% if item.children|length or item.level == 1 %}
                    </a>
                {% endif %}

            {% endif %}
            {% if parent -%}
                {{ self.displaySubmenu(item, menu, context, dropdown_type, start_level) }}
            {%- endif %}
          </li>

    {% endif %}
{% endmacro %}

{% macro displayContainers(item, menu, context, dropdown_type) %}
	{% import _self as self %}
	{% set groups = item.getDropdown() == 'standard' ? [item] : item.groups %}
	<ul class="jl-nav-sub">
		{% for column, items in groups %}
			{{ self.displayItems(items, menu, context, dropdown_type) }}
		{% endfor %}
	</ul>
{% endmacro %}

{% macro displayItems(items, menu, context, dropdown_type, start_level) %}
    {% import _self as self %}
    {% for item in items %}
        {% set start_level = start_level ?? root_level ?? item.level %}
        {% set dropdown = dropdown_type ?? item.dropdown %}
        {{ self.displayItem(item, menu, context, dropdown, start_level) }}
    {% endfor %}
{% endmacro %}

{% macro displaySubmenu(item, menu, context, dropdown_type) %}
	{% import _self as self %}
	{% if not item.dropdown_hide %}
		{% set animation = context.gantry.config.get('styles.menu.animation')|default('g-fade') %}
		{% if ((item.groups|length == 1 and not dropdown_type == 'fullwidth') or dropdown_type == 'standard') or (item.width|default('auto') != 'auto' and dropdown_type == 'fullwidth')%}
			{% set dropdown_dir = 'g-dropdown-' ~ item.dropdown_dir|default('right') %}
		{% endif %}
		{{ self.displayContainers(item, menu, context, dropdown_type) }}
	{% endif %}
{% endmacro %}

{# Set Attr menu #}
{% set attrs_menu = 'tm-nav-mobile jl-offcanvas-bar' ~ ( particle.nav_center ? ' jl-text-center' : '' ) ~ ( particle.modal_vertically ? ' jl-flex' : '') ~ ( particle.offcanvas_inverse ? ' jl-' ~ particle.offcanvas_inverse|e : '') %}

{% set attrs_menu = attrs_menu ? ' class="' ~ attrs_menu|trim ~ '"' %}

{% import _self as macro %}

{% if particle.menu_animation == 'offcanvas' %}
{% pageblock body_bottom %}
<div id="mobile-{{ id }}" jl-offcanvas="mode: {{ particle.animation_mode }};{{ particle.flip_offcanvas ? ' flip: true;' : '' }}{{ particle.overlay ? ' overlay: true;' : '' }}">
    <div{{ attrs_menu|raw }}>

    {% if particle.close_button %}
        <button class="jl-offcanvas-close" type="button" jl-close></button>
    {% endif %}

        {% if particle.modal_vertically %}
            <div class="jl-margin-auto-vertical jl-width-1-1">
        {% endif %}

            <div class="jl-child-width-1-1" jl-grid>
                
                {% if menu.root.count() %}
                <div>
                    <ul class="jl-nav jl-nav-{{ nav_init }}{{ particle.nav_center ? ' jl-nav-center' : ' jl-text-left' }}{{ particle.nav_divider ? ' jl-nav-divider' : '' }}" jl-nav="targets: > .js-accordion">
                        {{ macro.displayItems(menu.root, menu, _context) }}
                    </ul>
                </div>
                {% endif %}
                
                {% if particle.module_id %}
                    <div>
                     {{ gantry.platform.displayModule(particle.module_id, {'style': particle.chrome|default('gantry'), 'position': 'particle'})|raw }}
                    </div>
                {% endif %}

            </div>

        {% if particle.modal_vertically %}
            </div>
        {% endif %}

    </div>
</div>
{% endpageblock %}
{% endif %}