<div class="{% unless section.settings.full_width %}container{% endunless %}" {% render 'overwrite-theme-style', settings: section.settings %}>

    <div class="image-banner-container" {% if section.settings.click_url != blank %} onclick="location.href='{{ section.settings.click_url }}';" {% endif %}>
        {% assign mobile_image = section.settings.image %}
        {% assign desktop_image = section.settings.image_desktop %}

        {%- if mobile_image != blank and desktop_image == blank -%}
            {% assign desktop_image = mobile_image %}
        {%- elsif mobile_image == blank and desktop_image != blank -%}
            {% assign mobile_image = desktop_image %}
        {%- endif -%}

        {% render 'image', 
            image: mobile_image, 
            class: 'image-banner-container-image-mobile',
            placeholder_padding_vertical: 40,
            placeholder_padding_horizontal: 40 %}
            
        {%- if section.settings.desktop_not_optimize -%}
            <img src="{{ desktop_image | img_url: 'master' }}" class="image-banner-container-image-desktop" />
        {%- else -%}
            {% render 'image', 
                image: desktop_image, 
                class: 'image-banner-container-image-desktop' %}
        {%- endif -%}

        {%- capture style -%}
            align-items: {{ section.settings.alignment }};

            {%- if section.settings.alignment == "center" -%}
                text-align: center;
            {%- elsif section.settings.alignment == "end" -%}
                text-align: right;
            {%- endif -%}
        {%- endcapture -%}

        <div class="image-banner-content {{ section.settings.position }}" style="{{ style | strip_newlines }}">
        {%- for block in section.blocks -%}
            {% case block.type %}
            
                {% when "heading" %}
                    {%- capture style -%}
                        {%- if block.settings.overwrite_theme_background_color != blank -%}
                            {%- assign alpha = block.settings.overwrite_theme_background_color | color_extract: 'alpha' -%}
                    
                            {%- if alpha == 1 -%}
                                padding: 5px;
                            {%- endif -%}
                        {%- endif -%}

                        {%- if block.settings.background_color_rounded -%}
                            border-radius: var(--border-radius);
                        {%- endif -%}
                    {%- endcapture -%}

                    <h2 class="{% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', settings: block.settings, append_style: style %}>
                        <span class="desktop">{{ block.settings.heading }}</span>
                        <span class="mobile" style="{%- if block.settings.overwrite_theme_font_size_mobile != blank and block.settings.overwrite_theme_font_size_mobile > 0 -%}font-size: {{ block.settings.overwrite_theme_font_size_mobile }}px;{%- endif -%}">{{ block.settings.heading }}</span>
                    </h2>

                {% when "text" %}
                    <div class="{% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', settings: block.settings %}>
                        <span class="desktop">{{ block.settings.text }}</span>
                        <span class="mobile" style="{%- if block.settings.overwrite_theme_font_size_mobile != blank and block.settings.overwrite_theme_font_size_mobile > 0 -%}font-size: {{ block.settings.overwrite_theme_font_size_mobile }}px;{%- endif -%}">{{ block.settings.text }}</span>
                    </div>

                {% when "button" %}
                    <a href="{{ block.settings.button_link }}" class="btn {% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', settings: block.settings %}>
                        <span class="desktop">{{ block.settings.button_label | escape }}</span>
                        <span class="mobile" style="{%- if block.settings.overwrite_theme_font_size_mobile != blank and block.settings.overwrite_theme_font_size_mobile > 0 -%}font-size: {{ block.settings.overwrite_theme_font_size_mobile }}px;{%- endif -%}">{{ block.settings.button_label | escape }}</span>
                    </a>

            {% endcase %}
        {%- endfor -%}
        </div>
    </div>

</div>

{% comment %} ===== Section Help Video ===== {% endcomment %}
{%- if request.design_mode -%}
    <div 
        class="section-help-video-identifier" 
        data-title="{{ 'conrise.sectionHelpTitles.image-banner' | t }}", 
        data-video="b5b89b070b9f47af88156ad7df114322?sid=eb8e3a23-7090-442e-b103-3e19a9363d55"
        data-padding-bottom="55.987558320373246%"
    ></div>
{%- endif -%}
{% comment %} ===== Section Help Video ===== {% endcomment %}

{% schema %}
{
    "name": "t:sections.section-image-banner.name",
    "settings": [
        {
            "type": "header",
            "content": "t:settings.general.section_help_video",
            "info": "[Video](https://www.loom.com/share/b5b89b070b9f47af88156ad7df114322?sid=eb8e3a23-7090-442e-b103-3e19a9363d55)"
        },
        {
            "type": "image_picker",
            "id": "image",
            "label": "t:sections.section-image-banner.settings.image"
        },
        {
            "type": "image_picker",
            "id": "image_desktop",
            "label": "t:sections.section-image-banner.settings.image_desktop"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "checkbox",
            "id": "active_animations",
            "label": "t:sections.general.active_animations",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "full_width",
            "label": "t:sections.section-image-banner.settings.full_width",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "desktop_not_optimize",
            "label": "t:sections.section-image-banner.settings.desktop_not_optimize",
            "default": false
        },
        {
            "type": "select",
            "id": "alignment",
            "default": "center",
            "label": "t:sections.section-image-banner.settings.alignment",
            "options": [
                {
                    "value": "start",
                    "label": "t:sections.section-image-banner.settings.alignment_start"
                },
                {
                    "value": "center",
                    "label": "t:sections.section-image-banner.settings.alignment_center"
                },
                {
                    "value": "end",
                    "label": "t:sections.section-image-banner.settings.alignment_end"
                }
            ]
        },
        {
            "type": "select",
            "id": "position",
            "default": "middle",
            "label": "t:sections.section-image-banner.settings.position",
            "options": [
                {
                    "value": "top",
                    "label": "t:sections.section-image-banner.settings.position_top"
                },
                {
                    "value": "middle",
                    "label": "t:sections.section-image-banner.settings.position_middle"
                },
                {
                    "value": "bottom",
                    "label": "t:sections.section-image-banner.settings.position_bottom"
                }
            ]
        },
        {
            "type": "url",
            "id": "click_url",
            "label": "t:sections.section-image-banner.settings.click_url"
        },
        {
            "type": "header",
            "content": "t:sections.general.margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-image-banner.settings.overwrite_theme_margin_top",
            "min": -30,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-image-banner.settings.overwrite_theme_margin_bottom",
            "min": -30,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 0
        }
    ],
    "blocks": [
        {
            "type": "heading",
            "name": "t:sections.section-image-banner.blocks.heading.name",
            "settings": [
                {
                    "type": "richtext",
                    "id": "heading",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.heading"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.settings"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_background_color",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_background_color"
                },
                {
                    "type": "checkbox",
                    "id": "background_color_rounded",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.background_color_rounded",
                    "default": false
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.section-image-banner.blocks.heading.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-image-banner.blocks.heading.settings.overwrite_theme_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_text_color",
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size_mobile",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                }
            ]
        },
        {
            "type": "text",
            "name": "t:sections.section-image-banner.blocks.text.name",
            "settings": [
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "t:sections.section-image-banner.blocks.text.settings.text"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.section-image-banner.blocks.text.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-image-banner.blocks.text.settings.overwrite_theme_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_text_color",
                    "info": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size_mobile",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                }
            ]
        },
        {
            "type": "button",
            "name": "t:sections.section-image-banner.blocks.button.name",
            "settings": [
                {
                    "type": "text",
                    "id": "button_label",
                    "label": "t:sections.section-image-banner.blocks.button.settings.button_label"
                },
                {
                    "type": "url",
                    "id": "button_link",
                    "label": "t:sections.section-image-banner.blocks.button.settings.button_link"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.section-image-banner.blocks.button.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-image-banner.blocks.button.settings.overwrite_theme_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_background_color",
                    "label": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_background_color",
                    "info": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_background_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size_mobile",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_text_color",
                    "info": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_text_color_info"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-image-banner.name"
        }
    ]
}
{% endschema %}