{#
{% set product = product[0]|default %}
{% set productImages   = getProductImages(product['id']) %}
{% set productLang     = product['productLangs']|default|first %}

{% set productImage1 = productImages[0]|default %}
{% set productImage2 = productImages[1]|default %}
{% set detailLink = path('main_product_show',{'id':product['id'],'alias':productLang['alias']|default("null")}) %}

{% set productPrice = product.productPrices|first %}
{% set productVariant = productPrice.productVariant %}


<div class="product product-12 text-center">
    <figure class="product-media">
        {% if productPrice.discountRate|default and productPrice.discountRate > 0 %}
            <span class="product-label label-discount"> %{{ productPrice.discountRate }} </span>
        {% endif %}

        <a href="{{ detailLink }}">
            {% set dir = getProductImageDir(product|default,true) %}
            {% if productImages|length > 0  %}
                <div class="product-swiper swiper-container">
                    <div class="swiper-wrapper">
                        {% for productImage in productImages %}
                            {% set imageFullPath=  dir|default~productImage.filename|default %}
                            <div class="swiper-slide">
                                <img class="lazy product-image" data-src="{{  imageFullPath|imagine_filter('thumb',{"thumbnail": {"size": [277,400] }}) }}">
                            </div>
                        {% endfor %}

                    </div>
                    <div class="swiper-pagination swiper-pagination-white"></div>
                </div>
            {% endif %}
        </a>





        <div class="product-action-vertical">
            <a href="javascript:" onclick="Order.addToWishlist(this);" data-product="{{ product.id }}" class="btn-product-icon btn-wishlist "><span>add to wishlist</span></a>
        </div><!-- End .product-action-vertical -->


    </figure><!-- End .product-media -->

    <div class="product-body">
        <h3 class="product-title"><a href="{{ detailLink }}">{{ productLang.name|default }}</a></h3>


        {% set productReviews = getProductReviews(product,true) %}
        {% if  product.avarageRating|default > 0  %}
        <div class="ratings-container">
            <div class="ratings">
                <div class="ratings-val" style="width: {{ product.avarageRating|round * 20 }}%;"></div><!-- End .ratings-val -->
            </div><!-- End .ratings -->
            {% if productReviews>0 %}
            <span class="ratings-text">({{ productReviews }})</span>
            {% endif %}
        </div><!-- End .rating-container -->
        {% endif %}

        <!-- End .product-title -->
        <div class="product-price">
            {% import "main/common/Macro/money.html.twig" as money %}
            {{ money.calculatePrice(product.id|product_variant,{'originalPrice':1}) }}
            #}
{#            {{  money_format(price) }} TL#}{#


        </div><!-- End .product-price -->
    </div><!-- End .product-body -->
    <div class="product-action">
        <a href="{{ path('main_product_quickview',{'id':product.id}) }}" class="btn-product btn-cart btn-quickview "><i
                    class="la la-search"></i><span>{{ "product.box.quickview"|trans }}</span></a>
        <a href="{{ path('main_product_quickshop',{'id':product.id}) }}" class="btn-product btn-cart btn-quickshop"><i
                    class="la la-cart-plus"></i><span>{{ "product.box.quickshop"|trans }}</span></a>
        {% if myWishlist|default %}
            <a href="{{ path('main_wishlist_remove',{'id':product.id}) }}" class="btn-product btn-cart"><i
                        class="la la-times"></i><span>{{ "product.box.wishlist_remove"|trans }}</span></a>
        {% endif %}
    </div><!-- End .product-action -->
</div><!-- End .product -->
#}


{% set product = product[0]|default %}
{% set productImages   = getProductImages(product['id']) %}
{% set productLang     = product['productLangs']|default|first %}

{% set productImage1 = productImages[0]|default %}
{% set productImage2 = productImages[1]|default %}
{% set detailLink = path('main_product_show',{'id':product['id'],'alias':productLang['alias']}) %}

{% set productPrice = product.productPrices|first %}
{% set productVariant = productPrice.productVariant %}


<div class="product product-12 text-center">
    <figure class="product-media">
        {% if productPrice.discountRate|default and productPrice.discountRate > 0 %}
            <span class="product-label label-discount"> %{{ productPrice.discountRate }} </span>
        {% endif %}

        <a href="{{ detailLink }}">
            {% set dir = getProductImageDir(product|default,true) %}
            {% if productImages|length > 0 %}
                <div class="product-swiper swiper-container">
                    <div class="swiper-wrapper">
                        {#{% for productImage in productImages %}
                             {% set imageFullPath=  dir|default~productImage.filename|default %}
                             <div class="swiper-slide">
                                 <img class="lazy product-image"
                                      data-src="{{ imageFullPath }}">
                             </div>
                         {% endfor %}#}
                        {% for productImage in productImages %}
                            {#{{ dir }}#}
                            {% set imageFullPath=  dir|default~productImage.filename|default %}
                            <div class="swiper-slide">
                                <img style="max-width: 100%; height:auto;" class="lazy product-image"
                                     data-src="{{ asset(imageFullPath) }}">
                            </div>
                        {% endfor %}


                    </div>
                    <div class="swiper-pagination swiper-pagination-white"></div>
                </div>
            {% endif %}
        </a>


        <div class="product-action-vertical">
            <a href="javascript:" onclick="Order.addToWishlist(this);" data-product="{{ product.id }}"
               class="btn-product-icon btn-wishlist"><span>add to wishlist</span></a>
        </div><!-- End .product-action-vertical -->


    </figure><!-- End .product-media -->

    <div class="product-body">
        <h3 class="product-title"><a href="{{ detailLink }}">{{ productLang.name|default }}</a></h3>


        {% set productReviews = getProductReviews(product,true) %}
        {% if  product.avarageRating|default > 0 %}
            <div class="ratings-container">
                <div class="ratings">
                    <div class="ratings-val" style="width: {{ product.avarageRating|round * 20 }}%;"></div>
                    <!-- End .ratings-val -->
                </div><!-- End .ratings -->
                {% if productReviews>0 %}
                    <span class="ratings-text">({{ productReviews }})</span>
                {% endif %}
            </div><!-- End .rating-container -->
        {% endif %}

        <!-- End .product-title -->
        <div class="product-price">
            {% import "main/common/Macro/money.html.twig" as money %}
            {{ money.calculatePrice(product.id|product_variant,{'originalPrice':1}) }}
            {#            {{  money_format(price) }} TL#}

        </div><!-- End .product-price -->
    </div><!-- End .product-body -->
    <div class="product-action">
        <a href="{{ path('main_product_quickview',{'id':product.id}) }}" class="btn-product btn-cart btn-quickview "><i
                    class="la la-search"></i><span>{{ "product.box.quickview"|trans }}</span></a>
        <a href="{{ path('main_product_quickshop',{'id':product.id}) }}" class="btn-product btn-cart btn-quickshop"><i
                    class="la la-cart-plus"></i><span>{{ "product.box.quickshop"|trans }}</span></a>
        {% if myWishlist|default %}
            <a href="{{ path('main_wishlist_remove',{'id':product.id}) }}" class="btn-product btn-cart"><i
                        class="la la-times"></i><span>{{ "product.box.wishlist_remove"|trans }}</span></a>
        {% endif %}
    </div><!-- End .product-action -->
</div><!-- End .product -->