{{ header }}
<div id="product-compare">
  <div id="breadcrumb" class="section">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">
          <div class="col-md-12">
            <ul class="breadcrumb-tree">
            {% for breadcrumb in breadcrumbs %}
            <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
             {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    </div>
    {% if content_top %}
      <div class="section">
        <div class="container">
          <div class="col-sm-12">{{ content_top }}</div>
        </div>
      </div>
      {% endif %}
    <div class="section">
      <div class="container">
       {% if success %}
        <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
        {% endif %}
        <div id="content">
        <h3>{{ heading_title }}</h3>
        {% if products %}
      <table class="table table-bordered">
        <thead>
          <tr>
            <td colspan="{{ products|length + 1 }}"><strong>{{ text_product }}</strong></td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ text_name }}</td>
            {% for product in products %}
            <td><a href="{{ product.href }}"><strong>{{ product.name }}</strong></a></td>
            {% endfor %} </tr>
          <tr>
            <td>{{ text_image }}</td>
            {% for product in products %}
            <td class="text-center">{% if product.thumb %} 
			{# start owc_core_productpageenhanced_hooks_twig.xml #}
			{# HOOK_PRODUCTPAGEENHANCED_COMPARE_IMAGE #}				
			{# end owc_core_productpageenhanced_hooks_twig.xml #}
			<img src="
		{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /> {% endif %}</td>
            {% endfor %} </tr>
          <tr>
            <td>{{ text_price }}</td>
            {% for product in products %}
            <td>{% if product.price %}
              {% if not product.special %}
              {{ product.price }}
              {% else %} <strike>{{ product.price }}</strike> {{ product.special }}
              {% endif %}
              {% endif %}</td>
            {% endfor %} </tr>
          <tr>
            <td>{{ text_model }}</td>
            {% for product in products %}
            <td>{{ product.model }}</td>
            {% endfor %} </tr>
          <tr>
            <td>{{ text_manufacturer }}</td>
            {% for product in products %}
            <td>{{ product.manufacturer }}</td>
            {% endfor %} </tr>
            
		  {# start owc_core_productpageenhanced_hooks_twig.xml #}		      
      <tr style="{# HOOK_PRODUCTPAGEENHANCED_PRODUCT_HIDE_STOCK #}">
      <td>{{ text_availability }}</td>  
      {# end owc_core_productpageenhanced_hooks_twig.xml #}
    
            {% for product in products %}
            
		  {# start owc_core_productpageenhanced_hooks_twig.xml #}	
      {% if product.owc_productpageenhanced_show_delivery_status %}        
        <td>{# HOOK_PRODUCTPAGEENHANCED_PRODUCT_REPLACE_STOCK #}</td>
      {% else %}   
        <td>{{ product.availability }}</td>
      {% endif %}
			{# end owc_core_productpageenhanced_hooks_twig.xml #}
		
            {% endfor %} </tr>
        {% if review_status %}
        <tr>
          <td>{{ text_rating }}</td>
          {% for product in products %}
          <td class="product-rating"> {% 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 %} <br/>
            {{ product.reviews }}</td>
          {% endfor %} </tr>
        {% endif %}
        <tr>
          <td>{{ text_summary }}</td>
          {% for product in products %}
          <td class="description">{{ product.description }}</td>
          {% endfor %} </tr>
        <tr>
          <td>{{ text_weight }}</td>
          {% for product in products %}
          <td>{{ product.weight }}</td>
          {% endfor %} </tr>
        <tr>
          <td>{{ text_dimension }}</td>
          {% for product in products %}
          <td>{{ product.length }} x {{ product.width }} x {{ product.height }}</td>
          {% endfor %} </tr>
          </tbody>
        
        {% for attribute_group in attribute_groups %}
        <thead>
          <tr>
            <td colspan="{{ products|length + 1 }}"><strong>{{ attribute_group.name }}</strong></td>
          </tr>
        </thead>
        {% for key, attribute in attribute_group.attribute %}
        <tbody>
          <tr>
            <td>{{ attribute.name }}</td>
            {% for product in products %}
            {% if product.attribute[key] %}
            <td> {{ product.attribute[key] }}</td>
            {% else %}
            <td></td>
            {% endif %}
            {% endfor %}
          </tr>
        </tbody>
        {% endfor %}
        {% endfor %}
        <tr>
          <td></td>
          {% for product in products %}
          <td>
		  {# start owc_core_productpageenhanced_hooks_twig.xml #}
      {# HOOK_PRODUCTPAGEENHANCED_PRODUCT_LIST_ADD_TO_CART_BEFORE #}
      <input type="button" value="{{ button_cart }}" class="btn btn-primary btn-block" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" />
      {# HOOK_PRODUCTPAGEENHANCED_PRODUCT_LIST_ADD_TO_CART_AFTER #}
      {# end owc_core_productpageenhanced_hooks_twig.xml #}
    
            <a href="{{ product.remove }}" class="btn btn-danger btn-block">{{ button_remove }}</a></td>
          {% endfor %} </tr>
      </table>
      {% else %}
      <p>{{ text_empty }}</p>
      <div class="buttons">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-default">{{ button_continue }}</a></div>
      </div>
      {% endif %}
         </div> <!-- /end id content -->
        </div> <!-- /end class container -->
    </div><!-- /end section --> 
   {% if content_bottom %}
    <div class="section">
      <div class="container">
        <div class="col-sm-12">{{ content_bottom }}</div>
      </div>
    </div>
    {% endif %}
<!-- /end id -->
</div>
<script type="text/javascript"><!--
var cart = {
  'add': function(product_id, quantity) {
    $.ajax({
      url: 'index.php?route=checkout/cart/add',
      type: 'post',
      data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
      dataType: 'json',
      beforeSend: function() {
        $('#cart > button').button('loading');
      },
      complete: function() {
        $('#cart > button').button('reset');
      },
      success: function(json) {
        $('.alert-dismissible, .text-danger').remove();

        if (json['redirect']) {
          location = json['redirect'];
        }

        if (json['success']) {
          $('#content').parent().before('<div class="container alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

          // Need to set timeout otherwise it wont update the total
          setTimeout(function () {
            $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-basket"></i> ' + json['total'] + '</span>');
          }, 100);

          $('html, body').animate({ scrollTop: 0 }, 'slow');

          $('#cart > ul').load('index.php?route=common/cart/info ul li');
        }
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });
  },
  'update': function(key, quantity) {
    $.ajax({
      url: 'index.php?route=checkout/cart/edit',
      type: 'post',
      data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
      dataType: 'json',
      beforeSend: function() {
        $('#cart > button').button('loading');
      },
      complete: function() {
        $('#cart > button').button('reset');
      },
      success: function(json) {
        // Need to set timeout otherwise it wont update the total
        setTimeout(function () {
          $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-basket"></i> ' + json['total'] + '</span>');
        }, 100);

        if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
          location = 'index.php?route=checkout/cart';
        } else {
          $('#cart > ul').load('index.php?route=common/cart/info ul li');
        }
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });
  },
  'remove': function(key) {
    $.ajax({
      url: 'index.php?route=checkout/cart/remove',
      type: 'post',
      data: 'key=' + key,
      dataType: 'json',
      beforeSend: function() {
        $('#cart > button').button('loading');
      },
      complete: function() {
        $('#cart > button').button('reset');
      },
      success: function(json) {
        // Need to set timeout otherwise it wont update the total
        setTimeout(function () {
          $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-basket"></i> ' + json['total'] + '</span>');
        }, 100);

        if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
          location = 'index.php?route=checkout/cart';
        } else {
          $('#cart > ul').load('index.php?route=common/cart/info ul li');
        }
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });
  }
}

--></script>
{{ footer }} 
