<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="ugc-videos" {% render 'overwrite-theme-style', 
    background_color: section.settings.background_color, 
    padding_top: section.settings.padding_top, 
    padding_bottom: section.settings.padding_bottom %}>
<div class="container">
<div class="ugc-videos-desktop-container" style="width: {{ section.settings.desktop_width }}%;">

    {%- 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 %}>

            {%- capture stars -%}
                <span class="headline-stars">
                    {% render 'review-stars', stars: 5, id: section.id %}
                </span>
            {%- endcapture -%}

            {{ section.settings.eyebrow | replace: "[stars]", stars }}
        </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 -%}

    <div class="ugc-videos-wrapper" style="gap: {{ section.settings.gap }}px;">
        
        {%- for block in section.blocks -%}
            <div class="ugc-videos-video">
                {% comment %} Define variables {% endcomment %}
                {%- assign video_webm = block.settings.video_webm -%}
                {%- assign video_mp4 = block.settings.video_mp4 -%}
                {%- assign video_mov = block.settings.video_mov -%}

                {% comment %} Demo case {% endcomment %}
                {% if block.settings.show_demo_video and video_webm == blank and video_mp4 == blank and video_mov == blank %}
                    {%- assign video_webm = blank -%}
                    {%- assign video_mp4 = blank -%}
                    {%- assign video_mov = blank -%}

                    {%- assign demo_video_url = "ugc-demo-INDEX.webm" | replace: "INDEX", forloop.index -%}
                    {%- assign video_webm = demo_video_url | asset_url -%}
                {% endif %}

                {% comment %} Show videos {% endcomment %}
                {% render 'icon-video' %}
                <video class="ugc-videos-video-main" autoplay playsinline muted loop>
                    {% if video_webm != blank %} <source src="{{ video_webm }}" type="video/webm"> {% endif %}
                    {% if video_mp4 != blank %}  <source src="{{ video_mp4 }}" type="video/mp4"> {% endif %}
                    {% if video_mov != blank %}  <source src="{{ video_mov }}" type="video/mp4"> {% endif %}
                </video>
            </div>
        {%- endfor -%}

    </div>

</div>
</div>
</div>

</div>
</div>

{% comment %} ===== Section Help Video ===== {% endcomment %}
{%- if request.design_mode -%}
    <div 
        class="section-help-video-identifier" 
        data-title="{{ 'conrise.sectionHelpTitles.ugc-videos' | t }}", 
        data-video="ac3583825aa44c789f0de8f18c602e66?sid=d6f7e81c-8147-4b72-ba32-ad3a90ee78ff"
        data-padding-bottom="55.95854922279793%"
    ></div>
{%- endif -%}
{% comment %} ===== Section Help Video ===== {% endcomment %}

{% schema %}
{
    "name": "t:sections.section-ugc-videos.name",
    "settings": [
        {
            "type": "header",
            "content": "t:settings.general.section_help_video",
            "info": "[Video](https://www.loom.com/share/ac3583825aa44c789f0de8f18c602e66?sid=d6f7e81c-8147-4b72-ba32-ad3a90ee78ff)"
        },
        {
            "type": "text",
            "id": "eyebrow",
            "label": "t:sections.section-ugc-videos.settings.eyebrow",
            "info": "t:sections.section-ugc-videos.settings.eyebrow_info"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "t:sections.section-ugc-videos.settings.heading"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "select",
            "id": "heading_alignment",
            "default": "left",
            "label": "t:sections.section-ugc-videos.settings.heading_alignment",
            "options": [
                {
                    "value": "left",
                    "label": "t:sections.section-ugc-videos.settings.heading_alignment_left"
                },
                {
                    "value": "center",
                    "label": "t:sections.section-ugc-videos.settings.heading_alignment_center"
                },
                {
                    "value": "right",
                    "label": "t:sections.section-ugc-videos.settings.heading_alignment_right"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "active_animations",
            "label": "t:sections.general.active_animations",
            "default": true
        },
        {
            "type": "range",
            "id": "gap",
            "label": "t:sections.section-ugc-videos.settings.gap",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "range",
            "id": "headline_margin_bottom",
            "label": "t:sections.section-ugc-videos.settings.headline_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 30
        },
        {
            "type": "range",
            "id": "desktop_width",
            "label": "t:sections.section-ugc-videos.settings.desktop_width",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "%",
            "default": 100
        },
        {
            "type": "header",
            "content": "t:sections.section-ugc-videos.settings.header_background"
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "t:sections.section-ugc-videos.settings.background_color",
            "default": "#cccccc"
        },
        {
            "type": "range",
            "id": "padding_top",
            "label": "t:sections.section-ugc-videos.settings.padding_top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 50
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "label": "t:sections.section-ugc-videos.settings.padding_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 50
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-ugc-videos.settings.overwrite_theme_margin_top",
            "min": -20,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 30
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-ugc-videos.settings.overwrite_theme_margin_bottom",
            "min": -20,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 30
        },
        {
            "type": "header",
            "content": "t:sections.section-ugc-videos.settings.desktop_margin"
        },
        {
            "type": "range",
            "id": "desktop_margin_top",
            "label": "t:sections.section-ugc-videos.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 50
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.section-ugc-videos.settings.desktop_margin_bottom",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 50
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "color",
            "id": "heading_color",
            "label": "t:sections.section-ugc-videos.settings.heading_color",
            "info": "t:sections.section-ugc-videos.settings.heading_color_info"
        },
        {
            "type": "range",
            "id": "eyebrow_font_size",
            "label": "t:sections.section-ugc-videos.settings.eyebrow_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-ugc-videos.settings.eyebrow_font_size_info"
        },
        {
            "type": "select",
            "id": "eyebrow_font_weight",
            "default": "0",
            "label": "t:sections.section-ugc-videos.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.section-ugc-videos.settings.heading_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-ugc-videos.settings.heading_font_size_info"
        },
        {
            "type": "range",
            "id": "heading_line_height",
            "label": "t:sections.section-ugc-videos.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.section-ugc-videos.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"
                }
            ]
        }
    ],
    "blocks": [
        {
            "type": "video",
            "name": "t:sections.section-ugc-videos.blocks.video.name",
            "settings": [
                {
                    "type": "checkbox",
                    "id": "show_demo_video",
                    "default": true,
                    "label": "t:sections.section-ugc-videos.blocks.video.settings.show_demo_video"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-ugc-videos.blocks.video.settings.header_video"
                },
                {
                    "type": "text",
                    "id": "video_webm",
                    "label": "t:sections.section-ugc-videos.blocks.video.settings.video_webm",
                    "info": "t:sections.section-ugc-videos.blocks.video.settings.video_webm_info"
                },
                {
                    "type": "text",
                    "id": "video_mp4",
                    "label": "t:sections.section-ugc-videos.blocks.video.settings.video_mp4"
                },
                {
                    "type": "text",
                    "id": "video_mov",
                    "label": "t:sections.section-ugc-videos.blocks.video.settings.video_mov"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-ugc-videos.name"
        }
    ]
}
{% endschema %}