<div class="products-container {{ layout_classname }}">
    <div class="block-title">
        <h3>{{ title ? title : module_product_title }}</h3>
        {% if module_des %}
            <p>{{ module_des }}</p>
        {% endif %}
    </div>
    <div class="pt-content">
        {# Single Tab #}
        {% if module_type == 'single_tab' %}
            {% if single_products %}
                {% if layout_type == 'slider' %}
                    <div class="swiper-viewport">
                        <div class="swiper-container single-slides-{{ module_id }}">
                            <div class="swiper-wrapper">
                                {% for product in single_products %}
                                <div class="product-thumb transition swiper-slide">
                                    {{ product.html }}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% if slide.pagination %}
                            <div class="swiper-pagination single-slides-pagination-{{ module_id }}"></div>
                        {% endif %}

                        {% if slide.navigation %}
                            <div class="swiper-pager">
                                <div class="swiper-button-next swiper-button-next-{{ module_id }}"></div>
                                <div class="swiper-button-prev swiper-button-prev-{{ module_id }}"></div>
                            </div>
                        {% endif %}
                    </div>
                {% endif %}

                {% if layout_type == 'large_item' %}
                    <div class="row">
                        <div class="col-md-4 col-sm-12">
                            <div class="fproduct-content">
                                <div class="product-thumb">
                                    {{ single_first_product.html }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 col-sm-12">
                            <div class="swiper-viewport">
                                <div class="swiper-container single-slides-{{ module_id }}">
                                    <div class="swiper-wrapper">
                                        {% for product in single_products_except_first %}
                                            <div class="product-thumb transition swiper-slide">
                                                {{ product.html }}
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% if slide.pagination %}
                                    <div class="swiper-pagination single-slides-pagination-{{ module_id }}"></div>
                                {% endif %}

                                {% if slide.navigation %}
                                    <div class="swiper-pager">
                                        <div class="swiper-button-next swiper-button-next-{{ module_id }}"></div>
                                        <div class="swiper-button-prev swiper-button-prev-{{ module_id }}"></div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endif %}

                {% if layout_type == 'image' %}
                    <div class="row">
                        <div class="col-md-4 col-sm-12">
                            <div class="image-content">
                                {% if single_image_link %}
                                    <a href="{{ single_image_link }}">
                                        <img src="{{ single_image }}" alt="" />
                                    </a>
                                {% else %}
                                    <img src="{{ single_image }}" alt="" />
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-8 col-sm-12">
                            <div class="swiper-viewport">
                                <div class="swiper-container single-slides-{{ module_id }}">
                                    <div class="swiper-wrapper">
                                        {% for product in single_products %}
                                            <div class="product-thumb transition swiper-slide">
                                                {{ product.html }}
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% if slide.pagination %}
                                    <div class="swiper-pagination single-slides-pagination-{{ module_id }}"></div>
                                {% endif %}

                                {% if slide.navigation %}
                                    <div class="swiper-pager">
                                        <div class="swiper-button-next swiper-button-next-{{ module_id }}"></div>
                                        <div class="swiper-button-prev swiper-button-prev-{{ module_id }}"></div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endif %}

                <script>
                    $(".single-slides-{{ module_id }}").swiper({
                        spaceBetween: 20,
                        {% if slide.pagination %}
                        pagination: '.single-slides-pagination-{{ module_id }}',
                        paginationClickable: true,
                        {% endif %}
                        {% if slide.navigation %}
                        nextButton: '.swiper-button-next-{{ module_id }}',
                        prevButton: '.swiper-button-prev-{{ module_id }}',
                        {% endif %}
                        speed: {% if slide.speed %} {{ slide.speed }} {% else %} 500 {% endif %},
                        slidesPerView: {{ slide.item_desktop }},
                        slidesPerColumn: {{ slide.row_desktop }},
                        breakpoints: {
                            1199: {
                                slidesPerView: {{ slide.item_desktop }},
                                spaceBetween: 20,
                                slidesPerColumn: {{ slide.row_desktop }}
                            },
                            991: {
                                slidesPerView: {{ slide.item_laptop }},
                                spaceBetween: 10,
                                slidesPerColumn: {{ slide.row_laptop }}
                            },
                            767: {
                                slidesPerView: {{ slide.item_tablet }},
                                spaceBetween: 10,
                                slidesPerColumn: {{ slide.row_tablet }}
                            },
                            479: {
                                slidesPerView: {{ slide.item_mobile }},
                                spaceBetween: 5,
                                slidesPerColumn: {{ slide.row_mobile }}
                            }
                        },
                        autoplay: {% if slide.auto %} 500 {% else %} false {% endif %},
                        loop: false
                    });
                </script>
            {% else %}
                <p class="txt-empty">{{ text_empty }}</p>
            {% endif %}
        {% endif %}

        {# Multi Tabs #}
        {% if module_type == 'multi_tabs' %}
        <div class="product-tabs-section">
            <ul class="nav nav-tabs">
                {% set tab_count = 0 %}
                {% for tab in tabs %}
                    <li>
                        <a href="javascript:void(0);" data-tab="#tab-product-{{ module_id }}-{{ tab_count }}">
                            {{ tab.title }}
                        </a>
                    </li>
                    {% set tab_count = tab_count + 1 %}
                {% endfor %}
            </ul>
            <div class="tab-content product-tabs-content">
                {% set tab_count = 0 %}
                {% for tab in tabs %}
                    <div class="tab-product" id="tab-product-{{ module_id }}-{{ tab_count }}">
                        {% if tab.products %}
                            {% if layout_type == 'slider' %}
                                <div class="swiper-viewport">
                                    <div id="{{ module_id }}-{{ tab_count }}-products-container" class="multi-slides-{{ module_id }}-{{ tab_count }} swiper-container">
                                        <div class="swiper-wrapper">
                                            {% for product in tab.products %}
                                                <div class="product-thumb transition swiper-slide">
                                                    {{ product.html }}
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    {% if slide.pagination %}
                                        <div class="swiper-pagination multi-slides-pagination-{{ module_id }}-{{ tab_count }}"></div>
                                    {% endif %}

                                    {% if slide.navigation %}
                                        <div class="swiper-pager">
                                            <div class="swiper-button-next swiper-button-next-{{ module_id }}-{{ tab_count }}"></div>
                                            <div class="swiper-button-prev swiper-button-prev-{{ module_id }}-{{ tab_count }}"></div>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}

                            {% if layout_type == 'large_item' %}
                                <div class="row">
                                    <div class="col-md-4 col-sm-12">
                                        <div class="fproduct-content">
                                            <div class="product-thumb">
                                                {{ tab['first_product'].html }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-sm-12">
                                        <div class="swiper-viewport">
                                            <div id="{{ module_id }}-{{ tab_count }}-products-container" class="multi-slides-{{ module_id }}-{{ tab_count }} swiper-container">
                                                <div class="swiper-wrapper">
                                                    {% for product in tab.products_except_first %}
                                                        <div class="product-thumb transition swiper-slide">
                                                            {{ product.html }}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                            {% if slide.pagination %}
                                                <div class="swiper-pagination multi-slides-pagination-{{ module_id }}-{{ tab_count }}"></div>
                                            {% endif %}

                                            {% if slide.navigation %}
                                                <div class="swiper-pager">
                                                    <div class="swiper-button-next swiper-button-next-{{ module_id }}-{{ tab_count }}"></div>
                                                    <div class="swiper-button-prev swiper-button-prev-{{ module_id }}-{{ tab_count }}"></div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            {% if layout_type == 'image' %}
                            <div class="row">
                                <div class="col-md-4 col-sm-12">
                                    <div class="image-content">
                                        {% if tab.image['link'] %}
                                            <a href="{{ tab.image['link'] }}">
                                                <img src="{{ tab.image['src'] }}" alt="" />
                                            </a>
                                        {% else %}
                                            <img src="{{ tab.image['src'] }}" alt="" />
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-8 col-sm-12">
                                    <div class="swiper-viewport">
                                        <div id="{{ module_id }}-{{ tab_count }}-products-container" class="multi-slides-{{ module_id }}-{{ tab_count }} swiper-container">
                                            <div class="swiper-wrapper">
                                                {% for product in tab.products %}
                                                    <div class="product-thumb transition swiper-slide">
                                                        {{ product.html }}
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% if slide.pagination %}
                                            <div class="swiper-pagination multi-slides-pagination-{{ module_id }}-{{ tab_count }}"></div>
                                        {% endif %}

                                        {% if slide.navigation %}
                                            <div class="swiper-pager">
                                                <div class="swiper-button-next swiper-button-next-{{ module_id }}-{{ tab_count }}"></div>
                                                <div class="swiper-button-prev swiper-button-prev-{{ module_id }}-{{ tab_count }}"></div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                            <script>
                                $(".multi-slides-{{ module_id }}-{{ tab_count }}").swiper({
                                    spaceBetween: 20,
                                    {% if slide.pagination %}
                                    pagination: '.multi-slides-pagination-{{ module_id }}-{{ tab_count }}',
                                    paginationClickable: true,
                                    {% endif %}
                                    {% if slide.navigation %}
                                    nextButton: '.swiper-button-next-{{ module_id }}-{{ tab_count }}',
                                    prevButton: '.swiper-button-prev-{{ module_id }}-{{ tab_count }}',
                                    {% endif %}
                                    speed: {% if slide.speed %} {{ slide.speed }} {% else %} 500 {% endif %},
                                    slidesPerView: {{ slide.item_desktop }},
                                    slidesPerColumn: {{ slide.row_desktop }},
                                    breakpoints: {
                                        1199: {
                                            slidesPerView: {{ slide.item_desktop }},
                                            spaceBetween: 20,
                                            slidesPerColumn: {{ slide.row_desktop }}
                                        },
                                        991: {
                                            slidesPerView: {{ slide.item_laptop }},
                                            spaceBetween: 10,
                                            slidesPerColumn: {{ slide.row_laptop }}
                                        },
                                        767: {
                                            slidesPerView: {{ slide.item_tablet }},
                                            spaceBetween: 10,
                                            slidesPerColumn: {{ slide.row_tablet }}
                                        },
                                        479: {
                                            slidesPerView: {{ slide.item_mobile }},
                                            spaceBetween: 5,
                                            slidesPerColumn: {{ slide.row_mobile }}
                                        }
                                    },
                                    autoplay: {% if slide.auto %} 500 {% else %} false {% endif %},
                                    loop: false
                                });
                            </script>
                        {% else %}
                            <p class="txt-empty">{{ text_empty }}</p>
                        {% endif %}
                    </div>
                    {% set tab_count = tab_count + 1 %}
                {% endfor %}
            </div>
        </div>
        <script>
            $('.product-tabs-section .nav-tabs > li').first().addClass('active');
            $('.product-tabs-section .tab-content > .tab-product').hide();
            $('.product-tabs-section .tab-content > .tab-product').first().show();

            $('.product-tabs-section .nav-tabs a').on('click', function () {
                $('.product-tabs-section .nav-tabs > li').removeClass('active');
                $(this).closest('li').addClass('active');

                $('.product-tabs-section .tab-content > .tab-product').hide();
                var tab = $(this).data('tab');
                $(tab).show();
            });
        </script>
        {% endif %}
    </div>
</div>