<div class="col-6 col-sm-6 col-md-4 col-lg-3 cursor-pointer">
    <div class="product-collection d-flex flex-column mb-30" data-js-product data-js-product-json-preload data-product-handle="{{ $product->slug }}" data-product-variant-id="{{ $product->id }}">
        <div class="product-collection__image product-image product-image--hover-emersion-z position-relative w-100 js-product-images-navigation js-product-images-hovered-end js-product-images-hover"
            data-js-product-image-hover="{{ $product->getHoverImage('270x350') }}" 
            data-js-product-image-hover-id="{{ $product->id }}"
        >
            <a href="{{ route('web.products.show', ['product' => $product->slug]) }}" class="d-block cursor-pointer" data-js-product-image>
                <div class="rimage" style="padding-top:128.0%;">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" 
                    class="rimage__img rimage__img--contain rimage__img--fade-in lazyload cursor-pointer" 
                    data-master="{{ $product->thumbnail('270x350') }}"
                    data-aspect-ratio="0.78125" 
                    data-srcset="{{ $product->thumbnail('270x350') }} 1x, {{ $product->thumbnail('270x350') }} 2x"
                    data-image-id="{{ $product->id }}" 
                    alt="{{ $product->name }}">
                </div>
            </a>
            <div class="product-image__overlay-top position-absolute d-flex flex-wrap top-0 left-0 w-100 px-10 pt-10">
                {{-- <a href="{{ route('web.products.show', ['product' => $product->slug]) }}" class="absolute-stretch cursor-pointer"></a> --}}
                <div class="product-image__overlay-top-left product-collection__labels position-relative d-flex flex-column align-items-start mb-10">
                    
                    {{-- @if($product->isHot())
                        <div class="label label--hot mb-3 mr-3 text-nowrap" data-js-product-label-hot>Hot</div>
                    @endif --}}
                    
                    @if($product->isNew())
                        <div class="label label--new mb-3 mr-3 text-nowrap" data-js-product-label-new>{{ __('New') }}</div>
                    @endif
                    
                    @if($product->old_price_amount)
                        <div class="label label--sale mb-3 mr-3 text-nowrap" data-js-product-label-sale>{{ $product->discountPercentage() }}%</div>
                    @endif

                    {{-- @if($product->outOfStock()) --}}
                        {{-- <div class="label label--out-stock mb-3 mr-3 text-nowrap" data-js-product-label-out-stock>Out Stock</div> --}}
                    {{-- @endif --}}
                </div>
                
                {{-- Quick view btn --}}
                {{-- @include('web.themes.shella.components.products.buttons.quick-view-button') --}}

            </div>
            <div class="product-image__overlay-bottom position-absolute d-flex justify-content-center justify-content-lg-start align-items-end bottom-0 left-0 w-100 px-10 pb-10">
                {{-- <a href="#" class="absolute-stretch cursor-pointer"></a> --}}
                <div class="product-image__overlay-bottom-left product-collection__countdown position-relative mt-10">
                    <div class="d-none-important" data-js-product-countdown>
                        <div class="countdown countdown--type-01 d-flex flex-wrap justify-content-center js-countdown" data-date="2019-03-31 17:10:09"></div>
                    </div>
                </div>
                
                {{-- Next - Prev buttons --}}
                {{-- @include('web.themes.shella.components.products.buttons.next-prev-buttons') --}}
            </div>
        </div>
        <div class="product-collection__content d-flex flex-column align-items-start mt-15">
            <div class="product-collection__title mb-3">
                <h4 class="h6 m-0">
                    <a href="{{ $product->showPage() }}">{{ $product->name }}</a>
                </h4>
            </div>
            <div class="product-collection__details d-none mb-8">
                <div class="product-collection__sku mb-5">
                    <p class="m-0" data-js-product-sku>SKU: <span>00116с-23</span></p>
                </div>
                <div class="product-collection__barcode d-none-important mb-5">
                    <p class="m-0" data-js-product-barcode>BARCODE: <span></span></p>
                </div>
                <div class="product-collection__availability mb-5">
                    <p class="m-0" data-js-product-availability data-availability="true">
                        AVAILABILITY: <span>In stock (1 item)</span></p>
                </div>
                <div class="product-collection__type mb-5">
                    <p class="m-0" data-js-product-type>PRODUCT TYPE: <span>Polo</span></p>
                </div>
                <div class="product-collection__vendor mb-5">
                    <p class="m-0" data-js-product-vendor>VENDOR: <span>Lacoste</span></p>
                </div>
            </div>
            <div class="product-collection__description d-none mb-15">
                <p class="m-0">Sample Paragraph Text Lorem ipsum dolor sit amet conse ctetur
                    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat....</p>
            </div>
            <div class="product-collection__price mb-10">
                <span class="price @if($product->old_price_amount) price--sale @endif" data-js-product-price>
                    @if($product->old_price_amount)
                        <span><span class=money>{{ $product->old_price_amount }} TMT</span></span>
                    @endif
                    <span><span class=money>{{ $product->price_amount }} TMT</span></span>
                </span>
            </div>
            <div class="d-flex flex-column w-100 m-0">

                <div class="product-collection__options">
                    <div class="product-options product-options--type-collection js-product-options" data-js-product-options>
                        {{-- Color --}}
                        {{-- @include('web.themes.shella.components.products.buttons.colors') --}}

                        {{-- Size --}}
                        {{-- @include('web.themes.shella.components.products.buttons.sizes-button') --}}
                    </div>
                </div>
                
                {{-- Variants (select) --}}
                {{-- @include('web.themes.shella.components.products.select.variants') --}}

                <div class="product-collection__buttons d-flex flex-column flex-lg-row align-items-lg-center flex-wrap mt-5 mt-lg-10">
                    @include('web.themes.shella.components.products.buttons.add-to-cart', [
                        'product_id' => $product->id
                    ])

                    @include('web.themes.shella.components.products.buttons.add-to-wishlist', [
                        'product_id' => $product->id
                    ])
                </div>
            </div>
            <div class="product-collection__reviews">
                <div class="spr spr--text-hide spr--empty-hide d-flex flex-column">
                    <span class="shopify-product-reviews-badge" data-id="1494579609652"></span>
                </div>
            </div>
        </div>
    </div>
</div>
