{{ 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-search" class="container cleft manucom">
  <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-8 col-md-9  col-xs-12 colright' %}
    {% else %}
    {% set class = 'col-xs-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <div class="borbutt">
        <h1 class="co-heading text-center">{{ heading_title }}</h1>
      </div>
      <div class="search-page">
      <label class="control-label" for="input-search">{{ entry_search }}</label>
      <div class="row">
        <div class="col-md-4 col-sm-6">
          <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control" />
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="select-input">
          <select name="category_id" class="form-control">
            <option value="0">{{ text_category }}</option>
            {% for category_1 in categories %}
            {% if category_1.category_id == category_id %}
            <option value="{{ category_1.category_id }}" selected="selected">{{ category_1.name }}</option>
            {% else %}
            <option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
            {% endif %}
            {% for category_2 in category_1.children %}
            {% if category_2.category_id == category_id %}
            <option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
            {% else %}
            <option value="{{ category_2.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
            {% endif %}
            {% for category_3 in category_2.children %}
            {% if category_3.category_id == category_id %}
            <option value="{{ category_3.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
            {% else %}
            <option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
            {% endif %}
            {% endfor %}
            {% endfor %}
            {% endfor %}
          </select>
        </div>
        </div>
        <div class="col-md-4 col-sm-12 cin">
          <label class="checkbox-inline">
            {% if sub_category %}
            <input type="checkbox" name="sub_category" value="1" checked="checked" />
            {% else %}
            <input type="checkbox" name="sub_category" value="1" />
            {% endif %}
            {{ text_sub_category }}</label>
        </div>
      </div>
      <p>
        <label class="checkbox-inline">
            
          {% if description %}
          <input type="checkbox" name="description" value="1" id="description" checked="checked" />
          {% else %}
          <input type="checkbox" name="description" value="1" id="description" />
          {% endif %}
          {{ entry_description }}  </br></label>
      </p>
      <input type="button" value="{{ button_search }}" id="button-search" class="btn btn-primary" />
    </div>

      <h2 class="co-heading">  </br>{{ ctext_search }}</h2>
      {% 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.price %}
          {% if product.special %}
               <h1 class="new">{{ pro_new }}</h1>
          {% endif %}
      {% endif %}
                  {% if product.tag_per  %}
        <span class="sale">{{ product.tag_per }}%</span>
        {% 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-12 text-left">{{ pagination }}</div>
        <div class="col-sm-6 col-xs-12 text-right tot">{{ results }}</div>
      </div>
      {% else %}
      <p>{{ ctext_empty }}</p>
      {% endif %}
      </div>
    {{ column_right }}</div>
</div>


<script type="text/javascript">
   (function($){
    $("#cpagerow").owlCarousel({
    itemsCustom : [
    [0, 2],
    [400, 2],
    [600, 3],
    [700, 3],
    [900, 4],
    [1200, 4],
    [1410, 5]
    ],
      // autoPlay: 1000,
      navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
      navigation : true,
      pagination:false
    });
 }(jQuery));
</script>


<script type="text/javascript"><!--
$('#button-search').bind('click', function() {
  url = 'index.php?route=product/search';

  var search = $('#content input[name=\'search\']').prop('value');

  if (search) {
    url += '&search=' + encodeURIComponent(search);
  }

  var category_id = $('#content select[name=\'category_id\']').prop('value');

  if (category_id > 0) {
    url += '&category_id=' + encodeURIComponent(category_id);
  }

  var sub_category = $('#content input[name=\'sub_category\']:checked').prop('value');

  if (sub_category) {
    url += '&sub_category=true';
  }

  var filter_description = $('#content input[name=\'description\']:checked').prop('value');

  if (filter_description) {
    url += '&description=true';
  }

  location = url;
});

$('#content input[name=\'search\']').bind('keydown', function(e) {
  if (e.keyCode == 13) {
    $('#button-search').trigger('click');
  }
});

$('select[name=\'category_id\']').on('change', function() {
  if (this.value == '0') {
    $('input[name=\'sub_category\']').prop('disabled', true);
  } else {
    $('input[name=\'sub_category\']').prop('disabled', false);
  }
});

$('select[name=\'category_id\']').trigger('change');
--></script>

{{ content_bottom }}
{{ footer }}