{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}
{{ 'article-card.css' | asset_url | stylesheet_tag }}

<div {% render 'section-attr' %}>
  {% render 'section-bg-image' %}
  <xo-container {% render 'section-layout' %}>
    {% case section.settings.blog_layout %}
      {% when 'left_sidebar' %}
        {% assign sidebar_style = '--order-lg: -1' %}
        {% assign mainblog_columns = '9' %}
      {% when 'right_sidebar' %}
        {% assign sidebar_style = '--order-lg: 0' %}
        {% assign mainblog_columns = '9' %}
      {% else %}
        {% assign sidebar_style = 'display: none' %}
        {% assign mainblog_columns = '12' %}
    {% endcase %}
    <xo-grid>
      <div style='--xs: 12; --md: 12; --lg: {{ mainblog_columns }}'>
        {% if section.settings.article_loadtype == 'paginate' %}
          {%- paginate blog.articles by section.settings.articles_per_page -%}
            {% case section.settings.blog_style %}
              {% when 'list' %}
                <div class='main-blog__list-layout'>
                  {%- for article in blog.articles -%}
                    {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                    {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                    {% render 'article-card-style4',
                      article: article,
                      media_aspect_ratio: '4/3',
                      show_image: section.settings.article_card_show_image,
                      show_date: section.settings.article_card_show_date,
                      show_excerpt: section.settings.article_card_show_excerpt,
                      placeholder_image: placeholder_image,
                      color_scheme: section.settings.article_card_color_scheme
                    %}
                  {% endfor %}
                </div>
              {% when 'masonry' %}
                <xo-masonry
                  xo-column='{{ section.settings.columns_desktop }}'
                  xo-breakpoints='
                    {
                      575: {
                        column: 1
                      },
                      768: {
                        column: {{ section.settings.columns_desktop | minus: 1 }}
                      }
                    }
                  '
                >
                  {%- for article in blog.articles -%}
                    {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                    {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                    <xo-masonry-item class='masonry__item'>
                      {% render 'article-card-style1',
                        article: article,
                        show_image: section.settings.article_card_show_image,
                        show_date: section.settings.article_card_show_date,
                        show_excerpt: section.settings.article_card_show_excerpt,
                        placeholder_image: placeholder_image,
                        color_scheme: section.settings.article_card_color_scheme
                      %}
                    </xo-masonry-item>
                  {% endfor %}
                </xo-masonry>
              {% else %}
                <xo-grid style='--lg: {{ section.settings.columns_desktop }}; --md: {{ section.settings.columns_desktop | minus: 1 }}; --xs: 1;'>
                  {%- for article in blog.articles -%}
                    {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                    {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                    {% render 'article-card-style1',
                      article: article,
                      media_aspect_ratio: '4/3',
                      show_image: section.settings.article_card_show_image,
                      show_date: section.settings.article_card_show_date,
                      show_excerpt: section.settings.article_card_show_excerpt,
                      placeholder_image: placeholder_image,
                      color_scheme: section.settings.article_card_color_scheme
                    %}
                  {% endfor %}
                </xo-grid>
            {% endcase %}
            {%- render 'pagination', paginate: paginate -%}
          {%- endpaginate -%}
        {% else %}
          {% case section.settings.blog_style %}
            {% when 'list' %}
              <div class='main-blog__list-layout'>
                {%- for article in blog.articles -%}
                  {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                  {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                  {% render 'article-card-style4',
                    article: article,
                    media_aspect_ratio: '4/3',
                    show_image: section.settings.article_card_show_image,
                    show_date: section.settings.article_card_show_date,
                    show_excerpt: section.settings.article_card_show_excerpt,
                    placeholder_image: placeholder_image,
                    color_scheme: section.settings.article_card_color_scheme
                  %}
                {% endfor %}
              </div>
            {% when 'masonry' %}
              <xo-masonry
                xo-column='{{ section.settings.columns_desktop }}'
                xo-breakpoints='
                  {
                    575: {
                      column: 1
                    },
                    768: {
                      column: {{ section.settings.columns_desktop | minus: 1 }}
                    }
                  }
                '
              >
                {%- for article in blog.articles -%}
                  {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                  {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                  <xo-masonry-item class='masonry__item'>
                    {% render 'article-card-style1',
                      article: article,
                      show_image: section.settings.article_card_show_image,
                      show_date: section.settings.article_card_show_date,
                      show_excerpt: section.settings.article_card_show_excerpt,
                      placeholder_image: placeholder_image,
                      color_scheme: section.settings.article_card_color_scheme
                    %}
                  </xo-masonry-item>
                {% endfor %}
              </xo-masonry>
            {% else %}
              <xo-grid style='--lg: {{ section.settings.columns_desktop }}; --md: {{ section.settings.columns_desktop | minus: 1 }}; --xs: 1;'>
                {%- for article in blog.articles -%}
                  {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                  {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                  {% render 'article-card-style1',
                    article: article,
                    media_aspect_ratio: '4/3',
                    show_image: section.settings.article_card_show_image,
                    show_date: section.settings.article_card_show_date,
                    show_excerpt: section.settings.article_card_show_excerpt,
                    placeholder_image: placeholder_image,
                    color_scheme: section.settings.article_card_color_scheme
                  %}
                {% endfor %}
              </xo-grid>
          {% endcase %}
        {% endif %}
      </div>
      <div style='--xs: 12; --md: 12; --lg: 3; {{ sidebar_style }}'>
        <div class='main-blog__sidebar-wrap'>
          {% if section.settings.enable_category %}
            <div class='main-blog__category'>
              <xo-animate xo-cascade>
                <h2 class='main-blog__title'>{{ section.settings.category_title }}</h2>
              </xo-animate>
              <ul class='main-blog__category-list'>
                {% for link in section.settings.category.links %}
                  <xo-animate xo-cascade>
                    <li class='main-blog__category-item'>{{ link.title | link_to: link.url }}</li>
                  </xo-animate>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
          {% if section.settings.enable_post %}
            <div class='main-blog__post'>
              <xo-animate xo-cascade>
                <h2 class='main-blog__title'>{{ section.settings.post_title }}</h2>
              </xo-animate>
              {% for article in section.settings.post.articles limit: section.settings.post_limit %}
                {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
                {% render 'article-card-style3', article: article, media_aspect_ratio: '1/1', show_image: true, show_date: true, placeholder_image: placeholder_image %}
              {% endfor %}
            </div>
          {% endif %}
          {% if section.settings.enable_tag %}
            {% assign unique_tag = blog.all_tags | uniq %}
            <div class='main-blog__tag'>
              <xo-animate xo-cascade>
                <h2 class='main-blog__title'>{{ section.settings.tag_title }}</h2>
              </xo-animate>
              <ul class='main-blog__tag-list'>
                {% for tag in unique_tag %}
                  <xo-animate xo-cascade>
                    {%- if current_tags contains tag -%}
                      <li class='main-blog__tag-item xo-active'>{{ tag }}</li>
                    {%- else -%}
                      <li class='main-blog__tag-item'>{{ tag | link_to_tag: tag }}</li>
                    {%- endif -%}
                  </xo-animate>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
          {% if section.settings.enable_banner %}
            <xo-animate xo-cascade class='main-blog__banner'>
              <a
                href='
                  {%- if section.settings.banner_link != blank -%}
                    {{section.settings.banner_link}} {%- else -%}
                    https://shopify.pxf.io/9gPaY0
                  {%- endif -%}
                '
              >
                {%- if section.settings.banner_image != blank -%}
                  {% render 'image', image: section.settings.banner_image %}
                {%- else -%}
                  <img src='https://landing.shopilaunch.com/starter/sidebar_banner.jpg' alt='' width='1200' height='800'>
                {%- endif -%}
              </a>
            </xo-animate>
          {% endif %}
        </div>
      </div>
    </xo-grid>
  </xo-container>
</div>

{% schema %}
{
  "name": "t:sections.main_blog.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.main_blog.settings.width.label",
      "options": [
        {
          "value": "box",
          "label": "t:sections.main_blog.settings.width.option_1.label"
        },
        {
          "value": "wide",
          "label": "t:sections.main_blog.settings.width.option_2.label"
        }
      ],
      "default": "box"
    },
    {
      "type": "select",
      "id": "blog_layout",
      "label": "t:sections.main_blog.settings.blog_layout.label",
      "options": [
        {
          "value": "left_sidebar",
          "label": "t:sections.main_blog.settings.blog_layout.option_1.label"
        },
        {
          "value": "right_sidebar",
          "label": "t:sections.main_blog.settings.blog_layout.option_2.label"
        },
        {
          "value": "without_sidebar",
          "label": "t:sections.main_blog.settings.blog_layout.option_3.label"
        }
      ],
      "default": "left_sidebar"
    },
    {
      "type": "select",
      "id": "blog_style",
      "label": "t:sections.main_blog.settings.blog_style.label",
      "options": [
        {
          "value": "list",
          "label": "t:sections.main_blog.settings.blog_style.option_1.label"
        },
        {
          "value": "grid",
          "label": "t:sections.main_blog.settings.blog_style.option_2.label"
        },
        {
          "value": "masonry",
          "label": "t:sections.main_blog.settings.blog_style.option_3.label"
        }
      ],
      "default": "grid"
    },
    {
      "type": "range",
      "id": "articles_per_page",
      "min": 8,
      "max": 24,
      "step": 1,
      "default": 10,
      "label": "t:sections.main_blog.settings.articles_per_page.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.main_blog.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "article_loadtype",
      "label": "t:sections.main_blog.settings.article_loadtype.label",
      "options": [
        {
          "value": "paginate",
          "label": "t:sections.main_blog.settings.article_loadtype.option_1.label"
        },
        {
          "value": "infinity",
          "label": "t:sections.main_blog.settings.article_loadtype.option_2.label"
        }
      ],
      "default": "paginate"
    },
    {
      "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.main_blog.settings.sidebar_heading.content"
    },
    {
      "type": "header",
      "content": "t:sections.main_blog.settings.category_heading.content"
    },
    {
      "type": "checkbox",
      "id": "enable_category",
      "label": "t:sections.main_blog.settings.enable_category.label",
      "default": true
    },
    {
      "type": "text",
      "id": "category_title",
      "label": "t:sections.main_blog.settings.category_title.label",
      "default": "CATEGORIES"
    },
    {
      "type": "link_list",
      "id": "category",
      "label": "t:sections.main_blog.settings.category.label"
    },
    {
      "type": "header",
      "content": "t:sections.main_blog.settings.post_heading.content"
    },
    {
      "type": "checkbox",
      "id": "enable_post",
      "label": "t:sections.main_blog.settings.enable_post.label",
      "default": true
    },
    {
      "type": "text",
      "id": "post_title",
      "label": "t:sections.main_blog.settings.post_title.label",
      "default": "RECENT POSTS"
    },
    {
      "type": "blog",
      "id": "post",
      "label": "t:sections.main_blog.settings.post.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 50,
      "step": 1,
      "label": "t:sections.main_blog.settings.post_limit.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.main_blog.settings.tag_heading.content"
    },
    {
      "type": "checkbox",
      "id": "enable_tag",
      "label": "t:sections.main_blog.settings.enable_tag.label",
      "default": true
    },
    {
      "type": "text",
      "id": "tag_title",
      "label": "t:sections.main_blog.settings.tag_title.label",
      "default": "TAGS"
    },
    {
      "type": "header",
      "content": "t:sections.main_blog.settings.banner_heading.content"
    },
    {
      "type": "checkbox",
      "id": "enable_banner",
      "label": "t:sections.main_blog.settings.enable_banner.label",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "t:sections.main_blog.settings.banner_image.label",
      "info": "t:sections.main_blog.settings.banner_image.content"
    },
    {
      "type": "url",
      "id": "banner_link",
      "label": "t:sections.main_blog.settings.banner_link.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
    }
  ]
}
{% endschema %}
