{% liquid
    assign section_name = 'Block Banner Slider'
    assign el_id = section_name | handle | append: '-' | append: section.id

    assign setting = section.settings
    assign section_padding = setting.padding
    assign padding_class = 'sp-' | append: section_padding
    if setting.top_half_padding
        assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
    endif
    if setting.bottom_half_padding
        assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
    endif
%}
<style>
    #{{ el_id }} .swiper-slide {
        height: auto;
    }
    #{{ el_id }} .swiper-slide .text {
        transform: translate(-50%, -50%);
    }
    #{{ el_id }} .swiper-slide .overlay-custom {
        background: linear-gradient(180deg, #666666, #000000);
    }
    #{{ el_id }} .swiper-slide .global-image-wrapper {
        height: 100%;
    }
    #{{ el_id }} .swiper-slide .global-image-wrapper img {
        height: 100%;
        object-fit: cover;
    }

    #{{ el_id }} .swiper-button-prev {
        left: 40px;
    }
    #{{ el_id }} .swiper-button-next {
        right: 40px;
    }
    #{{ el_id }} .btn-nav svg {
        width: 14px;
    }
</style>
<section id="{{ el_id }}" class="{{ padding_class }}">
    <div class="swiper">
        <div class="swiper-wrapper">
            {% for block in section.blocks %}
                <div class="swiper-slide">
                    <a href="{{ block.settings.url }}" class="block h-full">
                        {% render 'global-image-wrapper',
                            image: block.settings.image,
                            image_alt: block.settings.title,
                            overlay: true,
                            overlay_class: 'overlay-custom'
                        %}
                        <h5 class="h5 text c-cream absolute top-50c left-50c zi-1">{{ block.settings.title }}</h5>
                    </a>
                </div>
            {% endfor %}
        </div>
        <div class="swiper-button-block hide-m show-d">
            <div class="swiper-button-prev btn-nav">{{ settings.icon_slide_left }}</div>
            <div class="swiper-button-next btn-nav">{{ settings.icon_slide_right }} </div>
        </div>
    </div>
</section>
<script>
    function initSwiper_{{ section.id | remove: '-' }}() {
        new Swiper("#{{ el_id }} .swiper", {
            spaceBetween: 15,
            slidesPerView: 1.5,
            slidesOffsetBefore: 15,
            slidesOffsetAfter: 15,
            allowTouchMove: true,
            navigation: {
                prevEl: '#{{ el_id }} .swiper-button-prev',
                nextEl: '#{{ el_id }} .swiper-button-next'
            },
            breakpoints: {
                600: {
                    slidesPerView: 2.5,
                    slidesOffsetBefore: 20,
                    slidesOffsetAfter: 20,
                },
                1024: {
                    spaceBetween: 35,
                    slidesPerView: 3,
                    slidesOffsetBefore: 60,
                    slidesOffsetAfter: 60
                },
                1440: {
                    slidesPerView: 3.3,
                    slidesOffsetBefore: 60,
                    slidesOffsetAfter: 60
                },
                1920: {
                    slidesPerView: 5,
                    slidesOffsetBefore: 60,
                    slidesOffsetAfter: 60
                }
            },
            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: '-' }}();
    });
</script>
{% schema %}
    {
        "name": "Block Banner Slider",
        "blocks": [
            {
                "name": "Block Banner",
                "type": "block_banner",
                "settings": [
                    {
                        "type": "text",
                        "id": "title",
                        "label": "Title"
                    },
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "Choose an image"
                    },
                    {
                        "type": "url",
                        "id": "url",
                        "label": "Link to"
                    }
                ]
            }
        ],
        "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
            }
        ],
        "presets": [{ "name": "Block Banner Slider" }]
    }
{% endschema %}