<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 {% 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="social-proof {% if section.settings.desktop_centered %} social-proof-desktop-centered{% endif %}">

    <div>
        {%- capture image_style -%}
            width: {{ section.settings.image_size }}px;
            height: {{ section.settings.image_size }}px;

            {%- if section.settings.border_color != blank -%}
                {%- assign alpha = section.settings.border_color | color_extract: 'alpha' -%}
        
                {%- if alpha == 1 -%}
                    border: 2px solid {{ section.settings.border_color | color_to_hex }}; 
                    padding: 1px;
                    background-color: {{ section.settings.background_color | color_to_hex }};
                {%- endif -%}
            {%- endif -%}
        {%- endcapture -%}

        {%- assign image_1_placeholder = blank -%}
        {%- assign image_2_placeholder = blank -%}

        {% if section.settings.show_placeholder %}
            {% if section.settings.image_1 == blank %}
                {%- assign image_1_placeholder = 'conrise-placeholder-man.jpg' -%}
            {% endif %}
            {% if section.settings.image_2 == blank %}
                {%- assign image_2_placeholder = 'conrise-placeholder-woman.jpg' -%}
            {% endif %}
        {% endif %}

        {% render 'image', image: section.settings.image_1, assetName: image_1_placeholder, style: image_style %}
        {% render 'image', image: section.settings.image_2, assetName: image_2_placeholder, style: image_style %}
    </div>
    <p>
        {%- capture verified_icon -%}
            <img src="{{ "Icon-Verified.png" | asset_url }}" />
        {%- endcapture -%}

        {{ section.settings.text | replace: "[verified]", verified_icon }}
    </p>

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

{% schema %}
{
    "name": "t:sections.section-social-proof.name",
    "settings": [
        {
            "type": "checkbox",
            "id": "show_placeholder",
            "default": true,
            "label": "t:sections.product-data.blocks.social_proof.settings.show_placeholder",
            "info": "t:sections.product-data.blocks.social_proof.settings.show_placeholder_info"
        },
        {
            "type": "image_picker",
            "id": "image_1",
            "label": "t:sections.product-data.blocks.social_proof.settings.image_1"
        },
        {
            "type": "image_picker",
            "id": "image_2",
            "label": "t:sections.product-data.blocks.social_proof.settings.image_2"
        },
        {
            "type": "richtext",
            "id": "text",
            "label": "t:sections.product-data.blocks.social_proof.settings.text",
            "info": "t:sections.product-data.blocks.social_proof.settings.text_info",
            "default": "<p><strong>Tom, Andreas</strong> und <strong>2.534 andere Personen</strong> [verified] lieben unsere Produkte.</p>"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "range",
            "id": "image_size",
            "label": "t:sections.product-data.blocks.social_proof.settings.image_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "color",
            "id": "border_color",
            "label": "t:sections.product-data.blocks.social_proof.settings.border_color",
            "info": "t:sections.product-data.blocks.social_proof.settings.border_color_info",
            "default": "#4aadf4"
        },
        {
            "type": "checkbox",
            "id": "desktop_centered",
            "default": true,
            "label": "t:sections.section-social-proof.settings.desktop_centered"
        },
        {
            "type": "header",
            "content": "t:sections.section-compare-table.settings.header_background"
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "t:sections.section-compare-table.settings.background_color",
            "default": "#fafafa"
        },
        {
            "type": "range",
            "id": "padding_top",
            "label": "t:sections.section-compare-table.settings.padding_top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "label": "t:sections.section-compare-table.settings.padding_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-compare-table.settings.overwrite_theme_margin_top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-compare-table.settings.overwrite_theme_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "header",
            "content": "t:sections.section-compare-table.settings.desktop_margin"
        },
        {
            "type": "range",
            "id": "desktop_margin_top",
            "label": "t:sections.section-compare-table.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 30
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.section-compare-table.settings.desktop_margin_bottom",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 30
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "range",
            "id": "overwrite_theme_font_size",
            "label": "t:sections.product-data.blocks.social_proof.settings.overwrite_theme_font_size",
            "min": 0,
            "max": 40,
            "step": 1,
            "unit": "px",
            "default": 13,
            "info": "t:sections.product-data.blocks.social_proof.settings.overwrite_theme_font_size_info"
        },
        {
            "type": "color",
            "id": "overwrite_theme_text_color",
            "label": "t:sections.product-data.blocks.social_proof.settings.overwrite_theme_text_color",
            "info": "t:sections.product-data.blocks.social_proof.settings.overwrite_theme_text_color_info"
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-social-proof.name"
        }
    ]
}
{% endschema %}