{% comment %} {{ 'cards.css' | asset_url | stylesheet_tag }} {% endcomment %}

<div class="collection_listing_container">
  <div class="page-width">
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>      
    </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 %}

    {% if section.settings.enable_slider == blank %}
    {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}
    {% endif %}    

    <div class="product_grid_container">
      <div class="product_items_container {% if section.settings.enable_slider != blank %}swiper-container{% endif %}"
      {% if section.settings.enable_slider != blank %}
        data-swiper='{
                          "slidesPerView": {{ section.settings.grid }},
                          "loop": true,
                          "autoplay": {"delay": 2000},
                          "speed": 1000,
                          "navigation": {
                            "nextEl": ".swiper-button-next-{{ section.id }}",
                            "prevEl": ".swiper-button-prev-{{ section.id }}"
                          },
                          "breakpoints": {
                             "1360": {
                               "slidesPerView": {{ section.settings.grid }}
                             },
                             "991": {
                               "slidesPerView": 4
                             },
                             "620": {
                               "slidesPerView": 3,
                        		"centeredSlides": false
                             },
                             "420": {
                               "slidesPerView": 2,
                               "centeredSlides": false
                             },
                             "0": {
                               "slidesPerView": 2,
                               "centeredSlides": false
                             }
                           }
                        }'
              {% endif %}>
        <ul class="{% if section.settings.enable_slider != blank %}swiper-wrapper{% endif %} grid grid--uniform product_grid_items slider grid-astron-card-wrapper">
          {% for product in collection.products limit: product_limit %}
            <li class="grid-astron-card {% if section.settings.enable_slider != blank %}swiper-slide{% endif %} product_grid_item grid__item grid__item--{{ section.id }} {{ grid_item_width }}">
              {% 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-astron-card 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>
      </div>

      {% if section.settings.enable_slider != blank %}
        <!-- buttons -->
        <div class="swiper-button-prev-{{ section.id }} swipe-arrow prev-arrow"></div>
        <div class="swiper-button-next-{{ section.id }} swipe-arrow next-arrow"></div>
      {% endif %}

    </div>

    {% if section.settings.show_view_all %}
      <hr class="hr--invisible" aria-hidden="true"/>
      <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": {
    "cs": "Propagovaná kolekce",
    "da": "Udvalgt kollektion",
    "de": "Vorgestellte Kategorie",
    "en": "Featured collection",
    "es": "Colección destacada",
    "fi": "Esittelyssä oleva kokoelma",
    "fr": "Collection en vedette",
    "it": "Collezione in evidenza",
    "ja": "特集コレクション",
    "ko": "추천 컬렉션",
    "nb": "Utvalgt samling",
    "nl": "Uitgelichte collectie",
    "pl": "Polecana kolekcja",
    "pt-BR": "Coleção em destaque",
    "pt-PT": "Coleção em destaque",
    "sv": "Utvald kollektion",
    "th": "คอลเลกชันแนะนำ",
    "tr": "Öne çıkan koleksiyon",
    "vi": "Bộ sưu tập nổi bật",
    "zh-CN": "特色产品系列",
    "zh-TW": "精選商品系列"
  },
  "class": "index-section",
  "settings": [
	{
		"type": "checkbox",
		"id": "enable_slider",
		"label": "Ativar/Desativar slider",
		"default": false
	},  
    {
      "type": "text",
      "id": "title",
      "label": {
        "cs": "Nadpis",
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "En-tête",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "nb": "Overskrift",
        "nl": "Kop",
        "pl": "Nagłówek",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "tr": "Başlık",
        "vi": "Tiêu đề",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "cs": "Propagovaná kolekce",
        "da": "Udvalgt kollektion",
        "de": "Vorgestellte Kategorie",
        "en": "Featured collection",
        "es": "Colección destacada",
        "fi": "Esittelyssä oleva kokoelma",
        "fr": "Collection en vedette",
        "it": "Collezione in evidenza",
        "ja": "特集コレクション",
        "ko": "추천 컬렉션",
        "nb": "Fremhevet samling",
        "nl": "Uitgelichte collectie",
        "pl": "Polecana kolekcja",
        "pt-BR": "Coleção em destaque",
        "pt-PT": "Coleção em destaque",
        "sv": "Utvald kollektion",
        "th": "คอลเลกชันแนะนำ",
        "tr": "Öne çıkan koleksiyon",
        "vi": "Bộ sưu tập nổi bật",
        "zh-CN": "特色产品系列",
        "zh-TW": "精選商品系列"
      }
    },
    {
      "id": "collection",
      "type": "collection",
      "label": {
        "cs": "Kolekce",
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pl": "Kolekcja",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "tr": "Koleksiyon",
        "vi": "Bộ sưu tập",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      }
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "cs": "Počet produktů na řádek",
        "da": "Produkter pr. række",
        "de": "Produkte per Reihe",
        "en": "Products per row",
        "es": "Productos por fila",
        "fi": "Tuotteita per rivi",
        "fr": "Produits par rangée",
        "it": "Prodotti per riga",
        "ja": "行あたりの商品数",
        "ko": "열 별 제품",
        "nb": "Produkter per rad",
        "nl": "Producten per rij",
        "pl": "Liczba produktów na wiersz",
        "pt-BR": "Produtos por linha",
        "pt-PT": "Produtos por linha",
        "sv": "Produkter per rad",
        "th": "สินค้าต่อแถว",
        "tr": "Satır başına ürün",
        "vi": "Số sản phẩm trên một hàng",
        "zh-CN": "每行产品数",
        "zh-TW": "每列產品數"
      },
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "rows",
      "label": {
        "cs": "Řádky",
        "da": "Rækker",
        "de": "Reihen",
        "en": "Rows",
        "es": "Filas",
        "fi": "Rivit",
        "fr": "Rangées",
        "it": "Righe",
        "ja": "行",
        "ko": "열",
        "nb": "Rader",
        "nl": "Rijen",
        "pl": "Wiersze",
        "pt-BR": "Linhas",
        "pt-PT": "Linhas",
        "sv": "Rader",
        "th": "แถว",
        "tr": "Satırlar",
        "vi": "Hàng",
        "zh-CN": "行数",
        "zh-TW": "列"
      },
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 2
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "cs": "Zobrazit dodavatele produktů",
        "da": "Vis produktleverandører",
        "de": "Produktanbieter anzeigen",
        "en": "Show product vendors",
        "es": "Mostrar proveedores del producto",
        "fi": "Näytä tuotteen myyjät",
        "fr": "Afficher les vendeurs",
        "it": "Mostra fornitori prodotto",
        "ja": "商品の販売元を表示する",
        "ko": "제품 공급 업체 표시",
        "nb": "Vis produktleverandører",
        "nl": "Productleveranciers weergeven",
        "pl": "Pokaż dostawców produktu",
        "pt-BR": "Exibir fabricantes do produto",
        "pt-PT": "Mostrar fornecedores do produto",
        "sv": "Visa produktleverantörer",
        "th": "แสดงผู้ขายสินค้า",
        "tr": "Ürün satıcılarını göster",
        "vi": "Hiển thị nhà cung cấp sản phẩm",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      },
      "default": false
    },
	  {
      "type": "checkbox",
      "id": "add_cart_show",
      "label": "Adicionar ao carrinho Ativar/Desativar",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": {
        "cs": "Zobrazit tlačítko Zobrazit vše",
        "da": "Vis knappen \"Se flere\"",
        "de": "'Alle anzeigen' Button anzeigen",
        "en": "Show 'View all' button",
        "es": "Mostrar el botón 'Ver todo'",
        "fi": "Näytä \"Näytä kaikki\" -painike",
        "fr": "Afficher le bouton “Tout voir”",
        "it": "Mostra il pulsante \"Visualizza tutto\"",
        "ja": "「すべて表示」ボタンを表示する",
        "ko": "'모두 보기' 버튼 표시",
        "nb": "Vis «Se alle»-knapp",
        "nl": "Knop 'Alles weergeven' weergeven",
        "pl": "Pokaż przycisk „Wyświetl wszystkie”",
        "pt-BR": "Exibir botão 'Ver tudo'",
        "pt-PT": "Mostrar botão 'Ver tudo'",
        "sv": "Visa \"Visa alla\"-knappen",
        "th": "แสดงปุ่ม 'ดูทั้งหมด'",
        "tr": "\"Tümünü görüntüle\" düğmesini göster",
        "vi": "Hiển thị nút \"Xem tất cả\"",
        "zh-CN": "显示“查看全部”按钮",
        "zh-TW": "顯示「檢視全部」按鈕"
      },
      "default": false
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Propagovaná kolekce",
        "da": "Udvalgt kollektion",
        "de": "Vorgestellte Kategorie",
        "en": "Featured collection",
        "es": "Colección destacada",
        "fi": "Esittelyssä oleva kokoelma",
        "fr": "Collection en vedette",
        "it": "Collezione in evidenza",
        "ja": "特集コレクション",
        "ko": "추천 컬렉션",
        "nb": "Utvalgt samling",
        "nl": "Uitgelichte collectie",
        "pl": "Polecana kolekcja",
        "pt-BR": "Coleção em destaque",
        "pt-PT": "Coleção em destaque",
        "sv": "Utvald kollektion",
        "th": "คอลเลกชันแนะนำ",
        "tr": "Öne çıkan koleksiyon",
        "vi": "Bộ sưu tập nổi bật",
        "zh-CN": "特色产品系列",
        "zh-TW": "精選商品系列"
      },
      "category": {
        "cs": "Kolekce",
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pl": "Kolekcja",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "tr": "Koleksiyon",
        "vi": "Bộ sưu tập",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      }
    }
  ]
}
{% endschema %}
