{#
{% extends 'main/main_base.html.twig' %}

{% set productLang = getProductLang({'product':product}) %}
{% set category = product.mainCategory|default %}
{% set productReviews = getProductReviews(product) %}


{% set page_title = productLang.name|default %}
{% block title %}{{ page_title }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('assets/main/css/plugins/nouislider/nouislider.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

    <link rel="stylesheet" type="text/css" href="{{ asset('assets/main/vendor/jssocial/jssocials.css') }}" />
    #}
{#    <link rel="stylesheet" type="text/css" href="{{ asset('assets/main/vendor/jssocial/jssocials-theme-flat.css') }}" />#}{#


    <link rel="stylesheet" href="{{ asset('assets/main/css/product.css') }}">


{% endblock %}
{% block body %}




    #}
{#   Header  #}{#

    {% include "main/Product/Show/_header.html.twig" %}

    <div class="page-content">
        <div class="container">
            <div class="product-details-top">
                <div class="row">

                    <div class="col-md-6">

                        #}
{# Product Images #}{#

                        {% include "main/Product/Show/_images.html.twig" %}

                    </div><!-- End .col-md-6 -->

                    <div class="col-md-6">
                        #}
{# Product Details #}{#

                        {% include "main/Product/Show/_details.html.twig" %}
                    </div><!-- End .col-md-6 -->
                </div><!-- End .row -->
            </div><!-- End .product-details-top -->

            <div class="mb-4"></div>



            {% include "main/Product/Show/_similar_products.html.twig" %}
            <div class="mb-4"></div>


            {% include "main/Product/Show/_best_seller.html.twig" %}



        </div><!-- End .container -->
    </div><!-- End .page-content -->


{% endblock %}


{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    <script src="{{ asset('assets/main/js/jquery.elevateZoom.min.js') }}"></script>

    <script src="{{ asset('assets/main/vendor/jssocial/jssocials.min.js') }}"></script>



    <!-- Initialize Swiper -->
    <script>
        $().ready(function () {

            Site.socialShare();
        });

        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            loop: false,
            freeMode: true,
            loopedSlides: 5, //looped slides should be the same
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop: true,
            loopedSlides: 5, //looped slides should be the same
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs,
            },
            autoHeight: true,
        });





    </script>

{% endblock %}
#}

{% extends 'main/main_base.html.twig' %}

{% set productLang = getProductLang({'product':product}) %}
{% set category = product.mainCategory|default %}
{% set productReviews = getProductReviews(product) %}


{% set page_title = productLang.name|default %}
{% block title %}{{ page_title }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="{{ asset('assets/main/css/plugins/nouislider/nouislider.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"/>

    <link rel="stylesheet" type="text/css" href="{{ asset('assets/main/vendor/jssocial/jssocials.css') }}"/>
    {#    <link rel="stylesheet" type="text/css" href="{{ asset('assets/main/vendor/jssocial/jssocials-theme-flat.css') }}" />#}

    <link rel="stylesheet" href="{{ asset('assets/main/css/product.css') }}">

{% endblock %}
{% block body %}
    <style type="text/css">
        .product-gallery {
            height: auto !important;
        }

        .product-media a .swiper-container {
            height: auto !important;
        }

        .product-label {
            z-index: 99 !important;
        }
    </style>

    {#   Header  #}
    {% include "main/Product/Show/_header.html.twig" %}

    <div class="page-content">
        <div class="container">
            <div class="product-details-top">
                <div class="row">

                    <div class="col-md-6">

                        {# Product Images #}
                        {% include "main/Product/Show/_images.html.twig" %}

                    </div><!-- End .col-md-6 -->

                    <div class="col-md-6">
                        {# Product Details #}
                        {% include "main/Product/Show/_details.html.twig" %}
                    </div><!-- End .col-md-6 -->

                    <div class="product-details-tab col-md-12">
                        <ul class="nav nav-pills justify-content-center" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link" id="product-review-link" data-toggle="tab"
                                   href="#product-review-tab" role="tab" aria-controls="product-review-tab"
                                   aria-selected="false">{{ "product.detail.tab.reviews"|trans }}
                                    ({{ productReviews|length|default("0") }})</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " id="product-installment-link" data-toggle="tab"
                                   href="#product-installment-tab" role="tab" aria-controls="product-installment-tab"
                                   aria-selected="false">{{ "product.detail.tab.installament_options"|trans }}</a>
                            </li>
                        </ul>
                        <div class="tab-content">

                            {% include "main/Product/Show/_tab_reviews.html.twig" %}

                            {% include "main/Product/Show/_tab_installment.html.twig" %}

                        </div><!-- End .tab-content -->
                    </div><!-- End .product-details-tab -->

                </div><!-- End .row -->
            </div><!-- End .product-details-top -->

            <div class="mb-4"></div>


            {% include "main/Product/Show/_similar_products.html.twig" %}
            <div class="mb-4"></div>


            {% include "main/Product/Show/_best_seller.html.twig" %}


        </div><!-- End .container -->
    </div><!-- End .page-content -->


{% endblock %}


{% block javascripts %}
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    <script src="{{ asset('assets/main/js/jquery.elevateZoom.min.js') }}"></script>

    <script src="{{ asset('assets/main/vendor/jssocial/jssocials.min.js') }}"></script>



    <!-- Initialize Swiper -->
    <script>
        $().ready(function () {

            Site.socialShare();
        });

        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            loop: false,
            freeMode: true,
            loopedSlides: 5, //looped slides should be the same
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop: true,
            loopedSlides: 5, //looped slides should be the same
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs,
            },
            autoHeight: true,
        });


    </script>

{% endblock %}