@php
    $brands = App\Models\Ecommerce\Product\Brand\Brand::with('media')->where('is_visible', true)->get(['id', 'name', 'slug']);
@endphp


<div id="theme-section-1537199513853" class="theme-section mt-20">
    <div data-section-id="1537199513853" data-section-type="carousel-brands" data-postload="carousel_brands">

        <div class="container mt-0 mb-55">
            <div class="carousel carousel--arrows carousel-brands position-relative">
                {{-- <div class="border-top mb-50"></div> --}}

                <div class="carousel__slider position-relative invisible"
                     data-js-carousel
                     data-autoplay="true"
                     data-speed="5000"
                     data-count="6"
                     data-infinite="true"
                     data-arrows="true"
                     data-bullets="false">
                    <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__items overflow-hidden">
                        <div class="carousel__slick" data-js-carousel-slick>
                            @foreach($brands as $brand)
                                @include('web.themes.shella.components.carousel.brand-carousel-item', ['brand' => $brand])
                            @endforeach
                        </div>
                    </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>
        </div>
    </div>

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

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

</div>
