{{ 'cards.css' | asset_url | stylesheet_tag }}
{% comment %} Create liquid variable for collection {% endcomment %}
{% assign upsellCollection = section.settings.upsell_collection %}
{% if cart.item_count != 0 %}
<div class="c-upsell js-upsell">
  <div class="upsell_wrapper">
    {% if section.settings.title != blank %}
    <div class="title">
      <h2>{{ section.settings.title }}</h2>
      <div class="line-line-gray">
        <div class="line-line-color"></div>
      </div>
    </div>
    {% endif %}

    <style type="text/css">
      .grid-astron-card span.price-item--regular {
        color: {{ section.settings.price_txt }}
      }
    </style>

    {% comment %} Use Product ID as Data Attribute which we will use for Add to Cart Event {% endcomment %}
    <ul class="grid grid--uniform grid--view-items grid-astron-card-wrapper">
      {% for product in collections[upsellCollection].products limit: 4 %}
      <li class="grid__item small--one-half medium-up--one-quarter grid-astron-card">
        {% include 'product-card-grid', product: product, show_vendor: section.settings.show_vendor %}
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endif %}


{% schema %}
  {
    "name": "Produto Crossell",
    "settings": [
	  {
        "type": "text",
        "id": "title",
        "label": "Título",
		"default": "Quem comprou, comprou também"
      },
	  {
        "type": "collection",
        "id": "upsell_collection",
        "label": "Adicionar coleção"
      },
      {
        "type": "checkbox",
        "id": "add_cart_show",
        "label": "Adicionar ao carrinho Ativar/Desativar",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "swatch_image",
        "label": "Amostra de imagem Ativar/Desativar",
        "default": true
      }
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
