@foreach($collections as $collection)
    @include('web.theme.shella.components.products.product-carousel', [
        'title' => $collection->name,
        'title_action' => route('web.collections.show', ['collection' => $collection->slug]),
        'products' => $collection->products
    ])
@endforeach

<div id="theme-section-1537200465879" class="theme-section">
    <div data-section-id="1537200465879" data-section-type="carousel-products" data-postload="carousel_products">
        <div class="container">
            
            {{-- Collections --}}
            @foreach($collections as $collection)

                <div class="carousel carousel--arrows carousel-products position-relative mt-0 mb-60">
                    <div class="carousel__head row justify-content-center mb-25" data-carousel-control>
                        <h4 class="carousel__title col-auto mb-10 text-center">
                            <a href="{{ route('web.collections.show', ['collection' => $collection->slug]) }}" class="active" data-collection="trending-now-hp">{{ $collection->name }}</a>
                        </h4>
                    </div>
                    <div class="carousel__slider position-relative invisible" data-js-carousel data-autoplay="true" data-speed="5000" data-count="4" data-infinite="true" data-arrows="true" data-bullets="true">
                        <div class="carousel__prev position-absolute cursor-pointer" data-js-carousel-prev><i>
                                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-006" viewBox="0 0 24 24">
                                    <path d="M16.736 3.417a.652.652 0 0 1-.176.449l-8.32 8.301 8.32 8.301c.117.13.176.28.176.449s-.059.319-.176.449a.91.91 0 0 1-.215.127c-.078.032-.156.049-.234.049s-.156-.017-.234-.049a.93.93 0 0 1-.215-.127l-8.75-8.75a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449l8.75-8.75a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449z" />
                                </svg>
                            </i></div>
                        <div class="carousel__products overflow-hidden">
                            <div class="carousel__slick row" data-js-carousel-slick data-carousel-items data-max-count="6" data-products-pre-row="4" data-async-ajax-loading="true">

                                @foreach($products as $post)
                                    @include('product-carousel-item')
                                @endforeach

                            </div> {{-- Carousel row end --}}
                        </div>
                        <div class="carousel__next position-absolute cursor-pointer" data-js-carousel-next><i>
                                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-007" viewBox="0 0 24 24">
                                    <path d="M6.708 20.917c0-.169.059-.319.176-.449l8.32-8.301-8.32-8.301a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176l8.75 8.75c.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-8.75 8.75a.91.91 0 0 1-.215.127c-.078.032-.156.049-.234.049s-.156-.017-.234-.049a.91.91 0 0 1-.215-.127.652.652 0 0 1-.176-.449z" />
                                </svg>
                            </i></div>
                    </div>

                </div>
            
            @endforeach

        </div> {{-- Container end --}}
    </div>

    <script>
        Loader.require({
            type: "style",
            name: "plugin_slick"
        });

        Loader.require({
            type: "script",
            name: "carousel_products"
        });
    </script>

</div>
