<ul class="item-bx row">
    @forelse($products as $product)
        <li class="col-md-12 p-0">
            <a class="text-dark rounded p-1 m-1 row align-items-center border itm-s"
               href="{{ route('products.show', $product->slug) }}">
                <div class="col-md-2 col-2 pr-2 pl-0">
                    <img class="crt-pc mw-100"
                         src="{{ asset($product->image) }}"
                         alt="{{ $product->name }}">
                </div>
                <div class="col-md-8 col-8 p-0 text-left">
                    <h4 class="crt-name mb-1">{{ $product->name }}</h4>
                    <p class="crt-price">
                        <span class="font-weight-bold mr-1 number">{{ $product->latin_name }}</span>
                    </p>
                </div>
                <div class="col-md-2 col-2 p-0 text-right dir-ltr" wire:click.prevent="delete({{ $product->id }})" title="حذف">
                    <button class="same-1 font-weight-bold rounded d-flex align-items-center justify-content-center text-center border-0 text-white crt-delet">×</button>
                </div>
            </a>
        </li>
        @if($loop->last)
            <li class="col-md-12 p-0">
                <a class="d-block text-dark rounded py-1 m-1 border itm-s"
                   href="{{ route('compare.index') }}">مقایسه کن
                </a>
            </li>
        @endif
    @empty
        <li class="alert m-0"><i class="text-danger mr-2 fas fa-exclamation"></i>هیچ محصولی برای مقایسه وجود ندارد</li>
    @endforelse
</ul>