@push('header-css')
<style>
    .m-w-90 {
        max-width: 90%;
    }
    #product-collections-container {
        margin: 0 -12.5px;
    }
</style>
@endpush

@push('footer-javascript')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        let homepage2GridBannerContainer = document.getElementById('theme-section-two-grid-banners');
        let productCollectionContainer = document.getElementById('product-collections-container');
        let collectionLoader = document.getElementById('collection-products-loader');

        let loading = false;
        let pagination = 2;
        let paginationDone = false;
        elementAppeared(homepage2GridBannerContainer, () => {
            if (! loading && ! paginationDone) {
                loading = true;
                collectionLoader.classList.remove('d-none')
                collectionLoader.classList.add('d-flex')
                
                $.ajax(location.href, {
                    data: {
                        page: pagination
                    },
                    success(response) {
                        productCollectionContainer.insertAdjacentHTML('beforeend', response.collections)

                        pagination++;
                        loading = false;
                        collectionLoader.classList.remove('d-flex')
                        collectionLoader.classList.add('d-none')
                        new LazyLoad({
                            elements_selector: '.lazyload',
                            threshold: 100,
                        })

                        if (! response.pagination.next_page_url) {
                            paginationDone = true
                        }
                    }
                })
            }
        });
    })
</script>
@endpush

<div class="container m-w-90">
    <div id="product-collections-container" class="component-list component-small-list d-flex flex-wrap">
        @include('web.themes.trendyol.components.products.collection.collections')
    </div>

    <div id="collection-products-loader" class="d-flex justify-content-center">
        <img src="/web/shella/images/shella-preloader.svg" alt="Pre-loader"></div>
    </div>
</div>