{{ 'cards.css' | asset_url | stylesheet_tag }}

<div class="home_bestsellers_collection">
  <div class="page-width">
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h1>{{ section.settings.title | escape }}</h1>
      {% if section.settings.short_desc != blank %}
      <p>{{ section.settings.short_desc }}</p>
      {% endif %}
    </div>
    {% endif %}

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

    {% case section.settings.grid %}
    {% when 2 %}
    {%- assign max_height = 530 -%}
    {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
    {%- assign max_height = 345 -%}
    {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
    {%- assign max_height = 250 -%}
    {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
    {%- assign max_height = 195 -%}
    {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
    {% endcase %}

    {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

    <ul class="grid grid--uniform grid--view-items grid-astron-card-wrapper">
      {% for product in collection.products limit: product_limit %}
      <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }} grid-astron-card">
        {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
      </li>
      {% else %}

      {% for i in (1..product_limit) %}
      <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        <div class="grid-view-item product-card">
          <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
            <span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
          </a>
          <div class="grid-view-item__image-wrapper">
            {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
            {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
          </div>
          <div class="h4 grid-view-item__title" aria-hidden="true">{{ 'homepage.onboarding.product_title' | t }}</div>
          {% include 'product-price' %}
        </div>
      </li>
      {% endfor %}
      {% endfor %}
    </ul>

    {% if section.settings.show_view_all %}
    <div class="text-center view_all_btn">
      <a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
    {% endif %}

  </div>
</div>


{% schema %}
{
  "name": "Coleção dos mais vendidos",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Cabeçalho",
      "default": "MAIS VENDIDOS"
    },
	  {
      "type": "textarea",
      "id": "short_desc",
      "label": "Descrição curta",
      "default": "Exemmplo de descrição, Adicione aqui sua descrição!"
    },
    {
      "id": "collection",
      "type": "collection",
      "label": "Coleção"
    },
	  {
      "type": "range",
      "id": "grid",
      "label": "Produtos por linha",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "rows",
      "label": "Linhas",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 1
    },
	  {
      "type": "checkbox",
      "id": "add_cart_show",
      "label": "Adicionar ao carrinho Ativar/Desativar",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Mostrar fornecedores de produtos",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "Mostrar botão 'Ver tudo'",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "Coleção dos mais vendidos",
      "category": "astron"
    }
  ]
}
{% endschema %}
