@if(count($brands) > 0)
    <div class="brand-carousel-container bg-white mb-8">
        <div class="brand-carousel-wrapper">
            <!-- Card Header -->
            <div class="brand-carousel-title-container flex flex-row justify-between items-center">
                <h3>
                    {{$title ?? 'Title'}}
                </h3>
                @if($link != null)
                    <a href="{{$link}}" class="flex flex-row items-center gap-2">
                        مشاهده همه
                        <svg class="w-5" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
                             data-testid="KeyboardArrowLeftRoundedIcon">
                            <path d="M14.71 15.88 10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41a.9959.9959
                              0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39
                              1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"></path>
                        </svg>
                    </a>
                @endif
            </div>
            <!-- END Card Header -->

            <!-- Card Body -->
            <div dir="rtl" id="{{$id}}" style="padding: 36px 12px" class="brand-carousel justify-content-center
             text-center items-center grid grid-cols-2  md:grid-cols-4 lg:grid-cols-8 gap-4">
                @foreach($brands as $brand)
                    <div class="px-2 justify-center">
                        <a href="{{route('shop.brand.id',$brand->objectData->slug)}}">

                            {!! getImageTag($brand->featuredMedia,'',[
              'width'=>'159',
              'height'=>'96',
              'loading'=>'lazy',
              'class'=>'mx-auto',
              'alt'=>($brand->featuredMedia->alt ?? $brand->objectData->title ??''),

          ]) !!}
                        </a>
                    </div>
                @endforeach
            </div>
            <!-- Card Body -->
        </div>
        <!-- END Card -->
    </div>
@endif