

<div {%- render 'section-attr' -%}>
  <section class='slideshow-v2'>
    <div class='slideshow-v2__mid'>
      <div
        style='--color-wrapper: {{ section.settings.color_wrapper }}'
        class='slideshow-v2__slide'
      >
        <div class='slideshow-v2__circle-wrapper'>
          <div style='--color-inside: {{ section.settings.color_inside }}' class='slideshow-v2__mid__circle'></div>
        </div>
        <div class='slideshow-v2__text1__wrapper'>
          <div class='slideshow-v2__text1'>{{ section.settings.text1 }}</div>
        </div>
        <div class='slideshow-v2__midtext__wrapper'>
          <div class='slideshow-v2__text2'>{{ section.settings.text2 }}</div>
          <div class='slideshow-v2__text3'>{{ section.settings.text3 }}</div>
        </div>
        <div class='slideshow-v2__btn__wrapper'>
          <div class='slideshow-v2__btn'>
            {% render 'button',
              text: section.settings.button_text,
              link: section.settings.button_link,
              mode: section.settings.button_mode,
              style: section.settings.button_style,
              size: section.settings.button_size,
              radius: section.settings.button_radius,
              padding: section.settings.button_padding
            %}
          </div>
        </div>
        <xo-carousel class='slideshow-v2__carousel' xo-type='fade' xo-speed='600' xo-name='slsv2-carousel' xo-loop='true'>
          <xo-carousel-inner>
            <xo-carousel-list role='list' aria-label='{{ 'general.slider.name' | t }}'>
              {% for block in section.blocks %}
                <xo-carousel-slide aria-roledescription='{{ 'sections.slideshow.slide' | t }}' aria-label='{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}'>
                  <div class='slideshow-v2__mid__img'>
                    {%- render 'image', image: block.settings.image, lazyload: false -%}
                  </div>
                </xo-carousel-slide>
              {% endfor %}
            </xo-carousel-list>
          </xo-carousel-inner>
        </xo-carousel>
      </div>
    </div>
    <div class='slideshow-v2__controls'>
      <div class='slideshow-v2__buttons'>
        <button onclick='xoCarousel.prev("slsv2-carousel", 1)' class='slideshow-v2__button slideshow-v2__prev'>
          <svg class='embla__button__svg' viewBox='0 0 532 532'>
            <path
              d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
            ></path>
          </svg>
        </button>
        <button onclick='xoCarousel.next("slsv2-carousel", 1)' class='slideshow-v2__button slideshow-v2__next'>
          <svg class='embla__button__svg' viewBox='0 0 532 532'>
            <path
              d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </section>
</div>

{% schema %}
{
  "name": "t:sections.slideshow_v2.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "color",
      "id": "color_wrapper",
      "label": "t:sections.slideshow_v2.settings.color_wrapper.label",
      "default": "#B7B7B7"
    },
    {
      "type": "color",
      "id": "color_inside",
      "label": "t:sections.slideshow_v2.settings.color_inside.label",
      "default": "#9B9B9B"
    },
    {
      "type": "text",
      "id": "text1",
      "label": "t:sections.slideshow_v2.settings.text1.label",
      "default": "Default text"
    },
    {
      "type": "richtext",
      "id": "text2",
      "label": "t:sections.slideshow_v2.settings.text2.label",
      "default": "<p>Default text</p>"
    },
    {
      "type": "text",
      "id": "text3",
      "label": "t:sections.slideshow_v2.settings.text3.label",
      "default": "Default text"
    },
    {
      "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
    },
    {
      "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_v2.blocks.name.label",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow_v2.blocks.image.label",
          "info": "t:sections.slideshow_v2.blocks.image.info"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow_v2.presets.name"
    }
  ]
}
{% endschema %}
