<div data-section-id="{{ section.id }}" data-section-type="filter-products-section">
  <!-- style custom -->
  <style>
    #filter-products-{{ section.id }}.box_product,
    #filter-products-{{ section.id }}.box_product h3.title-widget span.inner{
      background-color: {{ section.settings.bg_section_color }};
    }
    #filter-products-{{ section.id }} .products-collection h3.title-widget{
      color: {{ section.settings.title_color }};
    }
  </style>
  <!-- end style custom -->
  <div id="filter-products-{{ section.id }}" class="box_product">
    <div class="container">
      <div class="products-collection {% if settings.style_product_view == '1' %}product_type_1{% endif %}{% if settings.style_product_view == '2' %}product_type_2{% endif %}{% if settings.style_product_view == '3' %}product_type_3{% endif %}{% if settings.style_product_view == '4' %}product_type_4{% endif %}">
        {% if section.settings.title != '' %}
        <h3 class="title-widget">
          <span class="inner">
            {% if settings.language_enable %}
            <span class="lang1">{{ section.settings.title | split: '|' | first }}</span>
            <span class="lang2">{{ section.settings.title | split: '|' | last }}</span>
            {% else %}
            {{ section.settings.title | split: '|' | first }}
            {% endif %}
          </span>
        </h3>
        {% endif %}
        {% if section.settings.collection_text != '' %}
        <p class="description">
          <span>
            {% if settings.language_enable %}
            <span class="lang1">{{ section.settings.collection_text | split: '|' | first }}</span>
            <span class="lang2">{{ section.settings.collection_text | split: '|' | last }}</span>
            {% else %}
            {{ section.settings.collection_text | split: '|' | first }}
            {% endif %}
          </span>
        </p>
        {% endif %}
        <div class="category-products">
          {%- assign carousel = section.settings.collection_carousel -%}
          {%- assign limit = section.settings.collection_limit -%}
          {%- assign name_collection = section.settings.collection -%}
          {%- if name_collection == blank -%}{%- assign name_collection = "all" -%}{%- endif -%}
          {%- assign collection = collections[name_collection] -%}
          <div class="data-carousel"
               data-auto="{{ section.settings.collection_autoplay }}"
               data-items="{{ section.settings.collection_column }}"
               data-1200="{{ section.settings.collection_column }}"
               data-992="4"
               data-768="3"
               data-640="2"
               data-480="2"
               data-320="2"
               data-nav="{{ section.settings.collection_product_show_nav }}"
               data-prev='{{ section.settings.collection_product_nav_prev}}'
               data-next='{{ section.settings.collection_product_nav_next}}'
               data-paging="{{ section.settings.collection_show_paging }}"
               data-margin='{{ section.settings.collection_item_margin }}' style="display: none;"></div>
          {% if collection.products.size == 0 %}
          <p style="text-align:center;color:#999;padding: 5px 10px;font-style:italic;" {% if settings.language_enable %}data-translate="products.general.no_more_product"{% endif %}>{{ 'products.general.no_more_product' | t }}</p>
          {% else %}
          {% if carousel %}
          <div class="products-grid owl-carousel {% if section.settings.hide_actions != blank %}hide-action{% endif %}{% if section.settings.nav_position == '1' %}center_nav{% endif %} {% if section.settings.paginate_position == '0' %}top_paginate{% endif %} {% if section.settings.move_actions != blank %}move-action{% endif %}">
            {% for product in collection.products limit: limit %}
            <div class="item product">
              {% include 'owl-lazyload-product-grid-item' %}
            </div>
            {% endfor %}
          </div>
          {% else %}
          <ul class="products-grid columns{{section.settings.collection_column}} {% if section.settings.collection_flex_grid != blank %}flex-grid{% endif %} {% if section.settings.move_actions != blank %}move-action{% endif %} {% if section.settings.hide_actions != blank %}hide-action{% endif %}">
            {% for product in collection.products limit: limit %}
            <li class="item product product-layout-grid">
              {% include 'lazyload-product-grid-item' %}
            </li>
            {% endfor %}
            <div style="clear:both;"></div>
          </ul>
          {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Collection Products",
  "settings": [
    {
      "type": "header",
      "content": "Color"
    },
    {
      "type": "color",
      "id": "bg_section_color",
      "label": "Background Section Color",
      "default": "#fff"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Collection Color",
      "default": "#313131"
    },
    {
      "type": "header",
      "content": "Config"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Collection Title",
      "default": "FEATURED PRODUCTS"
    },
    {
      "type": "text",
      "id": "collection_text",
      "label": "Collection Text"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "text",
      "id": "collection_limit",
      "label": "Number of products to show",
      "default": "8"
    },
    {
      "type": "text",
      "id": "collection_column",
      "label": "Products per row",
      "default": "4"
    },
    {
      "type": "checkbox",
      "id": "hide_actions",
      "label": "Hide Action Links",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "collection_flex_grid",
      "label": "Flex Grid",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "move_actions",
      "label": "Move Actions",
      "info": "If yes, all of the action links that 'Add to Cart' button, 'Add to Compare' link and 'Add to Wishlist' link will be moved into the product image area.",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "collection_carousel",
      "label": "Enable Carousel",
      "info": "Use for only default layout and don't show more button.",
      "default": true
    },
    {
      "type": "text",
      "id": "collection_autoplay",
      "label": "Slideshow",
      "info": "Change to any integrer for example 5000 to play every 5 seconds. Leave empty to disable autoplay.",
      "default": "5000"
    },
    {
      "type": "checkbox",
      "id": "collection_show_paging",
      "label": "Show Paging"
    },
    {
      "type": "select",
      "id": "paging_position",
      "label": "Paging Position",
      "options": [
        {
          "value": "0",
          "label": "Top"
        },
        {
          "value": "1",
          "label": "Bottom"
        }
      ],
      "default": "0"
    },
    {
      "type": "checkbox",
      "id": "collection_product_show_nav",
      "label": "Show Navigation",
      "default": true
    },
    {
      "type": "select",
      "id": "nav_position",
      "label": "Navigation Position",
      "options": [
        {
          "value": "0",
          "label": "Top"
        },
        {
          "value": "1",
          "label": "Side"
        }
      ],
      "default": "0"
    },
    {
      "type": "text",
      "id": "collection_product_nav_prev",
      "label": "Prev Navigation",
      "default": "<i class=\"icon-left-open\"><\/i>"
    },
    {
      "type": "text",
      "id": "collection_product_nav_next",
      "label": "Next Navigation",
      "default": "<i class=\"icon-right-open\"><\/i>"
    },
    {
      "type": "text",
      "id": "collection_item_margin",
      "label": "Margin",
      "info": "Margin each item.",
      "default": "30"
    }
  ],
  "presets": [
    {
      "name": "Collection Products",
      "category": "Products"
    }
  ]
}
{% endschema %}