<div class="trending_products_container" style="background-color: {{ section.settings.bg_color }};">
  <div class="page-width">
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
    {% endif %}
    <div class="section_content">
      <div class="trending_container">
        <div class="trending_img_content">
          <div class="trending_item_images swiper-gallery">
            <div class="trending_img_items swiper-wrapper">
              {% for block in section.blocks %}
              <div class="trending_img_item swiper-slide">
                {% if block.settings.image != blank %}
                <div class="trending_img_wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
                  <img id="img{{ section.id }}"
                       class="feature-row__image lazyload"
                       data-src="{{ block.settings.image | img_url: 'master' }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ block.settings.image.alt | escape }}"
                       style="position: absolute; top: 0;">
                </div>
                {% else %}
                {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                {% endif %}
              </div>
              {% endfor %}
            </div>
          </div>
          <!-- buttons -->
          <div class="trending-button-prev swipe-arrow prev-arrow"></div>
          <div class="trending-button-next swipe-arrow next-arrow"></div>
        </div>
        <div class="trending_text_content">
          <div class="trending_item_texts swiper-text">
            <div class="trending_text_items swiper-wrapper">
              {% for block in section.blocks %}
              <div class="trending_text_item swiper-slide">
                <div class="trending_text">
                  {% if block.settings.title != blank %}
                  <h3 class="title">{{ block.settings.title }}</h3>
                  {% endif %}
                  {% if block.settings.content != blank %}
                  <div class="short_desc">
                    {{ block.settings.content }}
                  </div>
                  {% endif %}
                  {% if block.settings.btn_text != blank %}
                  <div class="btn_content">
                    <a class="btn" href="{% if block.settings.btn_link != blank %}{{ block.settings.btn_link }}{% else %}#{% endif %}">{{ block.settings.btn_text }}</a>
                  </div>
                  {% endif %}
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


{% schema %}
  {
    "name": "Produtos em alta",
	"class": "index-section",
    "settings": [
		{
			"type": "text",
			"id": "title",
			"label": "Cabeçalho",
			"default": "Produtos mais procurados em nossa loja"
		},
		{
			"type": "color",
			"id": "bg_color",
			"label": "Fundo",
			"default": "#F7F7F7"
		}
	],
	"blocks": [
		{
			"type": "trending_content",
			"name": "Conteúdo",
			"settings": [
				{
					"type": "image_picker",
					"id": "image",
					"label": "Imagem",
					"info":"Tamanho da imagem 1037 X 568"
				},
				{
					"type": "text",
					"id": "title",
					"label": "Título",
					"default": "Título do produto em destaque"
				},
				{
					"type": "textarea",
					"id": "content",
					"label": "Descrição curta",
					"default": "Escreva aqui os principais pontos a se destacar do produto. Lembre-se sempre de focar nos benefícios para conseguir vender a um preço maior!"
				},
				{
					"type": "text",
					"id": "btn_text",
					"label": "Texto botão",
					"default": "COMPRAR AGORA"
				},
				{
					"type": "url",
					"id": "btn_link",
					"label": "Link do botão"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Produtos em alta",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
