{% set category_page = globals.category_page %}

<section id="products-grid-sidebar" class="section-products-grid">
    <div class="container">
        <div class="col-xs-12 col-md-3">
            <div class="sidebar">
                <div class="accordion-widget category-accordions">
                    
                    {% if category_page %}
                    <h2>{{ category.name }}</h2>
                    {% else %}
                    <h2>Categories</h2>
                    {% endif %}
                    
                    {{ partial('shop-categories') }}
                    
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-9">
            
            {% if category_page and not category %}
                <h2>Category not found</h2>
                <p>We are sorry, the requested category was not found.</p>
            {% else %}
            <div class="banner">
                <img alt="" class="lazy" src="{{ theme.shopImageBanner.thumbnail('auto', 'auto') }}" />
            </div>
            <div class="row">
                <div class="col-xs-6">
                </div>
                <div class="col-xs-6">
                    <div class="grid-list-buttons">
                        <ul class="list-inline">
                            <li class="active"><a data-toggle="tab" href="#grid-view"><i class="fa fa-th-large"></i> Grid</a></li>
                            <li ><a data-toggle="tab" href="#list-view"><i class="fa fa-th-list"></i> List</a></li>
                        </ul>
                    </div>
                </div>
            </div>            
            
                {% paginate products by 8 %}

                <div class="product-grid no-move-down tab-content">
    
                    <!-- grid view starts here -->
                    <div id="grid-view" class="tab-pane active">
                        
                        {{ partial('shop-grid-view', { 'product': product, 'products': products, 'pagination': pagination}) }} 
    
                    </div>
                    <!-- List View starts here-->
                    <div id="list-view" class="tab-pane">
                    
                        {{ partial('shop-list-view', { 'product': product, 'products': products, 'pagination': pagination}) }}    
                    
                    </div>
                        
                </div>
                
                <div class="paging-holder">
                    {% navigation %}
                </div>
                
                {% endpaginate %}
                    
            {% endif %}
        </div>
    </div>
</section>