

<div id="{{section.settings.id}}">
{% liquid
  assign max_items = section.blocks.size
  if section.settings.layout_type == 'carousel'
    assign max_items = section.settings.columns | plus: 2
  endif
%}

<div class="section-background color-{{ section.settings.color_scheme }}"></div>

<div
  class=" 
    section
    section--{{ section.settings.section_width }}
    color-{{ section.settings.color_scheme }}
    section-group-carousel
    spacing-style
    gap-style
  "
  style="
    {% render 'spacing-style', settings: section.settings %}
    {% render 'gap-style', value: section.settings.gap %}
  "
>
<div class="{{section.settings.css}}">
  {% capture list_items %}
  {% for block in section.blocks %}
    {% assign items_count = section.blocks.size %}
    {% if block.type != blank %}
      <div class="group-carousel__item" {{ block.shopify_attributes }}>
        {% comment %} Render only the current block {% endcomment %}
        {% render block %}
      </div>
      {% unless forloop.last %}
        <!--@list/split-->
      {% endunless %}
    {% endif %}
  {% endfor %}
{% endcapture %}


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

  {% render 'resource-list',
    list_items_array: list_items_array,
    settings: section.settings,
    slide_count: max_items,
    content_type: 'collections'
  %}
  </div>
</div>

{% if items_count <= section.settings.columns %}
  <style>
    @media screen and (width > 750px) {
    #shopify-section-{{ section.id }} slideshow-arrows{
    display:none;
    }
    slideshow-slides {
      justify-content: space-between !important;
    }
  </style>
{% endif %}
</div>

{% schema %}
{
  "name": "Cartes informatives",
  "class": "group-carousel-section",
  "blocks": [
    {
      "type": "custom-group"
    }
  ],
  "settings": [
    {
      "type": "text",
      "id": "id",
      "label": "Ajout d'un ID"
    },
    {
      "type": "text",
      "id": "css",
      "label": "Ajout de class CSS"
    },
    {
      "type": "header",
      "content": "t:content.cards_layout"
    },{
      "type": "select",
      "id": "layout_type",
      "label": "t:settings.layout_type",
      "options": [
        {
          "value": "carousel",
          "label": "t:options.carousel"
        }
      ],
      "default": "carousel"
    },
    {
      "type": "range",
      "id": "columns",
      "label": "t:settings.columns",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4,
      "visible_if": "{{ section.settings.layout_type == 'grid' or section.settings.layout_type == 'carousel' }}"
    },
    {
      "type": "range",
      "id": "columns_gap",
      "label": "t:settings.horizontal_gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 8,
      "visible_if": "{{ section.settings.layout_type == 'grid' or section.settings.layout_type == 'carousel' }}"
    },
    {
      "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_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-1"
    },
    {
      "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": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Cartes informatives : Carrousel",
      "category": "Web Artisan - Custom section",
      "settings": {
        "layout_type": "carousel",
        "columns": 3,
        "columns_gap": 8,
        "icons_style": "arrow",
        "icons_shape": "none",
        "section_width": "page-width",
        "gap": 12,
        "color_scheme": "scheme-1",
        "padding-block-start": 24,
        "padding-block-end": 24
      }
    }
  ]
}
{% endschema %}