<div class="animatable fadeInUp mega-menu mega-menu--header-classic" data-parent-link="{{ section.settings.parent_link | downcase | replace: ' ', '-' }}">

  <div class="container has-no-side-gutter">
    {% for block in section.blocks %}
    <div class="column mega-menu__block block__{{ block.id }} block__{{ block.type | replace: '_', '-' }} 
                {% include 'column-width', value: section.blocks.size %} medium-down--one-half" {{ block.shopify_attributes }} style="width: {{ block.settings.block_range }}%;">

      {% if block.type == 'coll_menu' %}
      {% comment %} Menu {% endcomment %}
      <div class="mega-menu__content">
        {% if block.settings.coll_menu != blank %}
        {% include 'mega-menu_linklist', menu_link: block.settings.coll_menu, link_setting: block.settings.coll_menu %}
        {% else %}
        {% comment %}<p class="menu__heading">{{ 'home_page.onboarding.menu_title' | t }}</p>
        <p>{{ 'home_page.onboarding.no_content' | t }}</p> {% endcomment %}
        {% endif %}
      </div>

      {% elsif block.type == 'coll_menu_without_title' %}
      {% comment %} Menu {% endcomment %}
      <div class="mega-menu__content">
        {% if block.settings.coll_menu_without_title != blank %}
        {% include 'mega-menu_linklist_title', menu_link: block.settings.coll_menu_without_title, link_setting: block.settings.coll_menu_without_title %}
        {% else %}
        {% comment %}<p class="menu__heading">{{ 'home_page.onboarding.menu_title' | t }}</p>
        <p>{{ 'home_page.onboarding.no_content' | t }}</p> {% endcomment %}
        {% endif %}
      </div>

      {% elsif block.type == 'coll_product' %}

      {% assign product = collections[block.settings.collection].products %}

      {% for product in collections[block.settings.collection].products limit: block.settings.pro_limit %}

      <div class=" product_item">
        {% comment %} Product image {% endcomment %}
        <a href="{{ product.url }}" class="mega-menu__image">
          <div class="gallery" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
            <img id="img-{{ product.id }}"
                 class="gallery_image lazyload"
                 data-src="{{ product.featured_image | img_url: 'master' }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ product.title | escape }}"
                 style="position: absolute; top: 0;">
          </div>
        </a>

        {% comment %} Product title {% endcomment %}
        <p class="menu__heading">
          <a href="{{ product.url }}">{{ product.title }}</a>
        </p>

        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

        {% comment %} Product Price {% endcomment %}
        <p class="product_price">
          {% if product.compare_at_price != blank %}
          <span class="regular_price">{{ product.price | money_without_trailing_zeros }}</span>
          <span class="compare_price">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
          {% else %}
          <span class="regular_price">{{ product.price | money_without_trailing_zeros }}</span>
          {% endif %}
        </p>
      </div>
      {% endfor %}
      {% if block.settings.button_title != blank %}
      <div class="collection_button">
        <a href="{{ block.settings.button_url }}">{{ block.settings.button_title }}</a>
      </div>
      {% endif %}

      {% elsif block.type == 'collection_top_banner' %}

      {% comment %} Menu {% endcomment %}
      <div class="mega-menu__content">
        {% if block.settings.coll_linklist != blank %}
        <div class="menu_list">
          {% if block.settings.coll_img != blank %}
          <a class="banner_img" href="{{ block.settings.coll_img_url }}">
            <div class="gallery" style="padding-top:{{ 1 | divided_by: block.settings.coll_img.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
              <img id="img-{{ block.id }}"
                   class="gallery_image lazyload"
                   data-src="{{ block.settings.coll_img | img_url: 'master' }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ block.settings.coll_img.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ block.settings.coll_img.alt | escape }}"
                   style="position: absolute; top: 0;">
            </div>
          </a>
          {% endif %}
          {% include 'mega-menu_linklist', menu_link: block.settings.coll_linklist, link_setting: block.settings.coll_linklist %}
        </div>
        {% endif %}

      </div>

      {% elsif block.type == 'collection_bottom_banner' %}

      {% comment %} Menu {% endcomment %}
      <div class="mega-menu__content">
        {% if block.settings.coll_linklist != blank %}
        <div class="menu_list">
          {% include 'mega-menu_linklist', menu_link: block.settings.coll_linklist, link_setting: block.settings.coll_linklist %}
          {% if block.settings.coll_img != blank %}
          <a class="banner_img" href="{{ block.settings.coll_img_url }}">
            <div class="gallery" style="padding-top:{{ 1 | divided_by: block.settings.coll_img.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
              <img id="img-{{ block.id }}"
                   class="gallery_image lazyload"
                   data-src="{{ block.settings.coll_img | img_url: 'master' }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ block.settings.coll_img.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ block.settings.coll_img.alt | escape }}"
                   style="position: absolute; top: 0;">
            </div>
          </a>
          {% endif %}
        </div>
        {% endif %}

      </div>

      {% elsif block.type == 'coll_banner_with_title' %}

      <div class="mega-menu__content">
        <div class="banner_item">
          <a href="{{ block.settings.coll_img_url }}" class="image_link">
            {% if block.settings.coll_img != blank %}
            <div class="gallery" style="padding-top:{{ 1 | divided_by: block.settings.coll_img.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
              <img id="img-{{ block.id }}"
                   class="gallery_image lazyload"
                   data-src="{{ block.settings.coll_img | img_url: 'master' }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ block.settings.coll_img.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ block.settings.coll_img.alt | escape }}"
                   style="position: absolute; top: 0;">
            </div>
            {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </a> 
          <a class="title" href="{{ block.settings.coll_img_url }}">{{ block.settings.coll_title }}</a>
        </div>
      </div>

      {% elsif block.type == 'coll_banner' %}

      <div class="mega-menu__content">
        <div class="banner_item">
          <a href="{{ block.settings.coll_img_url }}" class="image_link">
            {% if block.settings.coll_img != blank %}
            <div class="gallery" style="padding-top:{{ 1 | divided_by: block.settings.coll_img.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
              <img id="img-{{ block.id }}"
                   class="gallery_image lazyload"
                   data-src="{{ block.settings.coll_img | img_url: 'master' }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ block.settings.coll_img.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ block.settings.coll_img.alt | escape }}"
                   style="position: absolute; top: 0;">
            </div>
            {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </a> 
        </div>
      </div>

      {% elsif block.type == 'featured_product' %}
      {% comment %} Featured product {% endcomment %}
      <div class="mega-menu__content">
        {% if block.settings.featured_product != blank %}

        {% assign product = all_products[block.settings.featured_product] %}

        <div class=" product_item">
          {% comment %} Product image {% endcomment %}
          <a href="{{ product.url }}" class="mega-menu__image">
            <div class="gallery" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
              <img id="img-{{ product.id }}"
                   class="gallery_image lazyload"
                   data-src="{{ product.featured_image | img_url: 'master' }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.title | escape }}"
                   style="position: absolute; top: 0;">
            </div>
          </a>

          {% comment %} Product title {% endcomment %}
          <p class="menu__heading">
            <a href="{{ product.url }}">{{ product.title }}</a>
          </p>

          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

          {% comment %} Product Price {% endcomment %}
          <p class="product_price">
            {% if product.compare_at_price != blank %}
            <span class="regular_price">{{ product.price | money_without_trailing_zeros }}</span>
            <span class="compare_price">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
            {% else %}
            <span class="regular_price">{{ product.price | money_without_trailing_zeros }}</span>
            {% endif %}
          </p>
        </div>

        {% endif %}

      </div>

      {% endif %}
    </div>


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