{% set menu = gantry.menu.instance(particle) %}

{% macro getCustomWidth(item, root, mode) -%}
    {%- if (item.width|default('auto') != 'auto') and not (root.getDropdown() == '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, gantry) %}
    {% if item.options.particle.enabled is null or item.options.particle.enabled %}
        {% 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 {gantry: gantry, particle: item.options.particle } only %}
        </div>
    {% endif %}
{% endmacro %}

{% macro displayTitle(item, gantry) %}
    {% 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, root, menu, gantry) %}
    {% if item.visible %}
        {% import _self as SELF %}
        {% 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 ~ '"' %}


        <li id="g-menu-item-{{ item.id|e }}" class="g-menu-item g-menu-item-type-{{ item.type|e }} g-menu-item-{{ item.id|e }}{{ parent|raw }}{{ active|raw }}{{ dropdown|raw }} {% if item.url and item.children %}g-menu-item-link-parent{% endif %} {{ item.class|e|default('') }}"{{ SELF.getCustomWidth(item, root, 'item') }} title="{{ item.title|e }}">
            {% 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)|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, gantry) }}
                    </span>
                    {% if (item.children) -%}
                        <span class="g-menu-parent-indicator" data-g-menuparent=""></span>
                    {%- endif %}
                {% else %}
                    {% if item.type == 'particle' %}
                        {{ SELF.displayParticle(item, gantry) }}
                    {% elseif item.type == 'heading' %}
                        <span class="g-nav-header g-menu-item-content"{{ title|raw }}>{{ item.title|e }}</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, root, menu, gantry) }}
            {%- endif %}
        </li>
    {% endif %}
{% endmacro %}

{% macro displayContainers(item, root, menu, gantry) %}
    {% 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, gantry, root) }}
            </ul>
        </div>
        {% endfor %}
    </div>
{% endmacro %}

{% macro displayItems(items, menu, gantry, root) %}
    {% import _self as SELF %}
    {% for item in items %}
        {{ SELF.displayItem(item, root, menu, gantry) }}
    {% endfor %}
{% endmacro %}

{% macro displaySubmenu(item, root, menu, gantry) %}
    {% import _self as SELF %}
    <ul class="g-dropdown g-inactive {{ gantry.config.get('styles.menu.animation')|default('g-fade') }}"{{ SELF.getCustomWidth(item, root, 'submenu') }}>
        <li class="g-dropdown-column">
            {{ SELF.displayContainers(item, root, menu, gantry) }}
        </li>
    </ul>
{% 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, gantry) }}
    </ul>
</nav>
{% endif %}
