---
brand:
    products:
        limit: {{theme_settings.brandpage_products_per_page}}
---
{{inject "brandProductsPerPage" theme_settings.brandpage_products_per_page}}
{{#partial "head"}}
    {{#if pagination.brand.previous}}
        <link rel="prev" href="{{pagination.brand.previous}}">
    {{/if}}
    {{#if pagination.brand.next}}
        <link rel="next" href="{{pagination.brand.next}}">
    {{/if}}
{{/partial}}

{{#partial "page"}}
{{!--
{{#if brand.image}}
    <div class="brand-image-container">
        {{> components/common/responsive-img
            image=brand.image
            fallback_size=theme_settings.thumb_size
            lazyload='disabled'
        }}
    </div>
{{/if}}
--}}
<div class="page-header_container banner-header">
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<h1 class="page-heading">{{brand.name}}</h1>
</div>
{{{region name="brand_below_header"}}}
<div class="container">
<div class="page">
    <div class="filter-slide_toggle bg_toggle"></div>
    <div class="page-sidebar ">
        <div class="filter-slide_toggle">
            <img src="{{cdn '/assets/img/icons/ico_close@2x.png'}}" alt="">
        </div>
        <aside class="page-sidebar_aside product-filter" id="faceted-search-container" data-sidebartype="brands">

            {{> components/brand/sidebar}}
        </aside>
    </div>


    <main class="page-content" id="product-listing-container">
        {{#if brand.products}}
        <div class="mobile-display">
            <div class="mobile-sorting-filter_container">
                <div class="mobile-sorting">{{> components/products/filter sort=pagination.category.sort}}</div>
                <div class="filter-slide_toggle"><span>+</span><span>filter</span></div>
            </div>
        </div>
            {{> components/brand/product-listing}}
        {{else}}
            <p>{{lang 'brands.no_products'}}</p>
        {{/if}}
        {{{region name="brand_below_content"}}}
    </main>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.body').attr('data-page-type','plp').addClass('product-view-listing plp-container')
    });

</script>
{{/partial}}
{{> layout/base}}