

<div {%- render 'section-attr' -%}>
  <section class='slideshow-v1'>
    <div class='slider-container'>
      <xo-grid style='--xs: 1; --md: 2;' class='slideshow-v1__grid'>
        <xo-carousel
          class='embla embla--content'
          xo-vertical
          xo-sync-id='carousel-sync-slsv1'
          xo-easing='easeOutCubic'
          xo-speed='500'
        >
          <xo-carousel-inner class='embla__viewport'>
            <xo-carousel-list role='list' aria-label='{{ 'general.slider.name' | t }}' class='embla__container'>
              {%- for block in section.blocks -%}
                <xo-carousel-slide aria-roledescription='{{ 'sections.slideshow.slide' | t }}' aria-label='{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}' style='--ct-bg-color: {{ block.settings.body_text }}' class='embla__slide'>
                  <div class='embla__content'>
                    <div class='embla__content--title'>{{ block.settings.title }}</div>
                    <div class='embla__content--sub'>{{ block.settings.sub }}</div>
                    <div class='embla__content--btn'>
                      {% render 'button',
                        text: block.settings.button_text,
                        link: block.settings.button_link,
                        mode: block.settings.button_mode,
                        style: block.settings.button_style,
                        size: block.settings.button_size,
                        radius: block.settings.button_radius,
                        padding: block.settings.button_padding
                      %}
                    </div>
                  </div>
                </xo-carousel-slide>
              {%- endfor -%}
            </xo-carousel-list>
          </xo-carousel-inner>

          <div class='social'>
            <div class='social__list'>
              <a href='{{ section.settings.url1 }}' class='social__list__item'>{{ section.settings.icon1 }}</a>
              <a href='{{ section.settings.url2 }}' class='social__list__item'>{{ section.settings.icon2 }}</a>
              <a href='{{ section.settings.url3 }}' class='social__list__item'>{{ section.settings.icon3 }}</a>
              <a href='{{ section.settings.url4 }}' class='social__list__item'>{{ section.settings.icon4 }}</a>
            </div>
          </div>
        </xo-carousel>

        <xo-carousel
          class='embla embla--image'
          xo-sync-id='carousel-sync-slsv1'
          xo-easing='easeOutCubic'
          xo-speed='500'
          xo-name='slsv1-carousel'
        >
          <xo-carousel-inner class='embla__viewport'>
            <xo-carousel-list role='list' aria-label='{{ 'general.slider.name' | t }}' class='embla__container'>
              {%- for block in section.blocks -%}
                <xo-carousel-slide aria-roledescription='{{ 'sections.slideshow.slide' | t }}' aria-label='{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}' class='embla__slide'>
                  {%- render 'image', image: block.settings.image, lazyload: false -%}
                </xo-carousel-slide>
              {%- endfor -%}
            </xo-carousel-list>
          </xo-carousel-inner>
                <div class='embla__controls'>
        <div class='embla__buttons'>
          <xo-carousel-prev class='slideshow-v1__xo-btn'>
            <button class='embla__button embla__button--prev' type='button'>
              <svg class='embla__button__svg' viewBox='0 0 532 532'>
                <path
                  fill="currentColor"
                  d="M11.354 176.34c-13.805-13.793-13.805-36.208 0-50.001 13.804-13.785 36.238-13.785 50.034 0L266 330.78l204.61-204.442c13.805-13.785 36.239-13.785 50.044 0 13.796 13.793 13.796 36.208 0 50.002a5994246.277 5994246.277 0 0 0-229.454 229.332 35.065 35.065 0 0 1-25.126 10.326c-9.2 0-18.26-3.393-25.2-10.326C194.973 359.808 34.31 199.269 11.354 176.34Z"
                ></path>
              </svg>
            </button>
          </xo-carousel-prev>
          <xo-carousel-next class='slideshow-v1__xo-btn'>
            <button class='embla__button embla__button--next' type='button'>
              <svg class='embla__button__svg' viewBox='0 0 532 532'>
                <path
                  fill="currentColor"
                  d="M520.646 355.66c13.805 13.793 13.805 36.208 0 50.001-13.804 13.785-36.238 13.785-50.034 0L266 201.22 61.391 405.66c-13.805 13.785-36.239 13.785-50.044 0-13.796-13.793-13.796-36.208 0-50.002 22.947-22.928 206.507-206.395 229.454-229.332a35.065 35.065 0 0 1 25.126-10.326c9.2 0 18.26 3.393 25.2 10.326 45.901 45.865 206.564 206.404 229.52 229.332Z"
                ></path>
              </svg>
            </button>
          </xo-carousel-next>
        </div>
      </div>
        </xo-carousel>
      </xo-grid>
    </div>
  </section>
</div>

{% schema %}
{
  "name": "t:sections.slideshow_v1.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "html",
      "id": "icon1",
      "label": "t:sections.slideshow_v1.settings.icon1.label"
    },
    {
      "type": "url",
      "id": "url1",
      "label": "t:sections.slideshow_v1.settings.url1.label",
      "default": "/collections/all"
    },
    {
      "type": "html",
      "id": "icon2",
      "label": "t:sections.slideshow_v1.settings.icon2.label"
    },
    {
      "type": "url",
      "id": "url2",
      "label": "t:sections.slideshow_v1.settings.url2.label",
      "default": "/collections/all"
    },
    {
      "type": "html",
      "id": "icon3",
      "label": "t:sections.slideshow_v1.settings.icon3.label"
    },
    {
      "type": "url",
      "id": "url3",
      "label": "t:sections.slideshow_v1.settings.url3.label",
      "default": "/collections/all"
    },
    {
      "type": "html",
      "id": "icon4",
      "label": "t:sections.slideshow_v1.settings.icon4.label"
    },
    {
      "type": "url",
      "id": "url4",
      "label": "t:sections.slideshow_v1.settings.url4.label",
      "default": "/collections/all"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "t:sections.all.background_type.label",
      "options": [
        {
          "value": "color",
          "label": "t:sections.all.background_type.option__1.label"
        },
        {
          "value": "gradient",
          "label": "t:sections.all.background_type.option__2.label"
        },
        {
          "value": "image",
          "label": "t:sections.all.background_type.option__3.label"
        },
        {
          "value": "video",
          "label": "t:sections.all.background_type.option__4.label"
        }
      ],
      "default": "color"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.background_color.label",
      "alpha": true,
      "visible_if": "{{ section.settings.background_type == 'color' }}"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.background_gradient.label",
      "visible_if": "{{ section.settings.background_type == 'gradient' }}"
    },
    {
      "type": "number",
      "id": "background_margin",
      "label": "t:sections.all.background_margin.label",
      "default": 0
    },
    {
      "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
    }
  ],
  "blocks": [
    {
      "type": "block",
      "name": "t:sections.slideshow_v1.blocks.name.label",
      "limit": 10,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow_v1.blocks.image.label"
        },
        {
          "type": "color",
          "id": "body_text",
          "label": "t:sections.slideshow_v1.blocks.body_text.label",
          "default": "#fdc97c"
        },
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.slideshow_v1.blocks.title.label",
          "default": "TITLE"
        },
        {
          "type": "text",
          "id": "sub",
          "label": "t:sections.slideshow_v1.blocks.sub.label",
          "default": "SUB TITLE"
        },
        {
          "type": "header",
          "content": "t:sections.all.button_heading.content"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "t:sections.all.button_text.label",
          "default": "ALL PRODUCTS"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.all.button_link.label",
          "default": "/collections/all"
        },
        {
          "type": "select",
          "id": "button_mode",
          "label": "t:sections.all.button_mode.label",
          "options": [
            {
              "value": "light",
              "label": "t:sections.all.button_mode.option__1.label"
            },
            {
              "value": "dark",
              "label": "t:sections.all.button_mode.option__2.label"
            },
            {
              "value": "accent",
              "label": "t:sections.all.button_mode.option__3.label"
            }
          ],
          "default": "light"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "t:sections.all.button_style.label",
          "options": [
            {
              "value": "primary",
              "label": "t:sections.all.button_style.option__1.label"
            },
            {
              "value": "secondary",
              "label": "t:sections.all.button_style.option__2.label"
            },
            {
              "value": "tertiary",
              "label": "t:sections.all.button_style.option__3.label"
            },
            {
              "value": "link",
              "label": "t:sections.all.button_style.option__4.label"
            }
          ],
          "default": "secondary"
        },
        {
          "type": "select",
          "id": "button_size",
          "label": "t:sections.all.button_size.label",
          "options": [
            {
              "value": "xs",
              "label": "t:sections.all.button_size.option__0.label"
            },
            {
              "value": "sm",
              "label": "t:sections.all.button_size.option__1.label"
            },
            {
              "value": "md",
              "label": "t:sections.all.button_size.option__2.label"
            },
            {
              "value": "lg",
              "label": "t:sections.all.button_size.option__3.label"
            }
          ],
          "default": "sm"
        },
        {
          "type": "range",
          "id": "button_radius",
          "label": "t:sections.all.button_radius.label",
          "max": 4,
          "min": 0,
          "step": 0.2,
          "unit": "rem",
          "default": 0.8
        },
        {
          "type": "range",
          "id": "button_padding",
          "label": "t:sections.all.button_padding.label",
          "info": "t:sections.all.button_padding.info",
          "max": 10,
          "min": 0,
          "step": 0.2,
          "unit": "rem",
          "default": 1.4
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow_v1.presets.name"
    }
  ]
}
{% endschema %}
