{% liquid
    assign section_name = 'Block Banner V2'
    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>
    @media only screen and (min-width:1024px) {
        #{{ el_id }} .text {
            color: var(--cream);
        }
    }
</style>
<section id="{{ el_id }}" class="{{ padding_class }}{% if section.settings.bg_overlay %} bg-overlay{% endif %}">
    <div class="container mb-40 d-mb-70">
        <div class="title tc max-600 mx-auto">
            <{{ section.settings.title_element }} class="h4 mb-25">
                {{ section.settings.title }}
            </{{ section.settings.title_element }}>
            <a href="{{ section.settings.link_url }}" class="link1">
                {{ section.settings.link_label }}
            </a>
        </div>
    </div>
    <div class="swiper d-pl-60 d-pr-60">
        <div class="swiper-wrapper ai-center">
            {% for block in section.blocks %}
                <div class="swiper-slide">
                    <a href="{{ block.settings.url }}" class="block relative">
                        {% render 'global-image-wrapper',
                            image: block.settings.image,
                            image_alt: block.settings.title,
                            additional_class: 'mb-20 d-mb-0'
                        %}
                        <div class="d-absolute bottom-30 text tc w-full">
                            <p class="p5 mb-10">{{ block.settings.tag }}</p>
                            <h6 class="h7">{{ block.settings.title }}</h6>
                        </div>
                    </a>
                </div>
            {% endfor %}
            {% for block in section.blocks %}
                <div class="swiper-slide hide-d">
                    <a href="{{ block.settings.url }}" class="block relative">
                        {% render 'global-image-wrapper',
                            image: block.settings.image,
                            image_alt: block.settings.title,
                            additional_class: 'mb-20 d-mb-0'
                        %}
                        <div class="d-absolute bottom-30 text tc w-full">
                            <p class="p5 mb-10">{{ block.settings.tag }}</p>
                            <h6 class="h7">{{ block.settings.title }}</h6>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</section>
<script>
    var swiper = null;
    function initSwiper_{{ section.id | remove: '-' }}() {
        swiper = new Swiper("#{{ el_id }} .swiper", {
            spaceBetween: 30,
            slidesPerView: 1.5,
            loop: true,
            allowTouchMove: true,
            centeredSlides: true,
            breakpoints: {
                1024: {
                    spaceBetween: 60,
                    slidesPerView: 3,
                    loop: false,
                    centeredSlides: false
                },
                1400: {
                    spaceBetween: 100,
                    slidesPerView: 3,
                    loop: false,
                    centeredSlides: false
                }
            },
            on: {
                init: function() {
                    $360.lazyLoadInstance.update();
                },
                slideChange: function() {
                    $360.lazyLoadInstance.update();
                },
                resize: function() {
                    $360.lazyLoadInstance.update();
                }
            }
        });
    }

    initSwiper_{{ section.id | remove: '-' }}();

    document.addEventListener('shopify:section:load', () => {
        initSwiper_{{ section.id | remove: '-' }}();
    });
    document.addEventListener('DOMContentLoaded', () => {
        swiper.slideNext();
    });
</script>
{% schema %}
    {
        "name": "Block Banner V2",
        "blocks": [
            {
                "name": "Banner V2",
                "type": "banner_v2",
                "settings": [
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "Choose an image"
                    },
                    {
                        "type": "text",
                        "id": "tag",
                        "label": "Tag"
                    },
                    {
                        "type": "text",
                        "id": "title",
                        "label": "Title"
                    },
                    {
                        "type": "url",
                        "id": "url",
                        "label": "Link to"
                    }
                ]
            }
        ],
        "max_blocks": 3,
        "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": "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": "text",
                "id": "link_label",
                "label": "Link Label"
            },
            {
                "type": "url",
                "id": "link_url",
                "label": "Link URL"
            }
        ],
        "presets": [{ "name": "Block Banner V2" }]
    }
{% endschema %}