{if $product_list}
<div class="row">
    <div class="col-md-12">
        {include file="$selected_template/xtCore/pages/product_listing/product_listing_v1.html" type="tpl_include" product_listing=$product_list heading_text='' categories='' manufacturer='' category_data=''}
    </div>
</div>

{literal}
<script type="text/javascript">
    jQuery(document).ready(function() {
        var $loadingBar = $('<div class="loading-bar" style="position: relative; width: 100%; height: 100%;"><img src="{$selected_template}../../plugins/xtlive_elements/images/ring.svg" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 20%;"></div>');
        $(document).on('click', '.product-listing .nav-pages.btn-group a.btn', function(ev) {
            ev.preventDefault();
            var $productListingContainer = $(this).closest('.product-listing');
            var productListingId = $productListingContainer.closest('div.xtlive').attr('id');
            $loadingBar.height($productListingContainer.height());
            $productListingContainer.fadeOut( '100', function() { $productListingContainer.before($loadingBar) } ) ;

            $.ajax({
                url: $(this).attr('href'),
                type: 'GET'
            })
            .done(function(response){
                newProductListingSelector = '#' + productListingId + ' .product-listing';
                $newProductListingContainer = $(response).find(newProductListingSelector);
                $productListingContainer.replaceWith($newProductListingContainer);
                $loadingBar.remove();
                var listing = $newProductListingContainer,
                        buttons = {},
                        switcher,
                        keks = {
                            key: 'ListingSwitch',
                            value: false
                        },
                        switchTo;


                if (listing.length) {

                    switcher = $newProductListingContainer.find(".listing-switch");
                    if (switcher.length) {
                        // init
                        switcher.removeClass('hidden');

                        keks.value = esseKeks(keks.key);
                        switchTo = function (from, to) {
                            listing.removeClass('product-listing-' + from);
                            listing.addClass('product-listing-' + to).addClass('switch-active');
                            keks.value = to;
                        };
                        buttons = {
                            'v1': switcher.find(".v1"),
                            'v2': switcher.find(".v2"),
                            'all': switcher.find(".btn")
                        };

                        // switch to listing by cookie setting
                        if (keks.value) {
                            if (keks.value == 'v1') {
                                switchTo('v2', 'v1');
                            } else if (keks.value == 'v2') {
                                switchTo('v1', 'v2');
                            }
                        }

                        // highlight active button
                        if (listing.hasClass('product-listing-v1')) {
                            buttons.all.removeClass('active');
                            buttons.v1.addClass('active');
                        } else if (listing.hasClass('product-listing-v2')) {
                            buttons.all.removeClass('active');
                            buttons.v2.addClass('active');
                        }

                        // switch to listing by button press
                        buttons.all.click(function () {
                            var self = jQuery(this);
                            if (!self.hasClass('active')) {

                                buttons.all.removeClass('active');
                                self.addClass('active');
                                if (self.hasClass('v1')) {
                                    switchTo('v2', 'v1');
                                } else if (self.hasClass('v2')) {
                                    switchTo('v1', 'v2');
                                }
                                equalizeListingHeights(".products");
                                backeKeks(keks.key, keks.value, 365);
                            } else {
                                self.blur();
                            }
                        });
                    }

                }

            });
        });
    });
</script>
{/literal}
{/if}