

{% liquid
  if section.settings.padding_top != null
    assign padding_top = '--pt: ' | append: section.settings.padding_top | append: ';'
  endif
  if section.settings.padding_bottom != null
    assign padding_bottom = '--pb: ' | append: section.settings.padding_bottom | append: ';'
  endif
%}

<section style='{{- padding_top -}} {{- padding_bottom }}' class='slideshow-v99'>
  <xo-animate xo-cascade>
    <xo-carousel
      {% if section.settings.autoplay %}
        xo-autoplay='{{ section.settings.speed | times: 1000 }}'
      {% endif %}
      xo-per-view='3'
      xo-gap='0'
      xo-speed='400'
      xo-loop
      xo-hover-pause
      xo-breakpoints='
        {
          575: {
            perView: 1,
          },
          991: {
            perView: 2,
          },
          1200: {
            perView: 3,
          },
        }
      '
    >
      <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-v99__slide {%- if block.settings.color_scheme %} color-{{ block.settings.color_scheme }}{% endif %}'>
                {% if block.settings.video != blank %}
                  <xo-video-cover
                    xo-src='{{ block.settings.video }}'
                    class='slideshow-v99__video'
                  ></xo-video-cover>
                {% elsif block.settings.background_image_desktop != blank or block.settings.background_image_mobile != blank %}
                  <div
                    class='slideshow-v99__bg-container'
                  >
                    {% if block.settings.background_image_desktop != blank %}
                      <div
                        class='xo-background-lazyload slideshow-v99__bg slideshow-v99__bg--desktop'
                        style='background-image: url("{{ block.settings.background_image_desktop | image_url: width: 100 }}")'
                      ></div>
                    {% endif %}
                    {% if block.settings.background_image_mobile != blank %}
                      <div
                        class='xo-background-lazyload slideshow-v99__bg slideshow-v99__bg--mobile'
                        style='background-image: url("{{ block.settings.background_image_mobile | image_url: width: 100 }}")'
                      ></div>
                    {% endif %}
                  </div>
                {% endif %}
                <div class='slideshow-v99__bg-color' style='background-color:{{block.settings.background_color}};background-image:{{block.settings.background_gradient}}'></div>
                <div class='slideshow-v99__text'>
                  <h3
                    class='slideshow-v99__subtitle'
                    style='--fontsize:{{block.settings.subtitle_font_size }}; --fontweight:{{block.settings.subtitle_font_weight}}'
                  >
                    {{ block.settings.subtitle }}
                  </h3>
                  <h2
                    class='slideshow-v99__title'
                    style='--fontsize:{{block.settings.title_font_size }}; --fontweight:{{block.settings.title_font_weight}}'
                  >
                    {{ block.settings.title }}
                  </h2>
                  {% 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>
    </xo-carousel>
  </xo-animate>
</section>

{% schema %}
{
  "name": "t:sections.slideshow_v2.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.slideshow_v2.settings.autoplay.label",
      "default": false
    },
    {
      "type": "range",
      "id": "speed",
      "min": 5,
      "max": 20,
      "step": 5,
      "label": "t:sections.slideshow_v2.settings.speed.label",
      "default": 5
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.slideshow_v2.settings.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.slideshow_v2.settings.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "slideshow",
      "name": "t:sections.slideshow_v2.settings.blocks.name",
      "settings": [
        {
          "type": "header",
          "content": "t:sections.slideshow_v2.settings.blocks.subtitle_heading.content"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "t:sections.slideshow_v2.settings.blocks.subtitle.label",
          "default": "SECTION SUBTITLE"
        },
        {
          "type": "range",
          "id": "subtitle_font_size",
          "min": 1,
          "max": 2,
          "step": 0.1,
          "unit": "rem",
          "label": "t:sections.slideshow_v2.settings.blocks.subtitle_font_size.label",
          "default": 1.4
        },
        {
          "type": "range",
          "id": "subtitle_font_weight",
          "min": 300,
          "max": 700,
          "step": 100,
          "label": "t:sections.slideshow_v2.settings.blocks.subtitle_font_weight.label",
          "default": 500
        },
        {
          "type": "header",
          "content": "t:sections.slideshow_v2.settings.blocks.title_heading.content"
        },
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.slideshow_v2.settings.blocks.title.label",
          "default": "SECTION TITLE",
          "info": "t:sections.slideshow_v2.settings.blocks.title.content"
        },
        {
          "type": "range",
          "id": "title_font_size",
          "min": 2,
          "max": 5,
          "step": 0.1,
          "unit": "rem",
          "label": "t:sections.slideshow_v2.settings.blocks.title_font_size.label",
          "default": 3
        },
        {
          "type": "range",
          "id": "title_font_weight",
          "min": 300,
          "max": 700,
          "step": 100,
          "label": "t:sections.slideshow_v2.settings.blocks.title_font_weight.label",
          "default": 500
        },
        {
          "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.slideshow_v2.settings.blocks.video_heading.content"
        },
        {
          "type": "textarea",
          "id": "video",
          "label": "t:sections.slideshow_v2.settings.blocks.video.label"
        },
        {
          "type": "header",
          "content": "t:sections.slideshow_v2.settings.blocks.bg_heading.content"
        },
        {
          "type": "image_picker",
          "id": "background_image_desktop",
          "label": "t:sections.slideshow_v2.settings.blocks.background_image_desktop.label"
        },
        {
          "type": "image_picker",
          "id": "background_image_mobile",
          "label": "t:sections.slideshow_v2.settings.blocks.background_image_mobile.label"
        },
        {
          "type": "header",
          "content": "t:sections.slideshow_v2.settings.blocks.color_heading.content"
        },
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:sections.slideshow_v2.settings.blocks.color_scheme.label"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "t:sections.slideshow_v2.settings.blocks.background_color.label"
        },
        {
          "type": "color_background",
          "id": "background_gradient",
          "label": "t:sections.slideshow_v2.settings.blocks.background_gradient.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow_v2.presets.name"
    }
  ]
}
{% endschema %}
