{{ header }}
<div class="breadbg">
  <div class="container">
    <div class="row">
      <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
    </ul>
  </div>
</div>
</div>
<div id="product-category" class="container cleft">
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-12 col-md-9  col-xs-12 colright' %}
    {% else %}
    {% set class = 'col-xs-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      {% if thumb or description %}
      <div class="cate-top row hidden-xs"> 
        <h2>{{ heading_title }}</h2>
        <div class="row">
          <div class="col-lg-2 col-md-2 col-sm-2">
              {% if thumb %}
              <img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-responsive center-block" />
            {% endif %}
          </div>
          <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 catedes">
             {% if description %}
              {{ description }}
            {% endif %}
          </div>
        </div>
      </div>
      {% endif %}

      <div class="appres"></div>
      {% if categories and products %}
    <div class="refines">
      <h3>{{ text_refine }}</h3>
      {% if categories|length <= 5 %}
          <ul class="list-unstyled list-inline">
            {% for category in categories %}
            <li><a href="{{ category.href }}">{{ category.name }}</a></li>
            {% endfor %}
          </ul>
      {% else %}
      {% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
          <ul class="list-unstyled list-inline">
            {% for child in category %}
            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
        {% endfor %}
      {% endif %}
    </div>
    {% endif %}
    
      {% if products %}
      <div class="row cate-border">
            <div class="col-md-2 col-sm-3 col-xs-4 lgrid">
                <div class="btn-group-sm">
                    <button type="button" id="list-view" class="btn listgridbtn" data-toggle="tooltip" title="{{ button_list }}">
                     <svg width="20px" height="20px"><use xlink:href="#clist"></use> </svg>
                    </button>
                    <button type="button" id="grid-view" class="btn listgridbtn" data-toggle="tooltip" title="{{ button_grid }}">
                       <svg width="18px" height="18px"><use xlink:href="#cgrid"></use> </svg>
                    </button>
                </div>
            </div>
            <div class="col-lg-4 col-md-5 col-sm-6 col-xs-8 hidden-md hidden-sm ct">
                <a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a>
            </div>
            <div class="col-lg-3 col-md-5 col-xs-4 col-sm-5 catesort">
                <div class="input-group input-group-sm select-input">
                    <label class="input-group-addon" for="input-sort">{{ text_sort }}</label>
                  
                    <select id="input-sort" class="form-control" onchange="location = this.value;">
                        {% for sorts in sorts %}
                            {% if sorts.value == '%s-%s'|format(sort, order) %}
                                <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                            {% else %}
                                <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="col-lg-3 col-md-5 col-xs-4 col-sm-4 catesort">
                <div class="input-group input-group-sm select-input">
                    <label class="input-group-addon" for="input-limit">{{ text_limit }}</label>
                    <select id="input-limit" class="form-control" onchange="location = this.value;">
                        {% for limits in limits %}
                            {% if limits.value == limit %}
                                <option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
                            {% else %}
                                <option value="{{ limits.href }}">{{ limits.text }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
      <div class="row cpagerow rless"> {% for product in products %}
        <div class="product-layout product-list col-xs-12 cless">
          <div class="product-thumb transition">
      <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive center-block" /></a>
                        {% set t = 0 %}
                          {% for webi_image in product.webi_images %}
                          {% if t == 0 %}
                           <a href="{{ product.href }}"><img src="{{ webi_image.popup }}" class="img-responsive second-img" alt="hover image"/></a>
                          {% set t = t + 1 %}
                          {% endif %}
                        {% endfor %}
      
       {% if product.is_new %}<span class="new">{{ pro_new }}</span>{% endif %}

          {% if product.tag_per  %}
        {# <span class="sale">{{ product.tag_per }}%</span> #}
        {% endif %}

        {% if product.price %}
          {% if product.special %}
              <!--  <span class="reduce-price">{{ pro_sale }}</span> -->
          {% endif %}
      {% endif %}

      
        
      </div>

                <div class="caption text-center">
                  {% if product.rating %}
                    <div class="rating text-center">
                      {% for i in 1..5 %}
                      {% if product.rating < i %}
                      <span class="fa fa-stack">
                        <i class="fa fa-star-o fa-stack-2x"></i>
                      </span>
                      {% else %}
                      <span class="fa fa-stack">
                        <i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i>
                      </span>
                      {% endif %}
                      {% endfor %}
                    </div>{% else %}
                    <div class="rating text-center">{% for i in 1..5 %}
                    <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                    {% endfor %}</div>
                  {% endif %}
                  <h4 class="protitle"><a href="{{ product.href }}">{{ product.name }}</a></h4>
                  <p class="catlist-des">{{ product.description }}</p>
                   {% if product.price %}
                  <div class="price">
                    {% if not product.special %}
                    {{ product.price }}
                    {% else %}
                    <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
                    {% endif %}
                   {#  {% if product.tax %}
                    <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
                    {% endif %} #}
                  </div>
                  {% endif %}

                  <div class="button-group text-center">
                    <div class="btn_group">
                      <div class="btn-cart">
                        <button class="cartb add-to-cart" type="button" data-toggle="tooltip" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}');"><svg><use xlink:href="#pcart"></use></svg></button>
                      </div>
                      <div class="btn-wishlist">
                        <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><svg><use xlink:href="#heart" /></svg></button>
                      </div>
                      <div class="btn-compare">
                        <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><svg><use xlink:href="#compare"/></svg></button>
                      </div>
                      <div class="btn-quickview">
                        <div data-toggle="tooltip" title="Quickview"  class="bquickv"></div>
                      </div>
                    </div>
                  </div>
              </div>



    </div>
        </div>
        {% endfor %} </div>
      <div class="row pagi">
        <div class="col-sm-6 col-xs-6 text-left">{{ pagination }}</div>
        <div class="col-sm-6 col-xs-6 text-right tot">{{ results }}</div>
      </div>
      {% endif %}
      {% if not categories and not products %}
      <p>{{ ctext_empty }}</p>
      <div class="buttons">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>
      {% endif %}
      </div>
    {{ column_right }}</div>
</div>
{{ content_bottom }}
{{ footer }}