<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="container">
<div class="product-collections" style="width: {{ section.settings.desktop_width }}%;">
   
    {%- if section.settings.eyebrow != blank -%}
        {%- capture eyebrow_style -%}
            text-align: {{ section.settings.heading_alignment }};
        {%- endcapture -%}
        <p class="{% 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="{% 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 | replace: "[brand]", shop.name }}
        </h2>
    {%- endif -%}

    <div class="product-collections-cards">
        {%- for block in section.blocks -%}
            {%- assign card_image = block.settings.collection.image -%}
            {%- assign card_link = block.settings.collection.url -%}
            {%- assign text = block.settings.collection.title -%}

            {%- if block.settings.image != blank -%}
                {%- assign card_image = block.settings.image -%}
            {%- endif -%}
            {%- if block.settings.button_link != blank -%}
                {%- assign card_link = block.settings.button_link -%}
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
                {%- assign text = block.settings.button_label -%}
            {%- endif -%}

            <a href="{{ card_link }}" class="product-collections-card no-link-style">
                {% render 'image', 
                    image: card_image,
                    placeholder_padding_vertical: 40,
                    placeholder_padding_horizontal: 40 %}

                <h3 style="font-size: {{ block.settings.link_label_size }}px; color: {{ block.settings.link_label_color | color_to_hex }};">{{ text }}</h3>
            </a>
        {%- endfor -%}
    </div>

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

{% schema %}
{
    "name": "t:sections.section-product-collections.name",
    "settings": [
        {
            "type": "text",
            "id": "eyebrow",
            "label": "t:sections.section-compare-table.settings.eyebrow"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "t:sections.section-compare-table.settings.heading",
            "info": "t:sections.section-product-collections.settings.heading_info"
        },
        {
            "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-product-collections.settings.headline_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "range",
            "id": "desktop_width",
            "label": "t:sections.section-compare-table.settings.desktop_width",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "%",
            "default": 100
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-product-collections.settings.overwrite_theme_margin_top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-product-collections.settings.overwrite_theme_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.desktop_margin"
        },
        {
            "type": "range",
            "id": "desktop_margin_top",
            "label": "t:sections.section-product-collections.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.section-product-collections.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"
                }
            ]
        }
    ],
    "blocks": [
        {
            "type": "collection",
            "name": "t:sections.section-product-collections.blocks.collection.name",
            "settings": [
                {
                    "type": "collection",
                    "id": "collection",
                    "label": "t:sections.section-product-collections.blocks.collection.settings.collection"
                },
                {
                    "type": "header",
                    "content": "t:sections.section-product-collections.blocks.collection.settings.header_collection_settings"
                },
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "t:sections.section-product-collections.blocks.collection.settings.image"
                },
                {
                    "type": "text",
                    "id": "button_label",
                    "label": "t:sections.section-product-collections.blocks.collection.settings.button_label"
                },
                {
                    "type": "url",
                    "id": "button_link",
                    "label": "t:sections.section-product-collections.blocks.collection.settings.button_link"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.settings"
                },
                {
                    "type": "range",
                    "id": "link_label_size",
                    "label": "t:sections.section-product-collections.blocks.collection.settings.link_label_size",
                    "min": 0,
                    "max": 100,
                    "step": 1,
                    "unit": "px",
                    "default": 20
                },
                {
                    "type": "color",
                    "id": "link_label_color",
                    "label": "t:sections.section-product-collections.blocks.collection.settings.link_label_color",
                    "default": "#ffffff"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-product-collections.name"
        }
    ]
}
{% endschema %}