{{#if category.products}}
{{!--
    <!-- {{> components/products/filter sort=pagination.category.sort}} -->

    <!-- <form action="{{urls.compare}}" method='POST' {{#if settings.data_tag_enabled}} data-list-name="Category: {{category.name}}" {{/if}} data-product-compare> -->
--}}
<div class="plp-top-tool">
    <div class="plp-compare-btn">
        <a class="compare-plp"
               href="{{urls.compare}}"
               id="compare-link-plp"
            >
            {{lang 'common.compare'}}<span class="compare-count"></span>
        </a>
    </div>

    <div class="display_mode">
        <div class="mode-switch list-mode {{#unless theme_settings.product_list_display_mode '===' 'grid'}}--active{{/unless}}" title="{{lang 'plp.display_mode.list'}}">
            <i class="svg-icon">
                <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m23 0h-22c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1h22c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1z"/><path d="m23 9h-22c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1h22c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1z"/><path d="m23 18h-22c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1h22c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1z"/></svg>
            </i>
        </div>
        <div class="mode-switch grid-mode {{#if theme_settings.product_list_display_mode '===' 'grid'}}--active{{/if}}" title="{{lang 'plp.display_mode.grid'}}">
            <i class="svg-icon">
                <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m0 13.75v9.25c0 .552.448 1 1 1h9.25c.552 0 1-.448 1-1v-9.25c0-.552-.448-1-1-1h-9.25c-.552 0-1 .448-1 1z"/><path d="m10.25 0h-9.25c-.552 0-1 .448-1 1v9.25c0 .552.448 1 1 1h9.25c.552 0 1-.448 1-1v-9.25c0-.552-.448-1-1-1z"/><path d="m13.75 24h9.25c.552 0 1-.448 1-1v-9.25c0-.552-.448-1-1-1h-9.25c-.552 0-1 .448-1 1v9.25c0 .552.448 1 1 1z"/><path d="m23 0h-9.25c-.552 0-1 .448-1 1v9.25c0 .552.448 1 1 1h9.25c.552 0 1-.448 1-1v-9.25c0-.552-.448-1-1-1z"/></svg>
            </i>
        </div>
    </div>
</div>

{{#if theme_settings.product_list_display_mode '===' 'grid'}}
    {{#if settings.data_tag_enabled}}
        {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list"  css="--grid"}}
    {{else}}
        {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings css="--grid"}}
    {{/if}}
{{else}}
    {{#if settings.data_tag_enabled}}
        {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list"  css="--list"}}
    {{else}}
        {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings css="--list"}}
    {{/if}}
{{/if}}


{{!--
    <!-- </form> -->
--}}
    {{> components/common/paginator pagination.category}}
{{else}}
    <span role="text" tabindex="0">{{lang 'categories.no_products'}}</span>
{{/if}}
<script type="text/javascript">
    $(document).ready(function() {
        $('.mode-switch.grid-mode').click(function(){
            $(this).siblings('.mode-switch').removeClass('--active');
            $(this).addClass('--active');
            $('.productGrid').removeClass('--list').addClass('--grid');
        })
        $('.mode-switch.list-mode').click(function(){
            $(this).siblings('.mode-switch').removeClass('--active');
            $(this).addClass('--active');
            $('.productGrid').removeClass('--grid').addClass('--list');
        })
	});
</script>