{% assign min_height = block.settings.mega_menu_min_height %}
{% assign menu_bg_color = block.settings.mega_menu_bg_color %}

<div class="dropdown-menu dropdown-menu-tabs column-4" style="background: {{ menu_bg_color }};">
  <div class="row">

    <div class="mm-tab-col-title col-lg-3">
      <ul class="tab-title">
        {% assign j = 0 %}
        
        {% for i in (1..7) %} 
          {% assign _showTab = 'show_mega_menu_tab_' | append: i %}
          {% if block.settings[_showTab] %}
            {% assign j = j | plus: 1 %}
            {% assign _tabTitle = 'mega_menu_tab_title_' | append: i %}
            <li data-id="mm-tabs-{{ i }}" class="title-item{% if j == 1 %} active{% endif %} title-item-{{ j }}">{{ block.settings[_tabTitle] }}</li>
          {% endif %}
        {% endfor %}

      </ul>
    </div>

    <div class="mm-tab-col-content col-lg-9" style="min-height: {{min_height}}px;">
      {% assign j = 0 %}

      {% for i in (1..7) %}
        {% assign _showTab = 'show_mega_menu_tab_' | append: i %}

        {% if block.settings[_showTab] %}
          {% assign j = j | plus: 1 %}

          <div class="tab-content-inner{% if j == 1 %} active{% endif %} mm-tabs-{{ i }}" id="mm-tabs-{{ i }}">
            <div class="row">
              {% for k in (1..4) %}
                {% assign _colTab = 'mega_menu_tab_' | append: i | append: '_col_' | append: k %}
                {% assign _colTabWidth = 'mega_menu_tab_' | append: i | append: '_width_col_' | append: k %}
                {% assign _colTabTitle = 'mega_menu_tab_' | append: i | append: '_title_col_' | append: k %}
                {% assign _enableColTabTitle = 'mega_menu_tab_' | append: i | append: '_image_title_col_' | append: k %}
                {% assign _colTabLink = 'mega_menu_tab_' | append: i | append: '_link_col_' | append: k %}

                <div class="col-item {% if block.settings[_colTabWidth] == 0 %}col{% else %}col-lg-{{ block.settings[_colTabWidth] }}{% endif %}">
                  {% case block.settings[_colTab] %}

                    {% when 'menu' %}
                      {% assign _colTabLL = 'mega_menu_tab_' | append: i | append: '_ll_col_' | append: k %}

                      <div class="dropdown mega-sub-link{% if block.settings[_colTabTitle] == blank %} no-title-0{% endif %}">
                        <a href="{{ block.settings[_colTabLink] }}"{% if block.settings[_enableColTabTitle] %} class="d-lg-none"{% endif %}>
                          <span>{{ block.settings[_colTabTitle] }}</span>
                        </a>

                        <span class="expand"></span>

                        <ul class="m-list dropdown-menu dropdown-menu-sub">
                          {% for ml in linklists[block.settings[_colTabLL]].links %}
                            <li><a href="{{ ml.url }}">{{ ml.title }}</a></li>
                          {% endfor %}
                        </ul>
                      </div>

                    {% when 'multi-menu' %}
                      {% assign _colTabLL = 'mega_menu_tab_' | append: i | append: '_ll_col_' | append: k %}

                      {% for ml in linklists[block.settings[_colTabLL]].links %}
                        {% assign submenu = ml.title | handleize %}

                        {% if linklists[submenu].links.size > 0 %}
                          <div class="dropdown mega-sub-link">
                            <a href="{{ ml.url }}" class="dropdown-link">
                              <span>{{ ml.title }}</span>
                            </a>

                            <span class="expand"></span>

                            <ul class="dropdown-menu dropdown-menu-sub">
                              {% for l in linklists[submenu].links %}
                                <li><a href="{{ l.url }}">{{ l.title }}</a></li>
                              {% endfor %}
                            </ul>
                          </div>
                  
                        {% else %}
                          <div class="mega-sub-link"><a href="{{ ml.url }}"><span>{{ ml.title }}</span></a></div>
                        {% endif %}

                      {% endfor %}
                  
                      {% when 'image' %}

                        <div class="dropdown banners mega-sub-link{% if block.settings[_colTabTitle] == blank %} no-title-0{% endif %}">
                          <a href="{{ block.settings[_colTabLink] }}"{% if block.settings[_enableColTabTitle] %} class="d-lg-none"{% endif %}>
                            <span>{{ block.settings[_colTabTitle] }}</span>
                          </a>

                          <span class="expand"></span>

                          <ul class="dropdown-menu dropdown-menu-sub">
                            {% assign _colTabImage = 'mega_menu_tab_' | append: i | append: '_image_col_' | append: k %}
                            {% assign _colTabImageSize = 'mega_menu_tab_' | append: i | append: '_image_size_col_' | append: k %}
                            {% assign _colTabImageLink = 'mega_menu_tab_' | append: i | append: '_image_link_col_' | append: k %}

                            <li>
                              <a href="{{ block.settings[_colTabImageLink] }}"{% if _lazyload %} class="lazyload waiting"{% endif %}>
                                <img {% if _lazyload %} class="lazyload" data-{% endif %}src = "{{ block.settings[_colTabImage] | img_url: block.settings[_colTabImageSize] }}" alt="" />
                              </a>
                            </li>
                          </ul>

                        </div>

                  {% endcase %}

                </div>

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

        {% endif %}

      {% endfor %}

    </div>

  </div>
</div>