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

{% 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|e }};" data-g-item-width="{{ item.width|e }}"
        {%- endif %}
    {%- endif %}
{%- endmacro %}

{% macro displayParticle(item, context) %}
    {% if item.options.particle.enabled is null or item.options.particle.enabled %}
        {% 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>
    {% endif %}
{% endmacro %}

{% macro displayTitle(item) %}
    {% if not item.icon_only or not (item.image or item.icon) %}
        <span class="g-menu-item-title">{{ item.title|e }}</span>
        {% if item.subtitle %}
            <span class="g-menu-item-subtitle">{{ item.subtitle|e }}</span>
        {% endif %}
    {% endif %}
{% endmacro %}

{% macro displayItem(item, menu, context, dropdown_type) %}
    {% import _self as SELF %}
    {% if item.visible %}
        {% set title = item.icon_only ? ' title="' ~ item.title|e ~ '"' %}
        {% set active = menu.isActive(item) ? ' active' %}
        {% set dropdown = item.level == 1 ? ' g-' ~ item.getDropdown()|e %}
        {% set parent = item.children ? ' g-parent' %}
        {% set target = item.target != '_self' ? ' target="' ~ item.target|e ~ '"' %}
        {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' %}

        <li class="g-menu-item g-menu-item-type-{{ item.type|e }} g-menu-item-{{ item.id|e }}{% if not item.dropdown_hide %}{{ parent|raw }}{% endif %}{{ active|raw }}{{ dropdown|raw }} {% if item.url and item.children %}{% if not item.dropdown_hide %}g-menu-item-link-parent{% endif %}{% endif %} {{ item.class|e|default('') }}"
                {{- SELF.getCustomWidth(item, menu, 'item', dropdown) }}
                {%- if context.particle.renderTitles|default(0) %} title="{{ item.title|e }}"{% endif %}>
            {% if item.url %}<a class="g-menu-item-container{{ item.anchor_class ? ' ' ~ item.anchor_class }}" href="{{ item.url|e }}{{ item.hash ? item.hash|e : '' }}"{{ (title ~ target ~ rel)|raw }}>
            {% else %}<div class="g-menu-item-container{{ item.anchor_class ? ' ' ~ item.anchor_class }}" data-g-menuparent="">{% endif %}
                {% if item.image %}
                    <img src="{{ url(item.image)|e }}" alt="{{ item.title|e }}" />
                {% elseif item.icon %}
                    <i class="{{ item.icon|e }}"></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.type == 'particle' %}
                        {{ SELF.displayParticle(item, context) }}
                    {% elseif item.type == 'heading' %}
                        <span class="g-nav-header g-menu-item-content"{{ title|raw }}>{{ SELF.displayTitle(item) }}</span>
                    {% else %}
                        <span class="g-separator g-menu-item-content"{{ title|raw }}>{{ SELF.displayTitle(item) }}</span>
                    {% endif %}
                        {% if (item.children) -%}
                            <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 %}
    <div class="g-grid">
        {% set groups = item.getDropdown() == 'standard' ? [item] : item.groups %}
        {% for column, items in groups %}
        <div class="g-block {{ item.columnWidth(column)|toGrid|e }}">
            <ul class="g-sublevel">
                <li class="g-level-{{ item.level|e }} g-go-back">
                    <a class="g-menu-item-container" href="#" data-g-menuparent=""><span>Back</span></a>
                </li>
                {{ SELF.displayItems(items, menu, context, dropdown_type) }}
            </ul>
        </div>
        {% endfor %}
    </div>
{% 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') %}{% set dropdown_dir = 'g-dropdown-' ~ item.dropdown_dir|default('right') %}{% endif %}
        <ul class="g-dropdown g-inactive {{ animation }} {{ dropdown_dir }}"{{ SELF.getCustomWidth(item, menu, 'submenu', dropdown_type) }}>
            <li class="g-dropdown-column">
                {{ SELF.displayContainers(item, menu, context, dropdown_type) }}
            </li>
        </ul>
    {% endif %}
{% endmacro %}

{% if menu.root.count() %}
<nav class="g-main-nav" role="navigation"{{ particle.mobileTarget ? ' data-g-mobile-target' : '' }}>
    <ul class="g-toplevel">
        {{ _self.displayItems(menu.root, menu, _context) }}
    </ul>
</nav>
{% endif %}