

{% liquid
  assign max_items = section.settings.post_limit
%}

{% liquid
  if section.settings.background_color != blank
    render 'contrast-override', background_color: section.settings.background_color, section_id: section.id
  endif
%}

<div
  class="section-background{% if section.settings.background_color != blank %} color-custom-{{ section.id }}{% endif %}"
></div>

<div
  class="
    section
    section--{{ section.settings.section_width }}
    {% if section.settings.background_color != blank %}color-custom-{{ section.id }}{% endif %}
    section-resource-list
    spacing-style
    gap-style
  "
  style="
    {%- render 'spacing-style', settings: section.settings -%}
    {%- render 'gap-style', value: section.settings.gap -%}
  "
>
  {% content_for 'block', id: 'static-blog-title', type: '_featured-blog-posts-title' %}

  {% if section.settings.blog != blank and section.settings.blog.articles_count > 0 %}
    {% paginate section.settings.blog.articles by max_items %}
      {% assign section_articles = section.settings.blog.articles %}
    {% endpaginate %}
  {% else %}
    {% assign section_articles = '' %}
    {% for i in (1..max_items) %}
      {% assign section_articles = section_articles | append: ', ' %}
    {% endfor %}
    {% assign section_articles = section_articles | split: ',' %}
  {% endif %}

  {% capture list_items %}
    {% for article in section_articles limit: max_items %}
      <div class="resource-list__item">
        {% content_for 'block', id: 'static-blog-post-card', type: '_featured-blog-posts-card', article: article, closest.article: article %}
      </div>
      {% unless forloop.last %}
        <!--@list/split-->
      {% endunless %}
    {% endfor %}
  {% endcapture %}

  {% liquid
    assign list_items_array = list_items | strip | split: '<!--@list/split-->'
  %}

  {% render 'resource-list',
    list_items: list_items,
    list_items_array: list_items_array,
    settings: section.settings,
    carousel_ref: 'featuredBlog',
    slide_count: max_items,
    content_type: 'articles',
    test_id: 'featured-blog-posts'
  %}
</div>

{% schema %}
{
  "name": "t:names.blog_posts",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "class": "featured-blog-posts",
  "blocks": [
    {
      "type": "_featured-blog-posts-title"
    },
    {
      "type": "_featured-blog-posts-card"
    },
    {
      "type": "_featured-blog-posts-image"
    }
  ],
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "t:settings.blog"
    },
    {
      "type": "header",
      "content": "t:content.cards_layout"
    },
    {
      "type": "select",
      "id": "layout_type",
      "label": "t:settings.layout_type",
      "options": [
        {
          "value": "grid",
          "label": "t:options.grid"
        },
        {
          "value": "carousel",
          "label": "t:options.carousel"
        },
        {
          "value": "editorial",
          "label": "t:options.editorial"
        }
      ],
      "default": "grid"
    },
    {
      "type": "checkbox",
      "id": "carousel_on_mobile",
      "label": "t:settings.carousel_on_mobile",
      "default": true,
      "visible_if": "{{ section.settings.layout_type != 'carousel' }}"
    },
    {
      "type": "range",
      "id": "post_limit",
      "label": "t:settings.post_count",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "columns",
      "label": "t:settings.columns",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 3,
      "visible_if": "{{ section.settings.layout_type == 'grid' or section.settings.layout_type == 'carousel' }}"
    },
    {
      "type": "select",
      "id": "mobile_columns",
      "label": "t:settings.mobile_columns",
      "options": [
        {
          "value": "1",
          "label": "t:options.one_number"
        },
        {
          "value": "2",
          "label": "t:options.two_number"
        }
      ],
      "default": "2",
      "visible_if": "{{ section.settings.layout_type == 'grid' and section.settings.carousel_on_mobile == false }}"
    },
    {
      "type": "select",
      "id": "mobile_card_size",
      "label": "t:settings.mobile_card_size",
      "options": [
        {
          "value": "60cqw",
          "label": "t:options.one_number"
        },
        {
          "value": "44cqw",
          "label": "t:options.two_number"
        }
      ],
      "default": "60cqw",
      "visible_if": "{{ section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "range",
      "id": "columns_gap",
      "label": "t:settings.horizontal_gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 16,
      "visible_if": "{{ section.settings.layout_type == 'grid' or section.settings.layout_type == 'carousel' }}"
    },
    {
      "type": "range",
      "id": "rows_gap",
      "label": "t:settings.vertical_gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 16,
      "visible_if": "{{ section.settings.layout_type == 'grid' }}"
    },
    {
      "type": "header",
      "content": "t:content.carousel_navigation",
      "visible_if": "{{ section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "select",
      "id": "icons_style",
      "label": "t:settings.icon",
      "options": [
        {
          "value": "arrow",
          "label": "t:options.arrows"
        },
        {
          "value": "chevron",
          "label": "t:options.chevrons"
        },
        {
          "value": "arrows_large",
          "label": "t:options.arrows_large"
        },
        {
          "value": "chevron_large",
          "label": "t:options.chevron_large"
        },
        {
          "value": "none",
          "label": "t:options.none"
        }
      ],
      "default": "arrow",
      "visible_if": "{{ section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "select",
      "id": "icons_shape",
      "label": "t:settings.icon_background",
      "options": [
        {
          "value": "none",
          "label": "t:options.none"
        },
        {
          "value": "circle",
          "label": "t:options.circle"
        },
        {
          "value": "square",
          "label": "t:options.square"
        }
      ],
      "default": "none",
      "visible_if": "{{ section.settings.icons_style != 'none' and section.settings.layout_type == 'carousel' or section.settings.carousel_on_mobile == true }}"
    },
    {
      "type": "header",
      "content": "t:content.section_layout"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "page-width",
          "label": "t:options.page"
        },
        {
          "value": "full-width",
          "label": "t:options.full"
        }
      ],
      "default": "page-width"
    },
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:settings.background_color",
      "placeholder": "t:settings.default"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 32
    }
  ],
  "presets": [
    {
      "name": "t:names.blog_posts_carousel",
      "category": "t:categories.storytelling",
      "blocks": {
        "static-blog-title": {
          "type": "_featured-blog-posts-title",
          "name": "t:names.title",
          "static": true,
          "settings": {
            "text": "<h3>{{ closest.blog.title }}</h3>",
            "type_preset": "rte"
          }
        },
        "static-blog-post-card": {
          "type": "_featured-blog-posts-card",
          "name": "t:names.blog_card",
          "static": true,
          "settings": {},
          "blocks": {
            "title": {
              "type": "_heading",
              "name": "t:names.title",
              "static": true,
              "settings": {
                "text": "<h4>{{ closest.article.title }}</h4>",
                "show_alignment": false
              }
            },
            "blog-post-info-text": {
              "type": "_blog-post-info-text",
              "name": "t:names.details",
              "static": true,
              "settings": {
                "padding-block-start": 0,
                "padding-block-end": 0,
                "show_alignment": false
              }
            },
            "blog-post-description": {
              "type": "_blog-post-description",
              "name": "t:names.excerpt",
              "static": true,
              "settings": {
                "padding-block-start": 8,
                "padding-block-end": 0
              }
            }
          }
        }
      },
      "settings": {
        "layout_type": "carousel",
        "post_limit": 5,
        "columns": 3,
        "columns_gap": 8,
        "mobile_card_size": "60cqw",
        "icons_style": "arrow",
        "icons_shape": "circle",
        "gap": 12,
        "padding-block-start": 48,
        "padding-block-end": 48
      }
    },
    {
      "name": "t:names.blog_posts_grid",
      "category": "t:categories.storytelling",
      "blocks": {
        "static-blog-title": {
          "type": "_featured-blog-posts-title",
          "name": "t:names.title",
          "static": true,
          "settings": {
            "text": "<h3>{{ closest.blog.title }}</h3>",
            "type_preset": "rte"
          }
        },
        "static-blog-post-card": {
          "type": "_featured-blog-posts-card",
          "name": "t:names.blog_card",
          "static": true,
          "settings": {},
          "blocks": {
            "title": {
              "type": "_heading",
              "name": "t:names.title",
              "static": true,
              "settings": {
                "text": "<h4>{{ closest.article.title }}</h4>",
                "show_alignment": false
              }
            },
            "blog-post-info-text": {
              "type": "_blog-post-info-text",
              "name": "t:names.details",
              "static": true,
              "settings": {
                "padding-block-start": 0,
                "padding-block-end": 0,
                "show_alignment": false
              }
            },
            "blog-post-description": {
              "type": "_blog-post-description",
              "name": "t:names.excerpt",
              "static": true,
              "settings": {
                "padding-block-start": 8,
                "padding-block-end": 0
              }
            }
          }
        }
      },
      "settings": {
        "layout_type": "grid",
        "carousel_on_mobile": false,
        "columns": 3,
        "mobile_columns": "2",
        "columns_gap": 8,
        "rows_gap": 8,
        "gap": 12,
        "padding-block-start": 48,
        "padding-block-end": 48
      }
    },
    {
      "name": "t:names.blog_posts_editorial",
      "category": "t:categories.storytelling",
      "blocks": {
        "static-blog-title": {
          "type": "_featured-blog-posts-title",
          "name": "t:names.title",
          "static": true,
          "settings": {
            "text": "<h3>{{ closest.blog.title }}</h3>",
            "type_preset": "rte"
          }
        },
        "static-blog-post-card": {
          "type": "_featured-blog-posts-card",
          "name": "t:names.blog_card",
          "static": true,
          "settings": {},
          "blocks": {
            "title": {
              "type": "_heading",
              "name": "t:names.title",
              "static": true,
              "settings": {
                "text": "<h4>{{ closest.article.title }}</h4>",
                "show_alignment": false
              }
            },
            "blog-post-info-text": {
              "type": "_blog-post-info-text",
              "name": "t:names.details",
              "static": true,
              "settings": {
                "padding-block-start": 0,
                "padding-block-end": 0,
                "show_alignment": false
              }
            },
            "blog-post-description": {
              "type": "_blog-post-description",
              "name": "t:names.excerpt",
              "static": true,
              "settings": {
                "padding-block-start": 8,
                "padding-block-end": 0
              }
            }
          }
        }
      },
      "settings": {
        "layout_type": "editorial",
        "carousel_on_mobile": false,
        "gap": 64,
        "padding-block-start": 48,
        "padding-block-end": 48
      }
    }
  ]
}
{% endschema %}
