{%- assign cross_sell_type = cross_sell_type | default: 'required' -%}
{%- assign variant = product.selected_or_first_available_variant -%}
{%- if variant.metafields.partbot.cross_sell_products -%}
  {%- assign cross_sell_products = variant.metafields.partbot.cross_sell_products.value -%}
  {% if cross_sell_type != 'all' %}
    {%- assign cross_sell_products = cross_sell_products.products | where: 'relationship_type', cross_sell_type -%}
  {% else %}
    {%- assign cross_sell_products = cross_sell_products.products -%}
  {% endif %}

  {%- if cross_sell_products.size > 0 -%}
    <div class="mt-6 mb-3">
      You might want {{ cross_sell_products.size | pluralize: 'this', 'these' }}!
    </div>
    <div class="relative overflow-x-scroll w-full">
      <div class="partbot-cross-sell-products-container">
        {% for item in cross_sell_products %}
          {%- assign csp = all_products[item.shopify_product.handle] -%}
          {% if csp.id != blank %}
            <div class="partbot-cross-sell-product">
              <div class="relative">
                <a href="{{csp.url}}">
                  <img src="{{csp.featured_image | img_url: '200x200' }}" alt="{{csp.featured_image.alt}}">
                </a>
                {%- if item.relationship_type == 'required' -%}
                  <div class="bg-red-600 inline-block whitespace-nowrap rounded-[2px] text-gray-100 text-[10px] leading-4 px-2 py-0.5 absolute -top-1 -left-1">
                    Recommended
                  </div>
                {%- endif -%}
                <div class="partbot-cross-sell-product-title text-xs">
                  {{ csp.title | truncate: 60, '...' }}
                </div>
              </div>
              <div>
                <div class="text-xs mt-2 font-medium">
                  {% if csp.price_varies %}
                    From: {{ csp.price | money }}
                  {% else %}
                    {{ csp.price | money }}
                  {% endif %}
                </div>
                {% comment %} add to cart button {% endcomment %}
                {%- if csp.available -%}
                  <form action="/cart/add" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="id" value="{{csp.variants[0].id}}">
                    <input type="hidden" name="quantity" value="1">
                    <button
                      type="submit"
                      data-btn-addtocart
                      class="partbot-add-to-cart-button"
                    >
                      Add to cart
                    </button>
                  </form>
                {%- else -%}
                  <div class="partbot-add-to-cart-button">
                    Sold out
                  </div>
                {%- endif -%}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  {%- endif -%}
{%- endif -%}