{%- assign _hide_mobile = section.settings.hide_mobile -%}

{% if section.blocks.size > 0 %}
  {%- assign _lazyload = section.settings.lazyload -%}
  {%- assign _layout = section.settings.layout -%}
  {%- assign _title = section.settings.section_title -%}
  {%- assign _item_per_row = section.settings.item_per_row -%}

  {%- assign category_style = section.settings.category_style -%}
  {% case category_style %}
    {% when 'row_1' %}
      {% assign _category_style = 'style-1 categories-row' %}
    {% when 'carousel_1' %}  
      {% assign _category_style = 'style-1 categories-carousel' %}
    {% when 'row_2' %}
      {% assign _category_style = 'style-2 categories-row' %} 
    {% else %}
      {% assign _category_style = 'style-2 categories-carousel' %}   
  {% endcase %}

  {% assign _pagination = section.settings.pagination %}
  {% assign _navigation = section.settings.navigation %}

  {% if _item_per_row == '3' %}
    {%- assign  _class = 'col-lg-4 col-md-6 col-sm-12' -%}
  {% else %}
    {%- assign _class = 'col-lg-3 col-md-6 col-sm-12' -%}
  {% endif %}

  <div id="categories-{{ section.id }}" class="categories-section layout-{{ _layout }}{% if _hide_mobile %} d-none d-md-block{% endif %}{% if _layout == 'full' %} no-padding{% endif %} {{ _category_style }}" style="background: {{ section.settings.background}}">
    {% if _layout == 'boxed' and settings.show_left_column == false %}<div class="boxed">{% endif %}
    
      {% unless _title == blank %}
        <div class="title-wrapper"><h3>{{ _title }}</h3></div>

        {% if section.settings.enable_highlight %}
          <script>
            jQuery(document).ready(function(){
              let str = "{{ _title }}";
              let elm = jQuery('#categories-{{ section.id }} .title-wrapper h3');
              AT_Main.hLWords_sectionProductTabs(str, elm);
            })
          </script>
        {% endif %} 
      {% endunless %}
    
      <div class="categories-list{% if _item_per_row == '3' %} border-item{% endif %} {{ _category_style }}">
        {% for block in section.blocks %}

          {%- assign image_size = block.settings.image_size -%}
          {%- assign col = block.settings.collection -%}
          {%- assign collection = collections[col] -%}
        
          {% unless block.settings.image == blank %}

            <div class="c-item{% if category_style == 'row_1' or category_style == 'row_2' %} {{ _class }}{% endif %}">
              <div class="h-category">
                <div class="image">
                  <a href="{{ collection.url }}" {% if _lazyload %} class="lazyload waiting"{% endif %} style="color: {{ section.settings.color }};">
                    <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{{ block.settings.image | img_url: image_size }}" alt="{{ collection.title | escape }}" />                 
                  </a>                
                </div>

                {% if block.settings.display_type == 'collection' %}
                  {% unless col == blank %}
                    <div class="text collection-type-wrapper">                  
                      <h3 class="bold-text"><a href="{{ collection.url }}">{{ collection.title }}</a></h3>
                      <a href="{{ collection.url }}">{{ 'collections.general.see_all' | t }}</a>                  
                    </div>
                  {% endunless %}  

                {% else %}
                  {% assign _heading = block.settings.heading %}
                  {% assign _menu = block.settings.menu %}

                  <div class="menu-type-wrapper text">
                      <h3 class="bold-text">{{ _heading }}</h3>
                      <ul class="menu-wrapper">
                        {% for l in linklists[_menu].links %}
                          <li class="menu-item"><a href="{{ l.url }}">{{ l.title }}</a></li>
                        {% endfor %}
                      </ul>
                      <a href="/collections">{{ 'collections.general.see_all' | t }}</a>
                  </div>
                {% endif %}  
              </div>
            </div>
        
        	{% else %}
              <div class="c-item {{ _class }}">
                <div class="h-category">
                  <div class="image">
                    {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                    {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>

                  <div class="text">
                    <h3>{{ 'homepage.onboarding.collection_title' | t }}</h3>
                    <a href="{{ collection.url }}">{{ 'collections.general.see_all' | t }}</a>
                  </div>
                </div>
              </div>
        
          {% endunless %}

        {% endfor %}
      </div>

      {% if category_style == 'carousel_1' or category_style == 'carousel_2' %}
        <script>
          jQuery(document).ready(function(){
            jQuery("#categories-{{ section.id }} .categories-carousel").length && jQuery('#categories-{{ section.id }} .categories-carousel').owlCarousel({
                nav     : {{ _navigation }}
                ,dots     : {{ _pagination }}
                ,margin   : 30
          ,responsive : {
                    0:{
                      items: 1
                    }
                    ,480:{
                      items: 2
                    }
                    ,768:{
                      items: 3
                    }
                    ,992:{
                      items: {{_item_per_row}}
                    }
                }
          ,navText  : ['<span class="button-prev"></span>', '<span class="button-next"></span>']
          
            });
          })    
        </script>
      {% endif %}

    {% if _layout == 'boxed' and settings.show_left_column == false %}</div>{% endif %}
    
    <style type="text/css">      
      .text a { color: {{ section.settings.color }}; }
      .text a:hover { color: {{ section.settings.color_hover }}; }
    </style>
  </div>

{% endif %}

{% schema %}
{
  "name": "Categories",
  "max_blocks": 8,
  "settings": [
	{
      "type": "paragraph",
      "content": "Created by 'Collection List' section"
    },
	{
      "id": "title",
      "type": "text",
      "label": "Section Label",
      "default": "Collection List"
    },
    {
      "type": "checkbox",
      "id": "hide_mobile",
      "label": "Visibility: Hide for Mobile"
    },
	{
      "type": "select",
      "id": "layout",
      "label": "Section Layout Mode",
      "default": "boxed",
      "options": [
        {
          "value": "boxed",
          "label": "Boxed"
        },
        {
          "value": "full",
          "label": "Wide"
        }
      ]
    },
      {
      "type": "checkbox",
      "id": "lazyload",
      "label": "Enable Lazy loading",
      "default": true
    },
	{
      "type": "text",
      "id": "section_title",
      "label": "Title",
      "default": "Top Categories This Month"
    },
    {
      "type":"checkbox",
      "id":"enable_highlight",
      "label":"Enable highlight",
      "info":"This function will highlight the first word of your Heading (if there are more than 2 words)",
      "default":true
    },
	{
      "type": "color",
      "id": "background",
      "label": "Background color",
      "default": "#ffffff"
    },
	{
      "type": "color",
      "id": "color",
      "label": "Text color",
      "default": "#333e48"
    },
	{
      "type": "color",
      "id": "color_hover",
      "label": "Text hover color",
      "default": "#fed700"
    },
    {
      "type":"select",
      "id":"category_style",
      "label":"Category style",
      "options":[
        {"value":"row_1","label":"Row style #1"},
        {"value":"row_2","label":"Row style #2"},
        {"value":"carousel_1","label":"Carousel #1"},
        {"value":"carousel_2","label":"Carousel #2"}
      ],
      "default":"row_1"
    },
    {
      "type":"paragraph",
      "content":"----Carousel settings"
    },
    {
      "type":"checkbox",
      "id":"pagination",
      "label":"Show pagination",
      "default":true
    },
    {
      "type":"checkbox",
      "id":"navigation",
      "label":"Show navigation",
      "default":true
    },
	{
      "type": "select",
      "id": "item_per_row",
      "label": "Total items per row",
      "options": [
        { "value": "3", "label": "3 items" },
        { "value": "4", "label": "4 items" }
      ],
      "default": "3"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Categories",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "image_size",
          "label": "Image size",
          "default": "150x138",
          "info": "It is only number, not px. For exam: 150x138"
        },
        {
          "type":"select",
          "id":"display_type",
          "label":"Choose what to show",
          "options":[
            {"value":"collection","label":"Collection"},
            {"value":"menu","label":"Menu"}
          ],
          "default":"menu"
        },
        {
          "type":"header",
          "content":"Collection"
        },
        {
          "id": "collection",
          "type": "collection",
          "label": "Choose a collection"
        },
        {
          "type":"header",
          "content":"Menu"
        },
        {
          "type":"text",
          "id":"heading",
          "label": "Heading"
        },
        {
          "type":"link_list",
          "id":"menu",
          "label":"Choose a menu"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection List",
      "category": "Collection",
      "blocks": [
        { "type": "collection" },
        { "type": "collection" },
        { "type": "collection" },
        { "type": "collection" },
        { "type": "collection" },
        { "type": "collection" }
      ]
    }
  ]
}
{% endschema %}
