<section class="border-top">
    <div class="container-xxl py-lg-1">
        <div class="overflow-auto" data-simplebar>
            <div class="nav flex-nowrap justify-content-between gap-4 py-2">

                @foreach ($brands as $key => $brand)
                    @if ($brand->image_url)
                        <a class="nav-link align-items-center animate-underline gap-2 p-0"
                            href="{{ route('product.index', ['filter[brand]' => $brand->id]) }}">
                            <span class="d-flex align-items-center justify-content-center bg-white border rounded-circle"
                                style="width: 40px; height: 40px">
                                <img src="{{ $brand->image_url }}" width="30" alt="Image">
                            </span>
                            <span class="d-block animate-target fw-semibold text-nowrap ms-1">{{ $brand->name }}</span>
                        </a>
                    @endif
                @endforeach
                
            </div>
        </div>
    </div>
</section>
