<div class="container-desktop-vertical-margin" {% render 'overwrite-theme-style', desktop_settings: section.settings %}>
    <div class="container-mobile-vertical-margin" {% render 'overwrite-theme-style', settings: section.settings %}>
        <div class="section-slideshow swiper slideshow-swiper-height" 
        data-use-loop="{% if section.blocks.size < 2 %} false {% else %}{{ section.settings.use_loop }}{% endif %}" 
        data-use-autoplay="{% if section.blocks.size < 2 %} false {% else %}{{ section.settings.use_autoplay }}{% endif %}"
        data-autoplay-delay="{{ section.settings.slide_view_duration }}" 
        data-slideshow-desktop-navigation="{{ section.settings.desktop_main_slider_navigation }}" 
        data-slideshow-mobile-navigation="{{ section.settings.mobile_main_slider_navigation }}" 
        >
            <div class="swiper-wrapper">
                {% for block in section.blocks %}
                    <div class="swiper-slide slideshow-swiper-slide-height" >
                        <div class="{% unless section.settings.full_width %}container{% endunless %} slideshow-swiper-height">
                            {%- if block.settings.video_webm != blank or block.settings.video_mp4 != blank or block.settings.video_mov != blank -%}
                                <div class="video-banner slideshow-swiper-height">
                                    <div class="video-banner-video slideshow-swiper-height">
                                        <video class="{{ mobile_device_class }} product-image-and-video-video-container slideshow-content" autoplay playsinline muted loop>
                                            {% if block.settings.video_webm != blank %}
                                                <source src="{{ block.settings.video_webm }}" type="video/webm">
                                            {% endif %}
                                            {% if block.settings.video_mp4 != blank %}
                                                <source src="{{ block.settings.video_mp4 }}" type="video/mp4">
                                            {% endif %}
                                            {% if block.settings.video_mov != blank %}
                                                <source src="{{ block.settings.video_mov }}" type="video/mp4">
                                            {% endif %}
                                        </video>
                                    </div>
                                </div>
                            {%- else -%}
                                <div class="image-banner-container slideshow-swiper-height" {% if block.settings.click_url != blank %} onclick="location.href='{{ block.settings.click_url }}';" {% endif %}>
                                    {% assign mobile_image = block.settings.image %}
                                    {% assign desktop_image = block.settings.image_desktop %}
                            
                                    {%- if mobile_image != blank and desktop_image == blank -%}
                                        {% assign desktop_image = mobile_image %}
                                    {%- elsif mobile_image == blank and desktop_image != blank -%}
                                        {% assign mobile_image = desktop_image %}
                                    {%- endif -%}
                            
                                    {% render 'image', 
                                        image: mobile_image, 
                                        class: 'image-banner-container-image-mobile slideshow-content',
                                        placeholder_padding_vertical: 40,
                                        placeholder_padding_horizontal: 40 %}
                                        
                                    {%- if block.settings.desktop_not_optimize -%}
                                        <img src="{{ desktop_image | img_url: 'master' }}" class="image-banner-container-image-desktop" />
                                    {%- else -%}
                                        {% render 'image', 
                                            image: desktop_image, 
                                            class: 'image-banner-container-image-desktop slideshow-content' %}
                                    {%- endif -%}
                            
                                    {%- capture style -%}
                                        align-items: {{ block.settings.alignment }};
                            
                                        {%- if block.settings.alignment == "center" -%}
                                            text-align: center;
                                        {%- elsif block.settings.alignment == "end" -%}
                                            text-align: right;
                                        {%- endif -%}
                                    {%- endcapture -%}
                            
                                    <div class="image-banner-content {{ block.settings.position }}" style="{{ style | strip_newlines }}">
                                                                        
                                            {% if block.settings.heading != blank %}
                                                {%- capture heading_style -%}

                                                    {%- if block.settings.heading_margin_top -%}
                                                        margin-top: {{ block.settings.heading_margin_top }}px;
                                                    {%- endif -%}

                                                    {%- if block.settings.heading_margin_bottom -%}
                                                        margin-bottom: {{ block.settings.heading_margin_bottom }}px;
                                                    {%- endif -%}

                                                    {%- if block.settings.heading_text_color != blank -%}
                                                        color: {{ block.settings.heading_text_color | color_to_hex }};
                                                    {%- endif -%}

                                                    {%- if block.settings.heading_font_size != blank and block.settings.heading_font_size > 0 -%}
                                                        font-size: {{ block.settings.heading_font_size }}px;
                                                    {%- endif -%}
                                                {%- endcapture -%}
                            
                                                <h2 class="{% if block.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', append_style: heading_style %}>
                                                    <span class="desktop">{{ block.settings.heading }}</span>
                                                    <span class="mobile" style="{%- if block.settings.heading_font_size_mobile != blank and block.settings.heading_font_size_mobile > 0 -%}font-size: {{ block.settings.heading_font_size_mobile }}px;{%- endif -%}">{{ block.settings.heading }}</span>
                                                </h2>
                                            {%- endif -%}
                                            {% if block.settings.text != blank %}
                                                {%- capture text_style -%}
                                                    {%- if block.settings.text_margin_top -%}
                                                        margin-top: {{ block.settings.text_margin_top }}px;
                                                    {%- endif -%}

                                                    {%- if block.settings.text_margin_bottom -%}
                                                        margin-bottom: {{ block.settings.text_margin_bottom }}px;
                                                    {%- endif -%}

                                                    {%- if block.settings.text_text_color != blank -%}
                                                        color: {{ block.settings.text_text_color | color_to_hex }};
                                                    {%- endif -%}

                                                    {%- if block.settings.text_font_size != blank and block.settings.text_font_size > 0 -%}
                                                        font-size: {{ block.settings.text_font_size }}px;
                                                    {%- endif -%}
                                                {%- endcapture -%}

                                                <div class="{% if block.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', append_style: text_style %}>
                                                    <span class="desktop">{{ block.settings.text }}</span>
                                                    <span class="mobile" style="{%- if block.settings.text_font_size_mobile != blank and block.settings.text_font_size_mobile > 0 -%}font-size: {{ block.settings.text_font_size_mobile }}px;{%- endif -%}">{{ block.settings.text }}</span>
                                                </div>
                                            {%- endif -%}
                                            {% if block.settings.button_label != blank %}
                                                {%- capture button_style -%}
                                                    {%- if block.settings.button_margin_top -%}
                                                        margin-top: {{ block.settings.button_margin_top }}px;
                                                    {%- endif -%}

                                                    {%- if block.settings.button_margin_bottom -%}
                                                        margin-bottom: {{ block.settings.button_margin_bottom }}px;
                                                    {%- endif -%}

                                                    {%- if block.settings.button_background_color != blank -%}
                                                        background-color: {{ block.settings.button_background_color | color_to_hex }};
                                                    {%- endif -%}

                                                    {%- if block.settings.button_text_color != blank -%}
                                                        color: {{ block.settings.button_text_color | color_to_hex }};
                                                    {%- endif -%}

                                                    {%- if block.settings.button_font_size != blank and block.settings.button_font_size > 0 -%}
                                                        font-size: {{ block.settings.button_font_size }}px;
                                                    {%- endif -%}
                                                {%- endcapture -%}
                                                <a href="{{ block.settings.button_link }}" class="btn {% if block.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', append_style: button_style %}>
                                                    <span class="desktop">{{ block.settings.button_label | escape }}</span>
                                                    <span class="mobile" style="{%- if block.settings.button_font_size_mobile != blank and block.settings.button_font_size_mobile > 0 -%}font-size: {{ block.settings.button_font_size_mobile }}px;{%- endif -%}">{{ block.settings.button_label | escape }}</span>
                                                </a>
                                            {%- endif -%}
                                    
                                    </div>
                                </div>
                            {%- endif -%}
                        </div>
                    </div>
                {% endfor %}
            </div>
            {%- if section.settings.show_pagination_dots -%}
                <div class="swiper-pagination"></div>    
            {%- endif -%}

            {%- if section.settings.desktop_main_slider_navigation or section.settings.mobile_main_slider_navigation -%}
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            {%- endif -%}
        </div>
    </div>
</div>

{% schema %}
{
    "name": "t:sections.section-slideshow.name",
    "settings": [
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "checkbox",
            "id": "full_width",
            "label": "t:sections.section-slideshow.settings.full_width",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "desktop_not_optimize",
            "label": "t:sections.section-slideshow.settings.desktop_not_optimize",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "use_loop",
            "label": "t:sections.section-slideshow.settings.use_loop",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "use_autoplay",
            "label": "t:sections.section-slideshow.settings.use_autoplay",
            "default": true
        },
        {
            "type": "range",
            "id": "slide_view_duration",
            "label": "t:sections.section-slideshow.settings.slide_view_duration",
            "min": 1,
            "max": 10,
            "step": 1,
            "unit": "sec",
            "default": 5
        },
        {
            "type": "checkbox",
            "id": "desktop_main_slider_navigation",
            "default": true,
            "label": "t:sections.section-slideshow.settings.desktop_main_slider_navigation"
        },
        {
            "type": "checkbox",
            "id": "mobile_main_slider_navigation",
            "default": false,
            "label": "t:sections.section-slideshow.settings.mobile_main_slider_navigation"
        },
        {
            "type": "checkbox",
            "id": "show_pagination_dots",
            "default": true,
            "label": "t:sections.section-slideshow.settings.show_pagination_dots"
        },
        {
            "type": "header",
            "content": "t:sections.general.desktop_margin"
        },
        {
            "type": "range",
            "id": "desktop_margin_top",
            "label": "t:sections.section-slideshow.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.section-slideshow.settings.desktop_margin_bottom",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-slideshow.settings.overwrite_theme_margin_top",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-slideshow.settings.overwrite_theme_margin_bottom",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        }
    ],
    "blocks":[
        {
            "type": "slideItem",
            "name": "t:sections.section-slideshow.blocks.slideItem.name",
            "settings": [
                {
                    "type": "header",
                    "content": "t:sections.section-slideshow.blocks.slideItem.settings.info",
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.use_video_info"
                },
                {
                    "type": "text",
                    "id": "video_webm",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.video_webm",
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.video_webm_info"
                },
                {
                    "type": "text",
                    "id": "video_mp4",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.video_mp4"
                },
                {
                    "type": "text",
                    "id": "video_mov",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.video_mov"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-slideshow.blocks.slideItem.settings.image_header"
                },
                {
                    "type": "image_picker",
                    "id": "image_desktop",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.image_desktop"
                },
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.image"
                },
                {
                    "type": "url",
                    "id": "click_url",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.click_url"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-slideshow.blocks.slideItem.settings.heading_header"
                },
                {
                    "type": "richtext",
                    "id": "heading",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.heading"
                },
                {
                    "type": "range",
                    "id": "heading_margin_top",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.heading_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "heading_margin_bottom",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.heading_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "color",
                    "id": "heading_text_color",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.heading_text_color",
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "heading_font_size",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.heading_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "heading_font_size_mobile",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.heading_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-slideshow.blocks.slideItem.settings.text_header"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.text"
                },
                {
                    "type": "range",
                    "id": "text_margin_top",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.text_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "text_margin_bottom",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.text_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "color",
                    "id": "text_text_color",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.text_text_color",
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_text_color_info_text"
                },
                {
                    "type": "range",
                    "id": "text_font_size",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.text_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_font_size_info_text"
                },
                {
                    "type": "range",
                    "id": "text_font_size_mobile",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.text_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_font_size_info_text"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-slideshow.blocks.slideItem.settings.button_header"
                },
                {
                    "type": "text",
                    "id": "button_label",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_label"
                },
                {
                    "type": "url",
                    "id": "button_link",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_link"
                },
                {
                    "type": "range",
                    "id": "button_margin_top",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "button_margin_bottom",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "color",
                    "id": "button_background_color",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_background_color",
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_background_color_info"
                },
                {
                    "type": "range",
                    "id": "button_font_size",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_font_size_info_button_text"
                },
                {
                    "type": "range",
                    "id": "button_font_size_mobile",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_font_size_info_button_text"
                },
                {
                    "type": "color",
                    "id": "button_text_color",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.button_text_color",
                    "info": "t:sections.section-slideshow.blocks.slideItem.settings.overwrite_theme_background_color_info_text"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-slideshow.blocks.slideItem.settings.content_location"
                },
                {
                    "type": "select",
                    "id": "alignment",
                    "default": "center",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.alignment",
                    "options": [
                        {
                            "value": "start",
                            "label": "t:sections.section-slideshow.blocks.slideItem.settings.alignment_start"
                        },
                        {
                            "value": "center",
                            "label": "t:sections.section-slideshow.blocks.slideItem.settings.alignment_center"
                        },
                        {
                            "value": "end",
                            "label": "t:sections.section-slideshow.blocks.slideItem.settings.alignment_end"
                        }
                    ]
                },
                {
                    "type": "select",
                    "id": "position",
                    "default": "middle",
                    "label": "t:sections.section-slideshow.blocks.slideItem.settings.position",
                    "options": [
                        {
                            "value": "top",
                            "label": "t:sections.section-slideshow.blocks.slideItem.settings.position_top"
                        },
                        {
                            "value": "middle",
                            "label": "t:sections.section-slideshow.blocks.slideItem.settings.position_middle"
                        },
                        {
                            "value": "bottom",
                            "label": "t:sections.section-slideshow.blocks.slideItem.settings.position_bottom"
                        }
                    ]
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-slideshow.name"
        }
    ]
}
{% endschema %}