<section {% render 'section-attr' %}>
  {% render 'section-bg-image' %}
  <xo-container class='{% if section.settings.width == 'unset' %} xo-container-width{% endif %} '>
    {% render 'blog-title', title: section.settings.title %}

    <xo-carousel
      xo-breakpoints='
        {
          700: {
            perView: 1,
          },
          1200: {
            perView: 2,
          },
          1400: {
            perView: 3,
          },
        }
      '
      {% if section.settings.autoplay %}
        xo-autoplay='1500'
      {% endif %}
      xo-per-view='{{ section.settings.columns_limit }}'
      xo-speed='400'
      xo-gap='{{ section.settings.columns_gap }}'
    >
      <xo-carousel-inner>
        <xo-carousel-list>
          {% if section.settings.blog.articles != blank %}
            {%- paginate section.settings.blog.articles by section.settings.limit -%}
              {%- for article in section.settings.blog.articles -%}
                <xo-carousel-slide>
                  {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                  {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                  {% render 'article-card-style6',
                    article: article,
                    media_aspect_ratio: section.settings.article_card_media_aspect_ratio,
                    show_image: section.settings.article_card_show_image,
                    show_date: section.settings.article_card_show_date,
                    show_author: section.settings.article_card_show_author,
                    show_excerpt: section.settings.article_card_show_excerpt,
                    show_tags: section.settings.article_card_show_tags,
                    placeholder_image: placeholder_image,
                    color_scheme: section.settings.article_card_color_scheme
                  %}
                </xo-carousel-slide>
              {%- endfor -%}
            {%- endpaginate -%}
          {% endif %}
        </xo-carousel-list>
      </xo-carousel-inner>
    </xo-carousel>
  </xo-container>
</section>

{% schema %}
{
  "name": "t:sections.blog_v1.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.all.title.label",
      "default": "Blog Title"
    },
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.blog_v1.settings.width.label",
      "default": "1400",
      "options": [
        {
          "value": "1400",
          "label": "t:sections.blog_v1.settings.width.option_1.label"
        },
        {
          "value": "unset",
          "label": "t:sections.blog_v1.settings.width.option_2.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "hover",
      "label": "t:sections.all.hover.label",
      "default": "hover1",
      "options": [
        {
          "value": "hover1",
          "label": "t:sections.all.hover.option__1.label"
        },
        {
          "value": "hover2",
          "label": "Style 02"
        },
        {
          "value": "hover3",
          "label": "Style 03"
        },
        {
          "value": "hover4",
          "label": "Style 04"
        },
        {
          "value": "hover5",
          "label": "Style 05"
        },
        {
          "value": "hover6",
          "label": "Style 06"
        }
      ]
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.blog_v1.settings.blog.label"
    },
    {
      "type": "range",
      "id": "limit",
      "min": 2,
      "max": 20,
      "step": 1,
      "default": 12,
      "label": "t:sections.blog_v1.settings.limit.label"
    },
    {
      "type": "range",
      "id": "columns_limit",
      "min": 3,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.blog_v1.settings.columns-limit.label"
    },
    {
      "type": "range",
      "id": "columns_gap",
      "min": 0,
      "max": 80,
      "step": 1,
      "default": 30,
      "label": "t:sections.blog_v1.settings.columns-gap.label"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.blog_v1.settings.auto-play.label",
      "default": true
    },
    {
      "type": "header",
      "content": "t:sections.all.article_card_header.content"
    },
    {
      "type": "checkbox",
      "id": "article_card_show_image",
      "default": true,
      "label": "t:sections.all.article_card_show_image.label"
    },
    {
      "type": "checkbox",
      "id": "article_card_show_date",
      "default": true,
      "label": "t:sections.all.article_card_show_date.label"
    },
    {
      "type": "checkbox",
      "id": "article_card_show_excerpt",
      "default": false,
      "label": "t:sections.all.article_card_show_excerpt.label"
    },
    {
      "type": "color_scheme",
      "id": "article_card_color_scheme",
      "default": "scheme_1",
      "label": "t:sections.all.article_card_color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_desktop",
      "label": "t:sections.all.background_image_desktop.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_mobile",
      "label": "t:sections.all.background_image_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "use_parallax",
      "label": "t:sections.all.use_parallax.label",
      "default": true
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.blog_v1.presets.name",
      "settings": {
        "blog": "News"
      }
    }
  ]
}
{% endschema %}
