{% trans_default_domain 'front_ec_international' %}

{% set template = configuration.template %}
{% set webpack = 'front_' ~ template %}
{% set links = tree.main is defined ? tree.main : [] %}

{% if links %}

    {% set logos = menu.website|logos %}
    {% set logo = logos.logo is defined and logos.logo ? logos.logo : null %}

    <!-- .mega-menu-navigation -->
    <nav class="mega-menu-navigation navbar navbar-expand-md bg-light pr-0 pl-0">
        <div class="mega-menu-container {% if menu.size == 'container' %}container{% else %}container-fluid{% endif %}">

            {% if logo %}
                <a class="navbar-brand" href="{{ app.request.getSchemeAndHttpHost() }}" data-toggle="preloader">
                    <img data-src="{{ logo }}"
                         src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                         id="main-navigation-logo"
                         class="img-fluid lazyload"
                         title="{{ companyName }}"
                         alt="{{ companyName }}"
                         width="80"
                         height="80" />
                </a>
            {% endif %}

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mega-menu-nav-{{ menu.id }}" aria-controls="main-navigation-nav" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <div id="mega-menu-nav-{{ menu.id }}" class="collapse navbar-collapse">
                <ul class="navbar-nav mx-auto">

                    {% for link in links %}

                        {% set infos = link|linkMenu(tree) %}

                        {% if infos.online %}
                            <li class="nav-item{% if infos.children %} dropdown mega-dropdown{% endif %}">

                            <a class="nav-link waves-effect waves-dark d-inline-block cursor{% if infos.children %} dropdown-toggle{% endif %}{% if infos.active %} active{% endif %} {{ infos.class }}"
                               href="{% if infos.children %}#{% else %}{{ infos.path }}{% endif %}"
                               {% if infos.children %}data-toggle="dropdown"{% endif %}
                               aria-haspopup="{% if infos.children %}true{% else %}false{% endif %}"
                               aria-expanded="false">{{ infos.title }}</a>

                            {% if infos.children %}

                                <div class="dropdown-menu animated bounceInDown {{ infos.bgColor }}">
                                    <ul class="mega-dropdown-menu row reset">
                                        {% for col in infos.children %}

                                            {% set colInfos = col|linkMenu(tree) %}

                                            {% if colInfos.online %}
                                                <li class="col-lg-6 col-xl-3 {{ colInfos.bgColor }}">

                                                {% if colInfos.path %}
                                                    <h4 class="mb-4"{% if colInfos.active %} class="active"{% endif %}>
                                                        <a href="{{ colInfos.path }}" class="waves-effect waves-dark {{ colInfos.class }}">{{ colInfos.title }}</a>
                                                    </h4>
                                                {% endif %}

                                                {% if colInfos.children %}

                                                    {% for block in colInfos.children %}

                                                        {% set blockInfos = block|linkMenu(tree) %}

                                                        {% if blockInfos.title or blockInfos.path %}
                                                            <div class="nav-block-title{% if not loop.first %} mt-4{% endif %}">
                                                                {% if blockInfos.title %}
                                                                    <h5 class="mb-4"{% if blockInfos.active %} class="active"{% endif %}>
                                                                {% endif %}
                                                                    {% if blockInfos.path and blockInfos.online %}
                                                                        <a href="{{ blockInfos.path }}" class="waves-effect waves-dark {{ blockInfos.class }}{% if blockInfos.active %} active{% endif %}">
                                                                    {% endif %}
                                                                        {{ blockInfos.title }}
                                                                    {% if blockInfos.path and blockInfos.online %}
                                                                        </a>
                                                                    {% endif %}
                                                                {% if blockInfos.title %}
                                                                    </h5>
                                                                {% endif %}
                                                            </div>
                                                        {% endif %}

                                                        {% if blockInfos.children %}
                                                            <ul class="nav-block-link reset">
                                                                {% for blockLink in blockInfos.children %}
                                                                    {% set linkInfos = blockLink|linkMenu(tree) %}
                                                                    <li{% if linkInfos.active %} class="active"{% endif %}>
                                                                        {% if linkInfos.path and linkInfos.online %}
                                                                            <a href="{{ linkInfos.path }}" class="waves-effect waves-dark {{ linkInfos.class }}">
                                                                        {% endif %}
                                                                            {{ linkInfos.title }}
                                                                            {% if linkInfos.media %}
                                                                                <div class="nav-img-block mt-4">
                                                                                    {{ linkInfos.media|thumb }}
                                                                                </div>
                                                                            {% endif %}
                                                                        {% if linkInfos.path and linkInfos.online %}
                                                                            </a>
                                                                        {% endif %}
                                                                    </li>
                                                                {% endfor %}
                                                            </ul>
                                                        {% endif %}

                                                    {% endfor %}

                                                {% endif %}

                                            </li>
                                            {% endif %}

                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %}

                        </li>
                        {% endif %}

                    {% endfor %}

                </ul>
            </div>
        </div>
    </nav>
    <!-- \.mega-menu-navigation -->

{% endif %}