{%
  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">
    <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 {{ not menu_position_full ? 'center' : '' }} {{ menu_divider ? 'menu__wrapper--divided' : '' }}">

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

      <div class="menu__container js-menu__container">

        {% if wg24_main_menu_link_home == 'enable' %}<!-- Home -->
        <div class="menu__item js-menu__item">
          <a class="menu__content" href="{{ home }}">
            {% 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 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">
              {% 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">
                    <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 ">{{ 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>
                {% 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">
                  <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>
                  <div class="submenu__item submenu__item--header">
                    <span class="submenu__text submenu__text--first">{{ text_menu_departamento }}
                  </div>
                  {% 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>
                      {% if item.children %}
                        <i class="submenu__icon submenu__icon--second fas fa-angle-right"></i>
                      {% endif %}
                    </a>
                    {% if item.children %}
                      <div class="submenu js-submenu">
                        <div class="submenu__content 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 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 %}
                  <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="{{ category.href }}">
                      <span class="submenu__text submenu__text--first">{{ category.name }}</span>
                    </a>
                    {% for children in category.children %}
                      <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 %}
                        {% 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 %}
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              {% endif %}
            </div>
          {% endfor %}
        {% endif %}

        {% if wg24_l_show_custom_htmlm == "enable"
          or wg24_l_show_custom_htmlm == constant('Type_Status::Tp_Habilitado')
        %}<!-- Menu Personalizado -->
          <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">
        <div class="menu__content">
          <i class="menu__icon fas fa-angle-right"></i>
        </div>
      </div>

    </div>
  </nav>
{% endif %}
