{{-- similar Products --}}
<section class="container products-related p-0 m-0 my-4  {{sizeof($articleProductsSimilar) > 0 ? '' : 'd-none'}}">

    <div class="row m-0">
        <h5 class="w-100  fb-700 color-greyish-brown my-4"> {{__('lang.suggested_products')}} </h5>
     </div>
    @if(sizeof($articleProductsSimilar) > 4 )
    <!--Carousel Wrapper-->
    <div id="{{sizeof($articleProductsSimilar) > 0 ?'similar_products-carousel' : '' }}" class="{{sizeof($articleProductsSimilar) > 0 ?'carousel slide carousel-multi-item mt-minus-3' : '' }} " data-interval="false"  data-ride="carousel">

        <div class="row div-carousal-controls p-0 similar-products-controls " id="similar-products-controls">
            <!--Controls-->
            <div class="col-6 controls-top p-0 text-left">
                <a aria-label="" class="btn-floating color-brown-grey-two font-16" href="#similar_products-carousel" data-slide="prev"><i class="fa {{$dir=='rtl'?'fa-chevron-right':'fa-chevron-left'}}"></i></a>
            </div>
            <div class="col-6 controls-top p-0 text-right">
                <a aria-label="" class="btn-floating color-brown-grey-two font-16" href="#similar_products-carousel" data-slide="next"><i class="fa {{$dir=='rtl'?'fa-chevron-left':'fa-chevron-right'}}"></i></a>
            </div>
            <!--/.Controls-->
        </div>

        <!--Slides-->
        <div class="{{sizeof($articleProductsSimilar) > 0 ?'carousel-inner' : '' }} similar-products-inner" role="listbox" id="similar-products-inner">