{%- capture class -%}
    {%- if section.settings.overwrite_theme_background_color != blank -%}
        {%- assign alpha = section.settings.overwrite_theme_background_color | color_extract: 'alpha' -%}

        {%- if alpha == 1 -%}
            container-horizontal-desktop
        {%- endif -%}
    {%- endif -%}
{%- endcapture -%}

<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-collection container {{ class }}">

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

        <div 
            class="section-collection-cards swiper {% unless section.settings.use_slider %} section-collection-cards-grid {% endunless %}" 
            data-use-slider="{{ section.settings.use_slider }}" 
            data-show-navigation="{{ section.settings.show_slider_navigation }}"
            data-product-count-desktop="{{ section.settings.product_count_desktop }}"
            data-product-count-mobile="{{ section.settings.product_count_mobile }}"
        >
            <div class="swiper-wrapper">
                {%- if section.settings.collection.products == blank -%}
                    {% for num in (1..8) %}
                        <div class="swiper-slide">
                            <div class="section-collection-card-wrapper">
                            {% render 'card-product', settings: section.settings %}
                            </div>
                        </div>
                    {% endfor %}
                {%- else -%}
                    {% for entry in section.settings.collection.products %}
                        {%- if section.settings.sort_out_product == true and product != blank and product.id == entry.id -%}
                            {%- continue -%}
                        {%- endif -%}

                        <div class="swiper-slide">
                            <div class="section-collection-card-wrapper">
                            {% render 'card-product', product: entry, settings: section.settings %}
                            </div>
                        </div>
                    {% endfor %}
                {%- endif -%}
            </div>

            {%- if section.settings.show_slider_navigation and section.settings.use_slider -%}
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            {%- endif -%}
        </div>

        {%- if section.settings.button_text != blank -%}
            <div class="section-collection-button">
                <a class="btn" href="{{ section.settings.button_link }}">{{ section.settings.button_text }}</a>
            </div>
        {%- endif -%}

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

{% schema %}
{
    "name": "t:sections.section-collection.name",
    "settings": [
        {
            "type": "collection",
            "id": "collection",
            "label": "t:sections.section-collection.settings.collection"
        },
        {
            "type": "text",
            "id": "eyebrow",
            "label": "t:sections.section-compare-table.settings.eyebrow"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "t:sections.section-compare-table.settings.heading"
        },
        {
            "type": "header",
            "content": "t:sections.section-collection.settings.button_below",
            "info": "t:sections.section-collection.settings.button_below_info"
        },
        {
            "type": "text",
            "id": "button_text",
            "label": "t:sections.section-collection.settings.button_text"
        },
        {
            "type": "url",
            "id": "button_link",
            "label": "t:sections.section-collection.settings.button_link"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "select",
            "id": "heading_alignment",
            "default": "left",
            "label": "t:sections.section-compare-table.settings.heading_alignment",
            "options": [
                {
                    "value": "left",
                    "label": "t:sections.section-compare-table.settings.heading_alignment_left"
                },
                {
                    "value": "center",
                    "label": "t:sections.section-compare-table.settings.heading_alignment_center"
                },
                {
                    "value": "right",
                    "label": "t:sections.section-compare-table.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.section-compare-table.settings.headline_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "checkbox",
            "id": "sort_out_product",
            "label": "t:sections.section-collection.settings.sort_out_product",
            "info": "t:sections.section-collection.settings.sort_out_product_info",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "use_slider",
            "label": "t:sections.section-collection.settings.use_slider",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "show_slider_navigation",
            "label": "t:sections.section-collection.settings.show_slider_navigation",
            "info": "t:sections.section-collection.settings.show_slider_navigation_info",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "show_dots",
            "label": "t:sections.section-collection.settings.show_dots",
            "info": "t:sections.section-collection.settings.show_dots_info",
            "default": false
        },
        {
            "type": "range",
            "id": "product_count_desktop",
            "label": "t:sections.section-collection.settings.product_count_desktop",
            "min": 1,
            "max": 10,
            "step": 0.1,
            "unit": "x",
            "default": 3.5
        },
        {
            "type": "range",
            "id": "product_count_mobile",
            "label": "t:sections.section-collection.settings.product_count_mobile",
            "min": 1,
            "max": 10,
            "step": 0.1,
            "unit": "x",
            "default": 2.5
        },
        {
            "type": "header",
            "content": "t:sections.section-collection.settings.product_card"
        },
        {
            "type": "select",
            "id": "card_image_ratio",
            "default": "auto",
            "label": "t:sections.section-collection.settings.card_image_ratio",
            "options": [
                {
                    "value": "auto",
                    "label": "t:sections.section-collection.settings.card_image_ratio_auto"
                },
                {
                    "value": "portrait",
                    "label": "t:sections.section-collection.settings.card_image_ratio_portrait"
                },
                {
                    "value": "square",
                    "label": "t:sections.section-collection.settings.card_image_ratio_square"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "card_show_badge",
            "label": "t:sections.section-collection.settings.card_show_badge",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_left_align",
            "label": "t:sections.section-collection.settings.card_left_align",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "card_show_form",
            "label": "t:sections.collection-product-grid.settings.card_show_form",
            "default": false
        },
        {
            "type": "select",
            "id": "cart_type",
            "default": "slider",
            "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type",
            "options": [
                {
                    "value": "slider",
                    "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type_slider"
                },
                {
                    "value": "page",
                    "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type_page"
                },
                {
                    "value": "none",
                    "label": "t:sections.product-data.blocks.buy_buttons.settings.cart_type_none"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "card_show_variant",
            "label": "t:sections.section-collection.settings.card_show_variant",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_show_border",
            "label": "t:sections.section-collection.settings.card_show_border",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "card_show_reviews",
            "label": "t:sections.section-collection.settings.card_show_reviews",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "card_show_conrise_reviews",
            "label": "t:sections.collection-product-grid.settings.card_show_conrise_reviews",
            "default": false
        },
        {
            "type": "text",
            "id": "card_conrise_review_stars_metafield",
            "label": "t:sections.collection-product-grid.settings.card_conrise_review_stars_metafield",
            "info": "t:sections.collection-product-grid.settings.card_conrise_review_stars_metafield_info"
        },
        {
            "type": "text",
            "id": "card_conrise_review_number_metafield",
            "label": "t:sections.collection-product-grid.settings.card_conrise_review_number_metafield",
            "info": "t:sections.collection-product-grid.settings.card_conrise_review_number_metafield_info"
        },
        {
            "type": "color",
            "id": "card_border_color",
            "label": "t:sections.section-collection.settings.card_border_color",
            "info": "t:sections.section-collection.settings.card_border_color_info"
        },
        {
            "type": "color",
            "id": "card_background_color",
            "label": "t:sections.section-collection.settings.card_background_color",
            "info": "t:sections.section-collection.settings.card_background_color_info"
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-collection.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-collection.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.section-collection.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.section-collection.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": "color",
            "id": "heading_color",
            "label": "t:sections.section-compare-table.settings.heading_color",
            "info": "t:sections.section-compare-table.settings.heading_color_info"
        },
        {
            "type": "range",
            "id": "eyebrow_font_size",
            "label": "t:sections.section-compare-table.settings.eyebrow_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-compare-table.settings.eyebrow_font_size_info"
        },
        {
            "type": "select",
            "id": "eyebrow_font_weight",
            "default": "0",
            "label": "t:sections.section-compare-table.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-compare-table.settings.heading_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-compare-table.settings.heading_font_size_info"
        },
        {
            "type": "range",
            "id": "heading_line_height",
            "label": "t:sections.section-compare-table.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-compare-table.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"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-collection.name"
        }
    ]
}
{% endschema %}