{% if menu is not defined %}
    {% set menu = tabler_menu(app.request) %}
{% endif %}

{% if menu is defined and menu is not null %}
    {% if layout_type is not defined %}
        {% set layout_type = 'horizontal' %}
    {% endif %}
    <ul class="navbar-nav {{ navbar_class | default('') }}">
        {% for item in menu %}
            <li id="{{ item.identifier }}" class="nav-item{{ item.isActive ? ' active' : '' }}{{ item.hasChildren ? ' dropdown' : '' }}">
                <a {% if item.hasChildren %}
                        class="nav-link dropdown-toggle navbar-menu-{{ item.identifier }}" role="button"
                        data-bs-toggle="dropdown" data-bs-auto-close="{{ layout_type is same as "vertical" ? 'false' : 'outside' }}"
                        aria-expanded="{{ layout_type is same as 'vertical' ? 'true' : 'false' }}"
                    {% else %}
                        class="nav-link" href="{{ '/' in item.route ? item.route : (item.route is null ? '#' : path(item.route|tabler_route, item.routeArgs)) }}"
                    {% endif %}>
                    {{ _self.item_icon(item) }}
                    <span class="nav-link-title">{{ item.label|trans({}, item.translationDomain) }}</span>
                    {% if layout_type is same as 'horizontal' %}
                        {{ _self.item_badge(item) }}
                    {% endif %}
                </a>
                {{ _self.item_childs(item, layout_type) }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

{% macro item_childs(item, layout_type) %}
    {% if item.hasChildren %}
        <div class="dropdown-menu {{ layout_type is same as "vertical" and (item.isActive or item.isExpanded) ? 'show':'' }}" data-bs-popper="none">
            <div class="dropdown-menu-columns">
                <div class="dropdown-menu-column">
                    {% for child in item.children %}
                        {% if child.hasChildren %}
                            <div class="dropend">
                                <a class="dropdown-item dropdown-toggle {{ child.isActive ? 'active' : '' }} navbar-menu-{{ child.identifier }}" role="button"
                                   data-bs-toggle="dropdown" data-bs-auto-close="{{ layout_type is same as "vertical" ? 'false' : 'outside' }}"
                                   aria-expanded="{{ layout_type is same as 'vertical' ? 'true' : 'false' }}">
                                    {{ _self.item_icon(child) }}
                                    {{ child.label|trans({}, child.translationDomain) }}
                                    {{ _self.item_badge(child) }}
                                </a>
                                {{ _self.item_childs(child, layout_type) }}
                            </div>
                        {% else %}
                            {{ _self.child_item(child, loop.last) }}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
{% endmacro %}

{% macro child_item(child, isLast) %}
    {% if child.divider %}
        {% if not isLast -%}
            <hr class="dropdown-divider">
        {%- endif %}
    {% else %}
        <a class="dropdown-item {{ child.isActive ? 'active':'' }} navbar-menu-{{ child.identifier }}"
            {%- if not child.hasChildren %} href="{{ '/' in child.route ? child.route : (child.route is null ? '#' : path(child.route|tabler_route, child.routeArgs)) }}"{% endif %}>
            {{ _self.item_icon(child) }}
            {{ child.label|trans({}, child.translationDomain) }}
            {{ _self.item_badge(child) }}
        </a>
    {% endif %}
{% endmacro %}

{% macro item_icon(item) %}
    {% if item.icon %}
        <span class="nav-link-icon d-md-none d-lg-inline-block text-center">{{ tabler_icon(item.icon, false, item.icon) }}</span>
    {% endif %}
{% endmacro %}

{% macro item_badge(item) %}
    {% if item.badge is not null or item.badgeColor is not null %}
        <span class="badge badge-sm bg-{{ item.badgeColor|default('blue') }} text-uppercase ms-2">{{ item.badge }}</span>
    {% endif %}
{% endmacro %}