{{ header }}
<div id="product-category" class="container category">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <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-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>
      {% if thumb or description %}
      <div class="row category_thumb"> {% if thumb %}
        <div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
        {% endif %}
        {% if description %}
        <div class="col-sm-10">{{ description }}</div>
        {% endif %}</div>
      
      {% endif %}
      {% if categories %}
     <div class="subcateory">	  
	  <h3>{{ text_refine }}</h3>
      {% if categories|length <= 5 %}
      <div class="row">
        <div class="col-sm-3">
          <ul>
            {% for category in categories %}
            <li><a href="{{ category.href }}">{{ category.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      </div>
      {% else %}
      <div class="row">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
        <div class="col-sm-3">
          <ul>
            {% for child in category %}
            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}</div>
      <br />
      {% endif %}
      </div>
	  {% endif %}
      
      {% if products %}
      
      <div class="filter-product">
        <div class="btn-grid-list">
          <div class="btn-group btn-group-sm">
            <button type="button" id="filter-view" class="btn btn-default filter collapsed" data-target="#ajaxfilter" data-toggle="collapse" title="{{ button_filter }}"><i class="fa fa-th-list"></i></button>
            <button type="button" id="grid-view" class="btn btn-default grid" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
            <button type="button" id="list-view" class="btn btn-default list" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
            
          </div>
        </div>
        <div class="compare-total"><a href="{{ compare }}" id="compare-total">{{ text_compare }}</a></div>
        <div class="filter-product-right text-right">
          <div class="sort-filter">
            <div class="col-xs-4 col-sm-4 col-md-4 text-right">
              <label class="control-label" for="input-sort">{{ text_sort }}</label>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 text-right">
              <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="show-filter">
            <div class="col-xs-6 col-sm-6 col-md-6 text-right">
              <label class="control-label" for="input-limit">{{ text_limit }}</label>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 text-right">
              <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>
      <div class="products-collection">
      <div class="row product-layoutrow"> {% for product in products %}

        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">
            <div class="image">
      			{% if product.tag_per  %}
      			 <p class="tag">{{ product.tag_per }}<br/> % <br/> <i>off</i></p>
      			{% endif %}
      			
           
            <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
             {% if not product.special %}
                    {% else %}
                    <div class="saleback"> <span class="sale">{{ text_sale }}</span> </div>
                    {% endif %}
       {% if product.rating %}
      <div class="rating">
        {% for i in 1..5 %}
          {% if product.rating < i %} <span class="fa fa-stack">
          <i class="fa fa-star fa-stack-2x blank"></i></span>
           {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span> {% endif %}
          {% endfor %}</div>
           {% endif %}
 
                    </div>

            <div class="product-details">
              <div class="caption">
                 
                 <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>    
              
                {% if product.price %}
                <p 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 %} </p>
                {% endif %}
                  
                <p class="desc">{{ product.description }}</p>
				                    
    <div id="product-{{ product.product_id }}" class="product_option"> 
            
        {% for option in product.options %}           
            {% if option.type == 'select' %}
            <div class="form-group{% if option.required %} required {% endif %}">              
              <label class="control-label">{{ option.name }}</label>
              <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
                <option value="">{{ text_select }}</option>
                {% for option_value in option.product_option_value %}
                <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                {% if option_value.price %}
                ({{ option_value.price_prefix }}{{ option_value.price }})
                {% endif %} </option>
                {% endfor %}
              </select>
            </div>
            {% endif %}
            {% if option.type == 'radio' %}
            <div class="form-group{% if option.required %} required {% endif %}radio-block">
               <label class="control-label">{{ option.name }}</label>
               <div id="input-option{{ option.product_option_id }}">
              {% set i = 1 %}
               {% for option_value in option.product_option_value %}
                <div class="radio">
                  <label data-toggle="tooltip" title="{% if option_value.price %}{{ option_value.price_prefix }}{{ option_value.price }}{% endif %}">
                    <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" {% if i == 1 %} checked="checked" {% endif %}/>
                    {% if option_value.image %}<span> <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> </span>
                    {% else %}
                    <span>{{ option_value.name }}</span>
                    {% endif %} 
                     </label>
                </div>
                 {% set i=i+1 %}
                {% endfor %} </div>
            </div>
            {% endif %}
            {% if option.type == 'checkbox' %}
            <div class="form-group{% if option.required %} required {% endif %}">              
              <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
                    {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
                    {{ option_value.name }}
                    {% if option_value.price %}
                    ({{ option_value.price_prefix }}{{ option_value.price }})
                    {% endif %} </label>
                </div>
                {% endfor %} </div>
            </div>
            {% endif %}
            {% if option.type == 'text' %}
            <div class="form-group{% if option.required %} required {% endif %}">             
              <label class="control-label">{{ option.name }}</label>
              <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" />
            </div>
            {% endif %}
            {% if option.type == 'textarea' %}
            <div class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
            </div>
            {% endif %}
            {% if option.type == 'file' %}
            <div class="form-group{% if option.required %} required {% endif %}">             
              <label class="control-label">{{ option.name }}</label>
              <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
              <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
            </div>
            {% endif %}
            {% if option.type == 'date' %}
            <div class="form-group{% if option.required %} required {% endif %}">              
              <label class="control-label">{{ option.name }}</label>
              <div class="input-group date">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control" />
                <span class="input-group-btn">
                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% if option.type == 'datetime' %}
            <div class="form-group{% if option.required %} required {% endif %}">             
              <label class="control-label">{{ option.name }}</label>
              <div class="input-group datetime">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% if option.type == 'time' %}
            <div class="form-group{% if option.required %} required {% endif %}">            
              <label class="control-label">{{ option.name }}</label>
              <div class="input-group time">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% endfor %}
           
            
           <div class="input-group col-xs-12 col-sm-12 button-group"> 
             
              <label class="control-label col-sm-2 col-xs-2">{{ entry_qty }}</label>
              
              <input type="number" name="quantity" min="1" value="{{ minimum }}" size="1" step="1" id="input-quantity{{ product.product_id }}" class="qty form-control col-sm-2 col-xs-9" />
              <input type="hidden" name="product_id" value="{{ product.product_id }}" />
              <button type="button" class="addtocart" id="add-cart-{{ product.product_id }}" onclick="var xqty='input-quantity{{ product.product_id }}';
              var aqty = parseInt(document.getElementById(xqty).value); addtoCart({{ product.product_id }},aqty);">{{ button_cart }}</button>
              <button type="button" class="compare pull-right"  onclick="compare.add('{{ product.product_id }}');">
            <i class="fa fa-exchange"></i></button>
            <button type="button" class="wishlist pull-right" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i> </button>
            <a class="quickview pull-right" href="{{ product.quick }}"><i class="fa fa-eye"></i></a>
            </div>
           
            </div>

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