{%- assign collection = collections[section.settings.collection] -%}
{%- assign product_limit = section.settings.product_limit -%}

<div class="home_hot_products" id="hot-pro{{ section.id }}">
  <div class="page-width hot_wrapper">
    {% if section.settings.title != blank %}
    <div class="section-header text-center animatable fadeInLeftBig animate">
      <h1>{{ section.settings.title }}</h1>
    </div>
    {% endif %}
    <div class="section_content_container">
      <div class="section_wrap">
        <div class="left_content">
          <div class="coll_banner animatable zoomIn animate">
            <a href="{{ section.settings.image_url }}">
              {% if section.settings.image != blank %}
              <img class="lazyload" data-src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.product_title }}" />
              {% else %}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              {% endif %}
              {% if section.settings.product_title != blank %}
              <h4 class="title">{{ section.settings.product_title }}</h4>
              {% endif %}
            </a>
          </div>
        </div>
        <div class="right_content animatable fadeInRightBig animate">
          <ul class="list-view-items">
            {% for product in collection.products limit: product_limit %}
            <li class="list-view-item">
              {% include 'hot-product-card-list', product: product, show_vendor: section.settings.show_vendor %}
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Produtos mais vendidos",
    "settings": [
		{
			"type": "text",
			"id": "title",
			"label": "Título",
			"default": "PRODUTOS QUENTES"
		},
		{
			"type": "image_picker",
			"id": "image",
			"label": "Imagem da esquerda",
			"info": "Tamanho da imagem de upload: 375x500"
		},
		{
			"type": "url",
			"id": "image_url",
			"label": "URL da imagem"
		},
		{
			"type": "text",
			"id": "product_title",
			"label": "Título",
			"default": "PRODUTOS DA SEMANA"
		},
		{
            "id": "collection",
            "type": "collection",
            "label": "Coleção"
        },
		{
            "type": "range",
            "id": "product_limit",
            "label": "Limite de produtos",
            "min": 3,
            "max": 12,
            "step": 3,
            "default": 9
        }
	],
	"presets": [
		{
			"name": "Produtos quentes",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
