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

  <div class="container has-no-side-gutter">
   
    <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 }}>
     
      {% comment %} collection list {% endcomment %}
      <div class="mega-menu__content">
        {% if block.settings.collection != blank %}

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

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

          <div class=" product_item">
            {% comment %} Product image {% endcomment %}
            <a href="{{ product.url }}" class="mega-menu__image">
              <img class="lazyload" data-src="{{product.featured_image | img_url:"large"}}" alt="{{product.featured_image.alt}}"/>
            </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 %}
        
        {% else %}

        {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}

        <p class="menu__heading mega-menu__content">
          <a href="{{ product.url }}">{{ 'homepage.onboarding.product_title' | t }}</a>
        </p>

        {% endif %}
        
      </div>
      {% if block.settings.collection != blank %}
       <div class="collection_button">
          <a href="{{ block.settings.button_url }}">{{ block.settings.button_title }}</a>
        </div>
      {% endif %}
    
    </div>
      
  </div>
</div>