<div class="container-desktop-vertical-margin scrolling-image-desktop-container" {% render 'overwrite-theme-style', padding_top: section.settings.padding_top, padding_bottom: section.settings.padding_bottom, background_color: section.settings.color_background_main, desktop_settings: section.settings %}>
    <div class="container-mobile-vertical-margin scrolling-image-mobile-container" {% render 'overwrite-theme-style', padding_top: section.settings.padding_top, padding_bottom: section.settings.padding_bottom, background_color: section.settings.color_background_main, settings: section.settings %}>
        {%- if section.settings.eyebrow != blank -%}
            {%- capture eyebrow_style -%}
                text-align: {{ section.settings.heading_alignment }};
            {%- endcapture -%}
            <p class="ugc-videos-eyebrow {% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', 
                text_color: section.settings.heading_color, 
                font_size: section.settings.eyebrow_font_size, 
                font_weight: section.settings.eyebrow_font_weight, 
                append_style: eyebrow_style %}>
                {{ section.settings.eyebrow }}
            </p>
        {%- endif -%}

        {%- if section.settings.heading != blank -%}
            {%- capture heading_style -%}
                text-align: {{ section.settings.heading_alignment }};
                margin-bottom: {{ section.settings.headline_margin_bottom }}px;
            {%- endcapture -%}
            <h2 class="ugc-videos-headline {% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', 
                text_color: section.settings.heading_color, 
                font_size: section.settings.heading_font_size, 
                font_weight: section.settings.heading_font_weight, 
                line_height: section.settings.heading_line_height, 
                append_style: heading_style %}>
                {{ section.settings.heading }}
            </h2>
        {%- endif -%}

        {%- if section.blocks.size > 0 -%}
            {%- liquid
                assign scroll_direction = 'ltr'
                if section.settings.scroll_direction == 'right'
                assign scroll_direction = 'rtl'
                endif
            -%}
            <div class="scrolling-image" data-scrolling-speed="{{ section.settings.speed }}" data-scrolling-direction="{{ scroll_direction }}" data-pause-on-hover="{{ section.settings.pause_on_hover }}" dir="{{ scroll_direction }}">
                <div class="scrolling-image__container">  
                    {%- for block in section.blocks -%}
                        {%- capture image_style -%}
                            height: {{ block.settings.image_height }}px;
                            width: auto;
                            margin-top: {{ block.settings.overwrite_theme_margin_top }}px;
                            margin-bottom: {{ block.settings.overwrite_theme_margin_bottom }}px;
                            margin-left: {{- section.settings.gap_between_images -}}px;
                            {% if section.settings.gray_filter %}
                                filter: grayscale(100%);
                            {% endif %}
                        {%- endcapture -%}

                        {%  render 'image', 
                            image: block.settings.image,
                            style: image_style,
                            placeholder_width: 100,
                            placeholder_height: 40,
                            placeholder_padding_vertical: 0,
                            placeholder_padding_horizontal: 0
                        %}
                    {%- endfor -%}
                </div>
            </div>
        {%- endif -%}
    </div>
</div>

{% schema %}
{
    "name": "t:sections.marquee_slider.name",
    "settings": [
        {
            "type": "text",
            "id": "eyebrow",
            "label": "t:sections.marquee_slider.settings.eyebrow"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "t:sections.marquee_slider.settings.heading"
        },
        {
            "type": "select",
            "id": "heading_alignment",
            "default": "center",
            "label": "t:sections.marquee_slider.settings.heading_alignment",
            "options": [
                {
                    "value": "left",
                    "label": "t:sections.marquee_slider.settings.heading_alignment_left"
                },
                {
                    "value": "center",
                    "label": "t:sections.marquee_slider.settings.heading_alignment_center"
                },
                {
                    "value": "right",
                    "label": "t:sections.marquee_slider.settings.heading_alignment_right"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "active_animations",
            "label": "t:sections.general.active_animations",
            "default": true
        },
        {
            "type": "range",
            "id": "headline_margin_bottom",
            "label": "t:sections.marquee_slider.settings.headline_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "header",
            "content": "t:sections.marquee_slider.settings.header"
        },
        {
            "id": "scroll_direction",
            "type": "select",
            "options": [
            {
                "value": "left",
                "label": "t:sections.marquee_slider.settings.scroll_direction_left"
            },
            {
                "value": "right",
                "label": "t:sections.marquee_slider.settings.scroll_direction_right"
            }
            ],
            "default": "left",
            "label": "t:sections.marquee_slider.settings.scroll_direction"
        },
        {
            "type": "range",
            "id": "speed",
            "label": "t:sections.marquee_slider.settings.scroll_speed",
            "min": 0,
            "max": 300,
            "step": 10,
            "default": 30
        },
        {
            "type": "checkbox",
            "id": "pause_on_hover",
            "label": "t:sections.marquee_slider.settings.pause_on_mouseover",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "gray_filter",
            "label": "t:sections.marquee_slider.settings.gray_filter",
            "default": false
        },
        {
            "type": "header",
            "content": "t:sections.marquee_slider.settings.header_style"
        },
        {
            "type": "color",
            "id": "color_background_main",
            "label": "t:sections.marquee_slider.settings.background",
            "default": "#e9e9e9"
        },
        {
            "type": "range",
            "id": "gap_between_images",
            "label": "t:sections.marquee_slider.settings.gap_between_images",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "header",
            "content": "t:sections.general.padding"
        },
        {
            "type": "range",
            "id": "padding_top",
            "label": "t:sections.marquee_slider.settings.overwrite_theme_padding_top",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "label": "t:sections.marquee_slider.settings.overwrite_theme_padding_bottom",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.marquee_slider.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.marquee_slider.settings.overwrite_theme_margin_bottom",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.section-collection.settings.desktop_margin"
        },
        {
            "type": "range",
            "id": "desktop_margin_top",
            "label": "t:sections.marquee_slider.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.marquee_slider.settings.desktop_margin_bottom",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "range",
            "id": "eyebrow_font_size",
            "label": "t:sections.marquee_slider.settings.eyebrow_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.marquee_slider.settings.eyebrow_font_size_info"
        },
        {
            "type": "select",
            "id": "eyebrow_font_weight",
            "default": "0",
            "label": "t:sections.marquee_slider.settings.eyebrow_font_weight",
            "info": "t:sections.general.theme-settings.overwrite_theme_font_weight_info",
            "options": [
                {
                    "value": "0",
                    "label": "t:sections.general.theme-settings.overwrite_theme_font_weight_default"
                },
                {
                    "value": "400",
                    "label": "400"
                },
                {
                    "value": "500",
                    "label": "500"
                },
                {
                    "value": "600",
                    "label": "600"
                },
                {
                    "value": "700",
                    "label": "700"
                }
            ]
        },
        {
            "type": "range",
            "id": "heading_font_size",
            "label": "t:sections.marquee_slider.settings.heading_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.marquee_slider.settings.heading_font_size_info"
        },
        {
            "type": "range",
            "id": "heading_line_height",
            "label": "t:sections.marquee_slider.settings.heading_line_height",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.general.theme-settings.overwrite_theme_line_height_info"
        },
        {
            "type": "select",
            "id": "heading_font_weight",
            "default": "0",
            "label": "t:sections.marquee_slider.settings.heading_font_weight",
            "info": "t:sections.general.theme-settings.overwrite_theme_font_weight_info",
            "options": [
                {
                    "value": "0",
                    "label": "t:sections.general.theme-settings.overwrite_theme_font_weight_default"
                },
                {
                    "value": "400",
                    "label": "400"
                },
                {
                    "value": "500",
                    "label": "500"
                },
                {
                    "value": "600",
                    "label": "600"
                },
                {
                    "value": "700",
                    "label": "700"
                }
            ]
        },
        {
            "type": "color",
            "id": "heading_color",
            "label": "t:sections.marquee_slider.settings.heading_color",
            "info": "t:sections.marquee_slider.settings.heading_color_info"
        }
    ],
    "blocks": [
        {
            "type": "image",
            "name": "t:sections.marquee_slider.blocks.slide_item.name",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "t:sections.marquee_slider.blocks.slide_item.settings.image"
                },
                {
                    "type": "range",
                    "id": "image_height",
                    "label": "t:sections.marquee_slider.blocks.slide_item.settings.image_height",
                    "min": 0,
                    "max": 500,
                    "step": 10,
                    "default": 100
                },
                {
                    "type": "header",
                    "content": "t:sections.marquee_slider.blocks.slide_item.settings.header"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.marquee_slider.settings.overwrite_theme_margin_top",
                    "min": -100,
                    "max": 100,
                    "step": 5,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_bottom",
                    "label": "t:sections.marquee_slider.settings.overwrite_theme_margin_bottom",
                    "min": -100,
                    "max": 100,
                    "step": 5,
                    "unit": "px",
                    "default": 0
                }
            ]
        }
    ],
    "presets": [
    {
        "name": "t:sections.marquee_slider.name"
    }
    ]
}
{% endschema %}