<div class="menu">
  {%
    if (categories)
    or ((menu_departamentos == 'enable')
    or (wg24_main_menu_link_home == 'enable')
    or (has_gift_list)
    or (has_comparation_list)
    or (wg24_l_show_custom_htmlm == "enable")
    or (wg24_l_show_custom_htmlm == constant('Type_Status::Tp_Habilitado'))
    or (custom_links))
  %}
    <nav id="nav" class="menu js-menu"  data="{{wg24_submenu_width}}">
      <div class="menu__mask js-menu__mask"></div>

      <div hidden class="js-selector_indicator_color">{{menu_selector_indicator_color}}</div>
      <div hidden class="js-menu_typography">{{menu_typography}}</div>

      <div class="menu__wrapper js-menu__wrapper between-xs flex-contentCenter {{ not menu_position_full ? 'center' : '' }} {{ menu_divider ? 'menu__wrapper--divided' : '' }}">

        <!-- Controle do slider -->
        <div class="menu__item menu__item--prev js-menu__item--prev hidden">
          <div class="menu__content" title="Categorias anteriores">
            <i class="menu__icon fas fa-angle-left"></i>
          </div>
        </div>

        <div class="menu__container js-menu__container {{ wg24_main_menu_link_home == 'enable' ? 'has-home' : '' }} 
        {{ wg24_main_menu_link_home_display == 'icon' ? 'icon' : '' }}">
          {% if wg24_main_menu_link_home == 'enable' %}<!-- Home -->
            <div class="menu__item menu-item-border js-menu__item">
              <a class="menu__content" href="{{ home }}" title="Página inicial">
                {% if wg24_main_menu_link_home_display == 'icon' %}
                  <i class="menu__icon fas fa-home hidden-sm-down"></i>
                {% endif %}
                <span class="menu__text{% if wg24_main_menu_link_home_display == 'icon' %} hidden-sm-up{% endif %}">
                    {{ text_home }}
                  </span>
              </a>
            </div>
          {% endif %}

          {% if menu_departamentos == 'enable' %}<!-- Departamentos -->
            <div class="menu__item menu-item-border js-menu__item{% if menu_departamentos_only_mobile %} hidden-sm-up{% endif %}">
              <div class="menu__content menu__content--departments">
                {% if menu_selector %}
                  <span class="menu__text {% if menu_selector_indicator %}menu__underline {% endif %}">{{ text_menu_departamento }}</span>
                    <i class="menu__icon menu__icon--mobile fas fa-angle-right"></i>
                    {% if menu_selector_indicator == false %}
                      <i class="menu__icon menu__icon--desktop fas fa-angle-down" style="margin-left: 0.3rem"></i>
                    {% endif %}
                {% else %}
                  <span class="menu__text">{{ text_menu_departamento }}</span>
                {% endif %}
              </div>

              <div class="submenu js-submenu submenu--departments first">
                {% for item in departamentos|slice(0, 7) %}
                  <a class="submenu__item submenu__item--full" href="{{ item.href }}">
                    <span class="submenu__text submenu__text--second {% if menu_style_subcategory %} submenu__list {% endif %}">{{ item.name }}</span>
                    {% if item.children %}
                      <i class="submenu__icon submenu__icon--second fas fa-angle-right"></i>
                    {% endif %}
                  </a>
                  {% if item.children %}
                    <div class="submenu__content js-submenu__content submenu__content--departments {{wg24_submenu_width == '0' ? 'all-full-screen' : 'normal'}}">
                      <div class="submenu__item submenu__item--back js-submenu__item--back">
                        <i class="submenu__icon fas fa-angle-left"></i>
                        <span class="submenu__text submenu__text--third">voltar</span>
                      </div>
                      {% if wg24_submenu_text == 'enable' %}
                        <a href="{{ item.href }}" class="submenu__item submenu__item--header js-submenu__item">
                          <span class="submenu__text submenu__text--first ">{{ item.name }}</span>
                        </a>
                      {% endif %}
                      {% for children in item.children %}
                       <div class = "submenu__item-wrapper">
                        <a class="submenu__item js-submenu__item" href="{{ children.href }}">
                          <span class="submenu__text submenu__text--second {% if menu_style_subcategory %} submenu__list {% endif %}">{{ children.name }}</span>
                        </a>
                        {% if children.subchildren %}<!-- Terceiro Nível -->
                         <div class="submenu__subchildren">
                          {% for subchild in children.subchildren|slice(0, 5) %}
                            <a class="submenu__item js-submenu__item" href="{{ subchild.href }}">
                              <span class="submenu__text submenu__text--third {% if menu_style_subcategory %} submenu__list {% endif %}">{{ subchild.name }}</span>
                            </a>
                          {% endfor %}
                          {% if children.subchildren|length > 5 %}
                            <a class="submenu__item js-submenu__item" href="{{ children.href }}">
                              <span class="submenu__text submenu__text--third submenu__text submenu__text--italic {% if menu_style_subcategory %} submenu__list {% endif %}">{{ text_see_all }}</span>
                            </a>
                          {% endif %}
                          </div>
                         {% endif %}
                        </div>
                      {% endfor %}
                    </div>
                  {% endif %}
                {% endfor %}

                {% if departamentos|length > 7 %}
                  <div class="submenu__item submenu__item--full">
                    <span class="submenu__text submenu__text--second submenu__text--italic {% if menu_style_subcategory %} submenu__list {% endif %}">{{ text_see_all }}</span>
                    <i class="submenu__icon submenu__icon--second fas fa-angle-right"></i>
                  </div>
                  <div class="submenu__content js-submenu__content submenu__content--departments {{wg24_submenu_width == '0' ? 'all-full-screen' : 'normal'}}">
                    <div class="submenu__item submenu__item--back js-submenu__item--back">
                      <i class="submenu__icon fas fa-angle-left"></i>
                      <span class="submenu__text submenu__text--third">voltar</span>
                    </div>
                    {% if wg24_submenu_text == 'enable' %}
                      <div class="submenu__item submenu__item--header">
                        <span class="submenu__text submenu__text--first">{{ text_menu_departamento }}
                      </div>
                    {% endif %}
                    {% for item in departamentos %}
                      <a class="submenu__item" href="{{ item.href }}">
                        <span class="submenu__text submenu__text--second {% if menu_style_subcategory %} submenu__list {% endif %}">{{ item.name }}</span>
                      </a>
                      {% if item.children %}
                        <div class="submenu js-submenu">
                          <div class=" js-submenu__content submenu__content--departments">
                            <div class="submenu__item submenu__item--back js-submenu__item--back">
                              <i class="submenu__icon fas fa-angle-left"></i>
                              <span class="submenu__text submenu__text--third">voltar</span>
                            </div>
                            <a href="{{ item.href }}" class="submenu__item submenu__item--header js-submenu__item">
                              <span class="submenu__text submenu__text--first {% if menu_style_subcategory %} submenu__list {% endif %}">{{ item.name }}</span>
                            </a>
                            {% for children in item.children %}
                              <a class="submenu__item js-submenu__item" href="{{ children.href }}">
                                <span class="submenu__text submenu__text--second {% if menu_style_subcategory %} submenu__list {% endif %}">{{ children.name }}</span>
                              </a>
                              {% if children.subchildren %}<!-- Terceiro Nível -->
                                {% for subchild in children.subchildren|slice(0, 5) %}
                                  <a class="submenu__item js-submenu__item" href="{{ subchild.href }}">
                                    <span class="submenu__text submenu__text--third {% if menu_style_subcategory %} submenu__list {% endif %}">{{ subchild.name }}</span>
                                  </a>
                                {% endfor %}
                                {% if children.subchildren|length > 5 %}
                                  <a class="submenu__item js-submenu__item" href="{{ children.href }}">
                                    <span class="submenu__text submenu__text--third submenu__text submenu__text--italic {% if menu_style_subcategory %} submenu__list {% endif %}">{{ text_see_all }}</span>
                                  </a>
                                {% endif %}
                              {% endif %}
                            {% endfor %}
                          </div>
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                {% endif %}
              </div>

            </div>
            <hr class="menu__divider">
          {% endif %}

          {% if categories %}<!-- Categorias -->
            {% for category in categories %}
              <div class="menu__item menu-item-border js-menu__item{% if menu_departamentos == 'enable' %} menu__item--hidden{% endif %}">
                <a class="menu__content" href="{{ category.href }}">
                  {% if menu_selector %}
                    <span class="menu__text {% if menu_selector_indicator %}menu__underline {% endif %}">{{ category.name }}</span>
                    {% if category.children %}
                      <i class="menu__icon menu__icon--mobile fas fa-angle-right"></i>
                      {% if menu_selector_indicator == false %}
                        <i class="menu__icon menu__icon--desktop fas fa-angle-down" style="margin-left: 0.3rem"></i>
                      {% endif %}
                    {% endif %}
                   {% else %}
                    <span class="menu__text">{{ category.name }}</span>
                   {% endif %}
                </a>

                {% if category.children %}
                  <div class="submenu js-submenu">
                    {% if wg24_exibe_imagens_categorias_menu and category.image %}<!-- Imagem da categoria -->
                      <div class="submenu__showcase">
                        <img src="{{ category.image }}" class="submenu__image">
                      </div>
                    {% endif %}
                    {% if wg24_submenu_text == 'enable' %}
                      <div class="submenu__content js-submenu__content">
                    {% else %}
                      <div id="submenu_txt" class="submenu__content js-submenu__content">
                    {% endif %}

                      <div class="submenu__item submenu__item--back js-submenu__item--back">
                          <i class="submenu__icon fas fa-angle-left"></i>
                          <span class="submenu__text submenu__text--third">voltar</span>
                      </div>

                        {% if wg24_submenu_text == 'enable' %}
                          <a class="submenu__item submenu__item--header" href="{{ category.href }}" >
                            <span class="submenu__text submenu__text--first">{{ category.name }}</span>
                          </a>
                        {% endif %}

                      {# {% for children in category.children %}
                         <div class="submenu__item-wrapper">
                        <a class="submenu__item" href="{{ children.href }}">
                          <span class="submenu__text submenu__text--second {% if menu_style_subcategory %} submenu__list {% endif %}">{{ children.name }}</span>
                        </a>
                        {% if  children.subchildren %}
                        <div class="submenu__subchildren">
                          {% for subchild in children.subchildren|slice(0, 5) %}
                            <a class="submenu__item" href="{{ subchild.href }}">
                              <span class="submenu__text submenu__text--third {% if menu_style_subcategory %} submenu__list {% endif %}">{{ subchild.name }}</span>
                            </a>
                          {% endfor %}
                          {% if children.subchildren|length > 5 %}
                            <a class="submenu__item" href="{{ children.href }}">
                              <span class="submenu__text submenu__text--third submenu__text submenu__text--italic {% if menu_style_subcategory %} submenu__list {% endif %}">{{ text_see_all }}</span>
                            </a>
                          {% endif %}
                           </div>
                        {% endif %}
                         </div>
                      {% endfor %} #}
                    </div>
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          {% endif %}

          <!-- Menu Personalizado -->
          {% if wg24_l_show_custom_htmlm == "enable" or wg24_l_show_custom_htmlm == constant('Type_Status::Tp_Habilitado') %}
            <hr class="menu__divider">
            <div class="menu__item js-menu__item">
              <div class="menu__content">
                <span class="menu__text">{{ (wg24_custom_item_menu) ? wg24_custom_item_menu : 'Personalizado' }}</span>
                <i class="menu__icon menu__icon--mobile fas fa-angle-right"></i>
                {% if menu_selector %}
                  <i class="menu__icon menu__icon--desktop fas fa-angle-down"></i>
                {% endif %}
              </div>
              <div class="submenu js-submenu">
                <div class="submenu__item submenu__item--back js-submenu__item--back">
                  <i class="submenu__icon fas fa-angle-left"></i>
                  <span class="submenu__text submenu__text--third">voltar</span>
                </div>
                {{ menu_custome_con }}
              </div>
            </div>
          {% endif %}

          {% if custom_links %}
            <hr class="menu__divider">
            {% for link in custom_links %}<!-- Links customizados -->
              <div class="menu__item js-menu__item">
                <a class="menu__content" href="{{ link.link }}">
                  {% if link.icon %}
                    {% if '/' in link.icon %}
                      <img src="{{ link.icon }}" alt="" width="16" height="16" class="menu__icon">
                    {% else %}
                      <i class="menu__icon {{ link.icon }}"></i>
                    {% endif %}
                  {% endif %}
                  <span class="menu__text">{{ link.text }}</span>
                  {% if link.items is defined and link.items %}
                    <i class="menu__icon menu__icon--mobile fas fa-angle-right"></i>
                    {% if menu_selector %}
                      <i class="menu__icon menu__icon--desktop fas fa-angle-down"></i>
                    {% endif %}
                  {% endif %}
                </a>

                {% if link.items is defined and link.items %}
                  <div class="submenu js-submenu" style="border-radius: {{menu_border_radius}}">
                    <div class="submenu__content js-submenu__content">
                      <div class="submenu__item submenu__item--back js-submenu__item--back">
                        <i class="submenu__icon fas fa-angle-left"></i>
                        <span class="submenu__text submenu__text--third">voltar</span>
                      </div>

                      <a class="submenu__item submenu__item--header" href="{{ link.link }}">
                        {% if link.icon %}
                          {% if '/' in link.icon %}
                            <img src="{{ link.icon }}" alt="" width="16" height="16" class="submenu__icon">
                          {% else %}
                            <i class="submenu__icon {{ link.icon }}"></i>
                          {% endif %}
                        {% endif %}
                        <span class="submenu__text submenu__text--first">{{ link.text }}</span>
                      </a>

                      {% for sublink in link.items %}
                        <a class="submenu__item" href="{{ sublink.link }}">
                          {% if sublink.icon %}
                            {% if '/' in sublink.icon %}
                              <img src="{{ sublink.icon }}" alt="" width="16" height="16" class="submenu__icon submenu__icon--second">
                            {% else %}
                              <i class="submenu__icon submenu__icon--second {{ sublink.icon }}"></i>
                            {% endif %}
                          {% endif %}
                          <span class="submenu__text submenu__text--second">{{ sublink.text }}</span>
                        </a>
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          {% endif %}
        </div>

        <!-- Controle do slider -->
        <div class="menu__item menu__item--next js-menu__item--next hidden">
          <div class="menu__content" title="Proximas categorias">
            <i class="menu__icon fas fa-angle-right"></i>
          </div>
        </div>
      </div>
    </nav>
  {% endif %}
</div>