

{% 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-carousel
    spacing-style
    gap-style
  "
  style="
    {% render 'spacing-style', settings: section.settings %}
    {% render 'gap-style', value: 12 %}
  "
  data-testid="carousel-section"
>
  {% content_for 'block', type: 'group', id: 'static-header' %}

  {% content_for 'block', type: '_carousel-content', id: 'static-carousel-content', closest.product: null %}
</div>

{% schema %}
{
  "name": "t:names.carousel",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "range",
      "id": "columns",
      "label": "t:settings.columns",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4
    },
    {
      "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": "1"
    },
    {
      "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": "columns_gap",
      "label": "t:settings.horizontal_gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 8
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:settings.background_color",
      "placeholder": "t:settings.default"
    },
    {
      "type": "header",
      "content": "t:content.navigation"
    },
    {
      "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"
    },
    {
      "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' }}"
    },
    {
      "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": "t:names.carousel",
      "category": "t:categories.storytelling",
      "settings": {
        "columns": 3,
        "columns_gap": 12,
        "padding-block-start": 48,
        "padding-block-end": 48
      },
      "blocks": {
        "static-header": {
          "type": "group",
          "name": "t:names.header",
          "static": true,
          "settings": {
            "content_direction": "row",
            "vertical_on_mobile": false,
            "horizontal_alignment": "space-between",
            "vertical_alignment": "flex-end",
            "align_baseline": true,
            "horizontal_alignment_flex_direction_column": "flex-start",
            "vertical_alignment_flex_direction_column": "center",
            "gap": 12,
            "width": "fill",
            "custom_width": 100,
            "width_mobile": "fill",
            "custom_width_mobile": 100,
            "height": "fit",
            "custom_height": 100,
            "background_media": "none",
            "video_position": "cover",
            "background_image_position": "cover",
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 16,
            "padding-inline-start": 0,
            "padding-inline-end": 0
          },
          "blocks": {
            "heading": {
              "type": "text",
              "name": "t:names.header",
              "settings": {
                "text": "t:html_defaults.discover_elevated_design",
                "type_preset": "h3",
                "font": "var(--font-body--family)",
                "wrap": "pretty",
                "width": "fit-content",
                "max_width": "normal",
                "alignment": "left"
              }
            }
          },
          "block_order": ["heading"]
        },
        "static-carousel-content": {
          "type": "_carousel-content",
          "name": "t:names.carousel_content",
          "static": true,
          "settings": {
            "position": "top",
            "border": "none",
            "border_width": 1,
            "border_opacity": 100,
            "border_radius": 0,
            "padding-block-start": 0,
            "padding-block-end": 0,
            "padding-inline-start": 0,
            "padding-inline-end": 0,
            "height": "fit"
          },
          "blocks": {
            "card_1": {
              "type": "_card",
              "name": "t:names.card",
              "blocks": {
                "image_1": {
                  "type": "image",
                  "name": "t:names.image"
                },
                "heading_1": {
                  "type": "text",
                  "name": "t:names.heading",
                  "settings": {
                    "text": "t:html_defaults.artistry_in_action",
                    "type_preset": "h5"
                  }
                },
                "text_1": {
                  "type": "text",
                  "name": "t:names.text",
                  "settings": {
                    "text": "t:html_defaults.bold_style_recognizable"
                  }
                }
              },
              "block_order": ["image_1", "heading_1", "text_1"]
            },
            "card_2": {
              "type": "_card",
              "name": "t:names.card",
              "blocks": {
                "image_2": {
                  "type": "image",
                  "name": "t:names.image"
                },
                "heading_2": {
                  "type": "text",
                  "name": "t:names.heading",
                  "settings": {
                    "text": "t:html_defaults.uncompromising_standards",
                    "type_preset": "h5"
                  }
                },
                "text_2": {
                  "type": "text",
                  "name": "t:names.text",
                  "settings": {
                    "text": "t:html_defaults.expert_construction_finish"
                  }
                }
              },
              "block_order": ["image_2", "heading_2", "text_2"]
            },
            "card_3": {
              "type": "_card",
              "name": "t:names.card",
              "blocks": {
                "image_3": {
                  "type": "image",
                  "name": "t:names.image"
                },
                "heading_3": {
                  "type": "text",
                  "name": "t:names.heading",
                  "settings": {
                    "text": "t:html_defaults.made_to_last",
                    "type_preset": "h5"
                  }
                },
                "text_3": {
                  "type": "text",
                  "name": "t:names.text",
                  "settings": {
                    "text": "t:html_defaults.pieces_better_with_time"
                  }
                }
              },
              "block_order": ["image_3", "heading_3", "text_3"]
            },
            "card_4": {
              "type": "_card",
              "name": "t:names.card",
              "blocks": {
                "image_4": {
                  "type": "image",
                  "name": "t:names.image"
                },
                "heading_4": {
                  "type": "text",
                  "name": "t:names.heading",
                  "settings": {
                    "text": "t:html_defaults.quality_you_can_feel",
                    "type_preset": "h5"
                  }
                },
                "text_4": {
                  "type": "text",
                  "name": "t:names.text",
                  "settings": {
                    "text": "t:html_defaults.authentic_materials"
                  }
                }
              },
              "block_order": ["image_4", "heading_4", "text_4"]
            }
          },
          "block_order": ["card_1", "card_2", "card_3", "card_4"]
        }
      }
    }
  ]
}
{% endschema %}
