{% macro main_menu(menu_items) %}
    {% import _self as menu %}

    <ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
    {% for mi in menu_items %}
    {% if is_granted(mi.getACLKey) %}
        {% if  mi.hasChildren and mi.isSelected %}
        <li class="m-menu__item  m-menu__item--submenu m-menu__item--open m-menu__item--expanded" aria-haspopup="true"  data-menu-submenu-toggle="hover">
        {% elseif mi.hasChildren %}
        <li class="m-menu__item  m-menu__item--submenu" aria-haspopup="true"  data-menu-submenu-toggle="hover">
        {% elseif mi.isSelected %}
        <li class="m-menu__item m-menu__item--active" aria-haspopup="true" >
        {% else %}
        <li class="m-menu__item " aria-haspopup="true" >
        {% endif %}
            <a href="{{ mi.getLink }}" class="m-menu__link{% if mi.hasChildren %} m-menu__toggle{% endif %}">
                <i class="m-menu__link-icon {{ mi.getIcon }}"></i>
                <span class="m-menu__link-title">
                    <span class="m-menu__link-wrap">
                        <span class="m-menu__link-text">
                            {{ mi.getLabel }}
                        </span>
                    </span>
                </span>
                {% if mi.hasChildren %}
                <i class="m-menu__ver-arrow la la-angle-right"></i>
                {% endif %}
            </a>
            {% if mi.hasChildren %}
            {{ menu.sub_menu(mi.getChildren) }}
            {% endif %}
        </li>
    {% endif %}
    {% endfor %}
    </ul>
{% endmacro %}

{% macro sub_menu(menu_items) %}
    {% import _self as menu %}
    <div class="m-menu__submenu ">
        <span class="m-menu__arrow"></span>
        <ul class="m-menu__subnav">
            {% for mi in menu_items %}
            {% if is_granted(mi.getACLKey) %}
                {% if mi.isSelected %}
                <li class="m-menu__item m-menu__item--active" aria-haspopup="true" >
                {% else %}
                <li class="m-menu__item " aria-haspopup="true" >
                {% endif %}
                    <a  href="{{ mi.getLink }}" class="m-menu__link ">
                        <i class="m-menu__link-bullet m-menu__link-bullet--dot">
                            <span></span>
                        </i>
                        <span class="m-menu__link-text">
                            {{ mi.getLabel }}
                        </span>
                    </a>
                </li>
            {% endif %}
            {% endfor %}
        </ul>
    </div>
{% endmacro %}