{%- liquid
  assign recommend_products = true


  if recommendations.products and recommendations.products_count > 0
    assign related_collection = recommendations
  endif


  for tag in product.tags
    if tag contains '_related'
      assign include_collection_handle = tag | split: '_' | last
      assign include_collection = collections[include_collection_handle]
      if include_collection != empty and include_collection.products_count > 0
        assign related_collection = include_collection
        assign recommend_products = false
        break
      endif
    endif
  endfor


  assign number_of_products = section.settings.related_count
-%}


{%- if section.settings.show_product_recommendations -%}
  <div
    id="Recommendations-{{ product.id }}"
    data-section-id="{{ product.id }}"
    data-section-type="product-recommendations"
    data-enable="{{ recommend_products }}"
    data-product-id="{{ product.id }}"
    data-url="{{ routes.product_recommendations_url }}"
    data-limit="{{ number_of_products }}">


    <div
      data-section-id="{{ product.id }}"
      data-subsection
      data-section-type="collection-grid"
      class="index-section">
      <div class="page-width">
        <header class="section-header">
          <h3 class="section-header__title">
            {{ section.settings.product_recommendations_heading }}
          </h3>
        </header>
      </div>


      <div class="page-width page-width--flush-small">
        <div class="grid-overflow-wrapper">
          {%- if recommend_products -%}
            <div class="product-recommendations-placeholder">
              {% comment %}
                This content is visually hidden and replaced when recommended products show up
              {% endcomment %}
              <div class="grid grid--uniform visually-invisible" aria-hidden="true">
                {%- render 'product-grid-item',
                  product: product,
                  quick_shop_enable: settings.quick_shop_enable
                -%}
              </div>
            </div>
          {%- endif -%}
          {%- if related_collection.products_count > 1 -%}
            <div class="product-recommendations">
              <div class="grid grid--uniform" data-aos="overflow__animation">
                {%- for product in related_collection.products limit: number_of_products -%}
                  {%- render 'product-grid-item',
                    product: product,
                    per_row: number_of_products,
                    quick_shop_enable: settings.quick_shop_enable
                  -%}
                {%- endfor -%}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- endif -%}


{% schema %}
  {
    "name": "Product recommendations",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_product_recommendations",
        "label": "Show dynamic recommendations",
        "info": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)",
        "default": true
      },
      {
        "type": "text",
        "id": "product_recommendations_heading",
        "label": "Heading",
        "default": "You may also like"
      },
      {
        "type": "range",
        "id": "related_count",
        "label": "Number of related products",
        "default": 5,
        "min": 2,
        "max": 6,
        "step": 1
      }
    ]
  }
{% endschema %}