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

{% set inline_mc_style %}
	#{{ id }}-particle { margin: 0; padding: 0; }
	{% if particle.animation_mode == 'slide' and particle.menu_animation == 'offcanvas' %}.jl-offcanvas-page #g-header {z-index:2;}{% endif %}
	#g-navigation .moduletable { color: initial; text-align: initial; }
{% 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 %}
	#{{id}}-particle .jl-offcanvas-bar { background: {{particle.customize_bar_background}}; }
{% endif %}
	#{{id}}-particle .jl-nav-default>li>a,#{{id}}-particle .jl-nav-primary>li>a,#{{id}}-particle .jl-nav-default .jl-nav-sub a,#{{id}}-particle .jl-nav-primary .jl-nav-sub a {color: {{particle.nav_color|default('#9b9b9b')|e}};}
{% if particle.nav_style == 'primary' %}
	#{{id}}-particle .jl-nav-primary>li>a:focus,#{{id}}-particle .jl-nav-primary>li>a:hover,#{{id}}-particle .jl-nav-primary>li.jl-active>a,#{{id}}-particle .jl-nav-primary .jl-nav-sub a:focus,#{{id}}-particle .jl-nav-primary .jl-nav-sub a:hover {color: {{particle.nav_color_active|default('#219897')|e}};}
{% else %}
	#{{id}}-particle .jl-nav-default>li>a:focus,#{{id}}-particle .jl-nav-default>li>a:hover,#{{id}}-particle .jl-nav-default>li.jl-active>a,#{{id}}-particle .jl-nav-default .jl-nav-sub a:focus,#{{id}}-particle .jl-nav-default .jl-nav-sub a:hover {color: {{particle.nav_color_active|default('#219897')|e}};}
{% 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) %}

<a class="jl-navbar-toggle{% if particle.class %} {{ particle.class }}{% endif %}{% if particle.visibility != 'inherit' %} jl-visible@{{particle.visibility|e}}{% endif %}" href="#{{ id }}" jl-toggle>
{% if particle.icon %}
<i class="jl-icon {{ particle.icon|e }}" aria-hidden="true"></i>
{% else %}
<div jl-navbar-toggle-icon class="jl-icon jl-navbar-toggle-icon"></div>
{% endif %}
{% if particle.menu_text %}<span class="jl-margin-small-left">{{particle.menu_text}}</span>{% endif %}
</a>

{% if particle.menu_animation == 'offcanvas' %}
<div id="{{ id }}" jl-offcanvas="mode: {{particle.animation_mode}};{{ particle.flip_offcanvas ? ' flip: true;' : '' }}{{ particle.overlay ? ' overlay: true;' : '' }}">
    <div class="jl-offcanvas-bar{% if particle.offcanvas_inverse != 'default' %} jl-{{particle.offcanvas_inverse|e}}{% endif %}">

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

{% else %}

<div id="{{ id }}" class="jl-modal-full" jl-modal>
<div class="jl-modal-dialog jl-flex">

{% if particle.close_button %}
    <button class="jl-modal-close-full jl-close-large jl-icon jl-close" type="button" jl-close></button>
{% endif %}

<div class="jl-modal-body jl-padding-large jl-margin-auto jl-height-viewport jl-flex jl-flex-column">
{% if particle.modal_vertically %}
<div class="jl-margin-auto-vertical">
{% endif %}
{% endif %}

<div class="{% if particle.nav_margin_top == 'default' %}jl-margin-top{% else %}jl-margin-{{ particle.nav_margin_top|e }}-top{% endif %}">

{% macro getCustomWidth(item, menu, mode, dropdown_type) -%}
	{%- if (item.width|default('auto') != 'auto') and not (dropdown_type == 'fullwidth' and item.level > 1) -%}
		{%- if mode == 'item' %}
			style="position: relative;"
		{%- elseif mode == 'submenu' %}
			style="width:{{ item.width }};" data-g-item-width="{{ item.width }}"
		{%- endif %}
	{%- endif %}
{%- endmacro %}

{% macro displayParticle(item, context) %}
	{% set context = context|merge({ particle: item.options.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>
{% endmacro %}

{% macro displayTitle(item) %}
	{% if not item.icon_only or not (item.image or item.icon) %}
		<span class="g-menu-item-title">{{ item.title }}</span>
		{% if item.subtitle %}
			<span class="g-menu-item-subtitle">{{ item.subtitle }}</span>
		{% 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 ? ' 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 %}

		{% set rel = rel ? ' rel="' ~ rel|e('html_attr') ~ '"' %}

		<li class="g-menu-item-type-{{ item.type }} g-menu-item-{{ item.id }}{% if not item.dropdown_hide %}{{ parent }}{% endif %}{{ active }}{{ dropdown }} {% if item.url and item.children %}{% if not item.dropdown_hide %}g-menu-item-link-parent{% endif %}{% endif %} {{ item.class|default('') }}" {{- self.getCustomWidth(item, menu, 'item', dropdown) }} {%- if context.particle.renderTitles|default(0) %} title="{{ item.title }}" {% endif %} {{listAttributes|raw}}>
			{% if item.url %}
				<a class="g-menu-item-container{{ item.anchor_class ? ' ' ~ item.anchor_class }}" href="{{ item.url }}{{ item.hash }}" {{ (title ~ label ~ target ~ rel ~ linkAttributes)|raw }}>
				{% else %}

				{% if (item.children) and not item.dropdown_hide -%}
					<div class="jl-nav-header g-menu-item-container{{ item.anchor_class ? ' ' ~ item.anchor_class }}" data-g-menuparent="" {{ label|raw }}>
				{% else %}
					<div class="g-menu-item-container{{ item.anchor_class ? ' ' ~ item.anchor_class }}" data-g-menuparent="" {{ label|raw }}>
				{% endif %}
				
					{% endif %}
					{% if item.image %}
						<img src="{{ url(item.image) }}" alt="{{ item.title }}"/>
					{% elseif item.icon %}
						<i class="{{ item.icon }}" aria-hidden="true"></i>
					{% endif %}
					{% if item.url %}
						<span class="g-menu-item-content">
							{{ self.displayTitle(item) }}
						</span>
						{% if (item.children) and not item.dropdown_hide -%}
							<span class="g-menu-parent-indicator" data-g-menuparent=""></span>
						{%- endif %}
					{% else %}

				{% if (item.children) and not item.dropdown_hide -%}
						{% if item.type == 'particle' %}
							{{ self.displayParticle(item, context) }}
						{% elseif item.type == 'heading' %}
							<span class="g-menu-item-content" {{ title|raw }}>{{ self.displayTitle(item) }}</span>
						{% else %}
							<span class="g-menu-item-content" {{ title|raw }}>{{ self.displayTitle(item) }}</span>
						{% endif %}
				{% else %}
						{% if item.type == 'particle' %}
							{{ self.displayParticle(item, context) }}
						{% elseif item.type == 'heading' %}
							<span class="jl-nav-header g-menu-item-content" {{ title|raw }}>{{ self.displayTitle(item) }}</span>
						{% else %}
							<span class="jl-nav-divider g-menu-item-content" {{ title|raw }}>{{ self.displayTitle(item) }}</span>
						{% endif %}
				{% endif %}



						{% if (item.children) and not item.dropdown_hide -%}
							<span class="g-menu-parent-indicator"></span>
						{%- endif %}
					
					{% endif %}
					{% if item.url %}
					</a>
			{% else %}
				</div>
			{% endif %}
			{% if (item.children) -%}
				{{ self.displaySubmenu(item, menu, context, dropdown_type) }}
			{%- 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) %}
	{% import _self as self %}
	{% for item in items %}
		{% if item.level == 1 %}
			{% set dropdown_type = item.dropdown %}
		{% endif %}
		{{ self.displayItem(item, menu, context, dropdown_type) }}
	{% 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 Nav Style #}
{% set nav_style = particle.nav_style ? 'jl-nav-primary' : 'jl-nav-default' %}

{% import _self as macro %}

{% if menu.root.count() %}
		<ul class="jl-nav {{ nav_style }}{{ particle.nav_center ? ' jl-nav-center' : ' jl-text-left' }}">
				{{ macro.displayItems(menu.root, menu, _context) }}
		</ul>
{% endif %}
	
</div>

{% if particle.module_id %}
<div class="jl-margin-top">
    {{ gantry.platform.displayModule(particle.module_id, {'style': particle.chrome|default('gantry'), 'position': 'particle'})|raw }}
</div>
{% endif %}

{% if particle.menu_animation == 'modal' %}
{% if particle.modal_vertically %}
</div>
{% endif %}
</div>
{% endif %}

</div>
</div>