{strip}

{if !empty($products)}

    {if !empty($theme_settings.list_features)}
        {$features = $wa->shop->features($products)}
    {/if}

    {$_types = ["thumbs" => "thumbs-view", "table" => "table-view"]}
    {$_type = $_types["thumbs"]}

    {if !empty($theme_settings.products_default_view_type) && !empty($_types[$theme_settings.products_default_view_type])}
        {$_type = $_types[$theme_settings.products_default_view_type]}
    {/if}

    {if !empty($type)}
        {$_type = $_types[$type]}
    {/if}

    {if !empty($short)}
        {$_type = "is-short"}
    {/if}

    <section class="s-products-wrapper" id="js-products-wrapper">
        {if !empty($section_title)}
            <div class="s-section-header">{$section_title}</div>
        {/if}

        {if empty($short)}
            <div class="s-sorting-wrapper">
                <div class="s-layout">
                    {if !empty($show_sorting)}
                        <div class="s-column">
                            {include file="./products.sorting.html" inline}
                        </div>
                    {/if}

                    <div class="s-column right">
                        <div class="s-sorting-list view-filters js-view-filters">
                            <span class="s-label">[`Catalog view`]</span>
                            <a class="js-set-thumbs-view {if $_type == "thumbs-view"}is-active{/if}" href="javascript:void(0);" title="[`Thumbs`]"><i class="icon thumbs"></i></a>
                            <a class="js-set-table-view {if $_type == "table-view"}is-active{/if}" href="javascript:void(0);" title="[`Table`]"><i class="icon table"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        {/if}





     
                            

        {if !empty($slider)}
            <div class="s-slider-wrapper js-slider-wrapper">
                <div class="s-slider-block">
        {/if}

        <ul class="s-products-list {$_type}">
            {if !empty($short)}
                {include file="./products.short.html" inline}
            {else}
                {include file="./products.items.html" inline}
            {/if}
        </ul>

        {if !empty($slider)}
                </div>
                <span class="s-arrow js-arrow left"></span>
                <span class="s-arrow js-arrow right"></span>
            </div>
        {/if}

        {if empty($slider) && isset($pages_count) && $pages_count > 1}
            <div class="s-paging-wrapper {if $theme_settings.pagination == "lazyloading"}is-lazy-loading{/if}" data-loading-text="[`Loading...`]">
                {wa_pagination total=$pages_count attrs=["class" => "s-paging-list"]}
            </div>
        {/if}

        <script>
            ( function($) {
                var use_lazy = {if empty($slider) && isset($pages_count) && $pages_count > 1 && $theme_settings.pagination == "lazyloading"}true{else}false{/if};

                new window.waTheme.init.shop.Products({
                    $wrapper: $("#js-products-wrapper").removeAttr("id"),
                    use_slider: {if !empty($slider)}true{else}false{/if},
                    use_lazy: use_lazy,
                    locales: {
                        to_compare: "[`To comparison`]",
                        in_compare: "[`In comparison list`]",
                        added: "[`Added`]",
                        buy: "[`Buy`]"
                    }
                });
            })(jQuery);
        </script>

    </section>

{/if}

{/strip}