{% liquid
    assign section_name = 'Media + Text Icon'
    assign el_id = section_name | handle | append: '-' | append: section.id

    assign section_padding = section.settings.padding
    assign padding_class = 'sp-' | append: section_padding
    if section.settings.top_half_padding
        assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
    endif
    if section.settings.bottom_half_padding
        assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
    endif
%}
<style>
    #{{ el_id }} .icon {
        max-width: 60px;
        height: 50px;
    }
    #{{ el_id }} .icon .global-image-wrapper {
        height: 100%;
    }
    #{{ el_id }} .icon .global-image-wrapper img {
        height: 100%;
        object-fit: cover;
    }
</style>
<section id="{{ el_id }}" class="{{ padding_class }}{% if section.settings.bg_overlay %} bg-overlay{% endif %}">
    <div class="container">
        <div class="row flex {% if section.settings.media_position == 'right' %} flex-column d-flex-row{% else %} column-reverse d-row-reverse{% endif %} ai-center">
            <div class="col-d-1"></div>
            <div class="col-12 col-d-4 pl-40 pr-40{% if section.settings.media_position == 'right' %} mb-60 d-mb-0{% endif %}">
                <div class="tc d-tl">
                    <{{ section.settings.title_element }} class="{{ section.settings.title_class }} tc mb-30 d-mb-60">
                        {{ section.settings.title }}
                    </{{ section.settings.title_element }}>
                    <div class="flex flex-wrap rowgap-40 d-rowgap-30 pl-40 pr-40">
                        {% for block in section.blocks %}
                            <div class="col-12 col-d-6 tc">
                                <div class="icon mx-auto mb-10">
                                    {% render 'global-image-wrapper',
                                        image: block.settings.icon,
                                        image_alt: block.settings.title,
                                        additional_class: 'no-bg'
                                    %}
                                </div>
                                <p class="p3 bold-500 mb-15">{{ block.settings.title }}</p>
                                <p class="p3">{{ block.settings.text }}</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-d-1"></div>
            <div class="col-12 col-d-5 pl-40 pr-40{% if section.settings.media_position == 'left' %} mb-60 d-mb-0{% endif %}">
                {%- if section.settings.media_type == 'image' -%}
                    {%- assign add_class = '' -%}
                    {%- if section.settings.no_bg -%}
                        {%- assign add_class = 'no-bg' -%}
                    {%- endif -%}
                    {% render 'global-image-wrapper',
                        image: section.settings.image, 
                        image_alt: section.settings.title,
                        additional_class: add_class
                    %}
                {%- else -%}
                    <video class="w-full" loop autoplay muted>
                        <source src="{{ section.settings.video.sources[1].url }}" type="video/mp4">
                    </video>
                {%- endif -%}
            </div>
        </div>
    </div>
</section>
{% schema %}
    {
        "name": "Media + Text Icon",
        "blocks": [
            {
                "name": "Text Icon",
                "type": "text_icon",
                "settings": [
                    {
                        "type": "image_picker",
                        "id": "icon",
                        "label": "Choose an icon"
                    },
                    {
                        "type": "text",
                        "id": "title",
                        "label": "Title"
                    },
                    {
                        "type": "textarea",
                        "id": "text",
                        "label": "Text"
                    }
                ]
            }
        ],
        "settings": [
            {
                "type": "header",
                "content": "Section Padding"
            },
            {
                "type": "select",
                "id": "padding",
                "label": "Padding",
                "options": [
                    {
                        "value": "no",
                        "label": "No"
                    },
                    {
                        "value": "sm",
                        "label": "Small"
                    },
                    {
                        "value": "md",
                        "label": "Med"
                    },
                    {
                        "value": "lg",
                        "label": "Large"
                    }
                ],
                "default": "md"
            },
            {
                "type": "checkbox",
                "id": "top_half_padding",
                "label": "Top half padding",
                "default": false
            },
            {
                "type": "checkbox",
                "id": "bottom_half_padding",
                "label": "Bottom half padding",
                "default": false
            },
            {
                "type": "header",
                "content": "General Settings"
            },
            {
                "type": "checkbox",
                "id": "bg_overlay",
                "label": "Background overlay"                
            },
            {
                "type": "select",
                "id": "media_type",
                "label": "Media type",
                "options": [
                    {"value": "image", "label": "Image"},
                    {"value": "video", "label": "Video"}
                ],
                "default": "image"
            },
            {
                "type": "checkbox",
                "id": "no_bg",
                "label": "Image no background"
            },
            {
                "type": "image_picker",
                "id": "image",
                "label": "Image"
            },
            {
                "type": "video",
                "id": "video",
                "label": "Video"
            },
            {
                "type": "select",
                "id": "media_position",
                "label": "Media position",
                "options": [
                    {"value": "left", "label": "Left"},
                    {"value": "right", "label": "Right"}
                ],
                "default": "right"
            },
            {
                "type": "color",
                "id": "text_color",
                "label": "Text Color",
                "default": "#0D0D0D"
            },
            {
                "type": "text",
                "id": "title",
                "label": "Title"
            },
            {
                "type": "select",
                "id": "title_element",
                "label": "Title Element",
                "options": [
                    {"value": "h1", "label": "H1"},
                    {"value": "h2", "label": "H2"},
                    {"value": "h3", "label": "H3"},
                    {"value": "h4", "label": "H4"}
                ],
                "default": "h2"
            },
            {
                "type": "select",
                "id": "title_class",
                "label": "Title class",
                "options": [
                    {"value": "h1", "label": "H1"},
                    {"value": "h2", "label": "H2"},
                    {"value": "h3", "label": "H3"},
                    {"value": "h4", "label": "H4"}
                ],
                "default": "h3"
            }
        ],
        "presets": [{ "name": "Media + Text Icon" }]
    }
{% endschema %}