{%- assign blog = section.settings.blog -%}
{%- assign _hide_mobile = section.settings.hide_mobile -%}
{%- assign _lazyload = section.settings.lazyload -%}
{%- assign _layout = section.settings.layout -%}
{%- assign _type = section.settings.type -%}
{%- assign _padding = section.settings.padding_style -%}
{%- assign _item_per_row = section.settings.item_per_row -%}
{%- assign _article_name_size = section.settings.article_name_size -%}
{%- assign _limit = section.settings.limited -%}

{% if _padding == 'no' %}
  {%- assign _padding_carousel = '0' -%}
{% else %}
  {%- assign _padding_carousel = '30' -%}
{% endif %}

{% case _item_per_row %}
  {% when 2 %}
    {%- assign _blog_class = "col-xl-6 col-lg-6 col-md-6 col-sm-12" -%}
    {%- assign _image_size = "885x" -%}
  {% when 3 %}
    {%- assign _blog_class = "col-xl-4 col-lg-4 col-md-6 col-sm-12" -%}
    {%- assign _image_size = "570x" -%}
  {% else %}
    {%- assign _blog_class = "col-xl-3 col-lg-3 col-md-6 col-sm-12" -%}
    {%- assign _image_size = "425x" -%}
{% endcase %}

{% capture emptyBlog %}
  {% for i in (1.._item_per_row)  %}
    <div class="post-item {{ _blog_class }} col-12">
      <div class="post-item-inner">

        <div class="post-image">
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>

        <div class="post-content">
          <div class="meta-data">
            <span class="date">{{ 'homepage.onboarding.blog_date' | t }}</span>
          </div>

          <div class="info">
            <div class="blog-title {{ _article_name_size }}">{{ 'homepage.onboarding.blog_title' | t }}</div>
          </div>
        </div>

      </div> 
    </div>
  {% endfor %}
{% endcapture %}

<div id="blog-container-{{ section.id }}" class="blog-container{% if _hide_mobile %} d-none d-md-block{% endif %} layout-{{_layout }}{% if _layout == 'full' %} no-padding{% endif %} {% if section.blocks.size > 1 %} blog-container-tab{% endif %}">
  	<div class="{% if _layout == 'boxed' %}boxed{% endif %}" style="background-color: {{ section.settings.bg_color }};">

      <div >
        {% assign _title = section.settings.section_title %}
        {% 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('#blog-container-{{ section.id }} .title-wrapper h3');
                  AT_Main.hLWords_sectionProductTabs(str, elm);
                })
              </script>
            {% endif %}  
        {% endunless %}

        <div class="blog-content style-{{ section.settings.display_style }}">
          <div class="{% if _type == 'row' %}row{% else %}blog-carousel{% endif %}">
            {%- assign blog = blogs[blog] -%}

            {% unless section.settings.blog == blank or blog.articles_count == 0 %}
              {% for article in blog.articles limit: _limit %}
                <div class="post-item {% if _type == 'row' %}{{ _blog_class }} col-12{% endif %}">
                  {% include 'featured-blog-item' %}
                </div>
              {% endfor %}
          
            {% else %}
              {{ emptyBlog }}

            {% endunless %}
          </div>        
        </div>    
      </div>
  	</div> 
</div>

{% if _type == 'carousel' %}
  <script type="text/javascript">

    jQuery(document).ready(function($) {
      jQuery('#blog-container-{{ section.id }} .blog-carousel').length && jQuery('#blog-container-{{ section.id }} .blog-carousel').owlCarousel({
             nav    : {{section.settings.navigator}}
             ,dots    : {{section.settings.paging}}
             ,margin    : {{ _padding_carousel }}
             ,responsive : {
               0:{
                 items: 1
               }
            {% if section.settings.display_style == '2' %}
               ,576: {
                 items: 2 
               }
            {% endif %}
               ,992:{
                 items: {{ _item_per_row }}
               }  
             }
             ,navText : ['<span class="button-prev"></span>', '<span class="button-next"></span>']
      });
    });

  </script>
{% endif %}

{% schema %}
  {
  "name": "Blog",
  "settings": [
  {
      "type": "paragraph",
      "content": "Created by 'Blog List' section"
    },
    {
      "type": "checkbox",
      "id": "hide_mobile",
      "label": "Visibility: hide on mobile"
    },
    {
      "type": "text",
      "id": "section_title",
      "label": "Heading",
      "default": "Blog News"
    },
    {
      "type":"checkbox",
      "id":"enable_highlight",
      "label":"Enable highlight",
      "info":"This function will highlight the last word of your Heading (if there are more than 2 words)",
      "default":true
    },
    {
      "type":"blog",
      "id":"blog",
      "label":"Blog"
    },
    {
      "type": "checkbox",
      "id": "lazyload",
      "label": "Enable lazyload",
      "default": true
    },
  {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "default": "boxed",
      "options": [
        {
          "value": "boxed",
          "label": "Boxed"
        },
        {
          "value": "full",
          "label": "Wide"
        }
      ]
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#fff"
    },
    {
      "type":"select",
      "id":"display_style",
      "label":"Display style",
      "options":[
        {"value":"1","label":"Style #1"},
        {"value":"2","label":"Style #2"}
      ],
      "default":"1"
    },
  {
      "type": "select",
      "id": "type",
      "label": "Type",
      "options": [
        {
          "value": "row",
          "label": "Row"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "default": "row"
    },  
    {
      "type": "select",
      "id": "article_name_size",
      "label": "Article title font size",
      "default": "h3",
      "options": [
        {
        "value": "h1",
        "label": "Heading 1"
        },
        {
          "value": "h2",
          "label": "Heading 2"
        },
        {
          "value": "h3",
          "label": "Heading 3"
        },
        {
          "value": "h4",
          "label": "Heading 4"
        },
        {
          "value": "h5",
          "label": "Heading 5"
        },
        {
          "value": "h6",
          "label": "Heading 6"
        }
      ]
    },
  {
      "type": "range",
      "id": "item_per_row",
      "label": "Total items per row",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3
    },
  {
      "type": "text",
      "id": "limited",
      "label": "Total items",
      "default": "6"
    },
    {
    	"type":"checkbox",
    	"id":"show_excerpt",
    	"label":"Show excerpt",
    	"default":true
    },
    {
      "type":"header",
      "content":"Settings for type Carousel"
    },
    {
      "type": "select",
      "id": "padding_style",
      "label": "Gutter (Padding)",
      "default": "yes",
      "options": [
        {
          "value": "yes",
          "label": "Yes"
        },
        {
          "value": "no",
          "label": "No"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "navigator",
      "label": "Show Navigator",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "paging",
      "label": "Show Pagination",
      "default": false
    }
  ],
  "presets": [{
    "name": "Blog List",
    "category": "Information"
  }]
}
{% endschema %}