{{ header }}
<div class="container">
  <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 }}
	{% if listing_row == 1 %}
		 {% set listing_row = 'col-sm-12' %}
		 {% elseif listing_row == 2 %}
		 {% set listing_row = 'col-sm-6' %}
		 {% elseif listing_row == 3 %}
		 {% set listing_row = 'col-sm-4' %}
		 {% elseif listing_row == 4 %}
		 {% set listing_row = 'col-sm-3' %}
		 {% endif %}
			 {% include 'default/template/extension/post/post'~mlisting_layout~'.twig' %}
	
	    {{ content_bottom }}</div>
		{{ column_right }}
		{{ login }}
		{{ signup }}
		
	</div>
	{% include 'default/template/extension/listing/home'~mrelated_listing~'.twig' %}
		{% if products %}
      <h3>{{ text_related }}</h3>
      <div class="row">
	  {% set i = 0 %}
        {% for product in products %}
        {% if column_left and column_right %}
        {% set class = 'col-lg-6 col-md-6 col-sm-12 col-xs-12' %}
        {% elseif column_left or column_right %}
        {% set class = 'col-lg-4 col-md-4 col-sm-6 col-xs-12' %}
        {% else %}
        {% set class = 'col-lg-3 col-md-3 col-sm-6 col-xs-12' %}
        {% endif %}
        <div class="{{ class }}">
          <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" /></a></div>
            <div class="caption">
              <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
              <p>{{ product.description }}</p>
              {% if product.rating %}
              <div class="rating"> {% for j in 1..5 %}
                {% if product.rating < j %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span> {% endif %}
                {% endfor %} </div>
              {% endif %}
              {% 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 %}
            </div>
            <div class="button-group">
              <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span> <i class="fa fa-shopping-cart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
         {% if column_left and column_right and (i + 1) % 2 == 0 %}
        <div class="clearfix visible-md visible-sm"></div>
        {% elseif column_left or column_right and (i + 1) % 3 == 0 %}
        <div class="clearfix visible-md"></div>
        {% elseif (i + 1) % 4 == 0 %}
        <div class="clearfix visible-md"></div>
        {% endif %}
        {% set i = i + 1 %}
        {% endfor %}
      </div>
     {% endif %}
</div>
<script type="text/javascript"><!--
$(document).delegate('#quickregister', 'click', function(e){
	$('#modal-quicklogin').modal('hide');
	$('#modal-blogsignup').modal('show');
});

$('#quicklogin').click(function(){
	$('#modal-quicklogin').modal('show');
});
//--></script>
<script type="text/javascript"><!--
$('#review').delegate('.pagination a', 'click', function(e) {
    e.preventDefault();

    $('#review').fadeOut('slow');

    $('#review').load(this.href);

    $('#review').fadeIn('slow');
});

$('#review').load('index.php?route=extension/post/review&post_id={{ post_id }}');

$('#button-review').on('click', function(){
	$.ajax({
		url: 'index.php?route=extension/post/write&post_id={{ post_id }}',
		type: 'post',
		dataType: 'json',
		data: $("#form-review").serialize(),
		beforeSend: function() {
			$('#button-review').button('loading');
		},
		complete: function() {
			$('#button-review').button('reset');
		},
		success: function(json) {
			$('.alert-success, .alert-danger').remove();

			if (json['error']) {
				$('#form-review').before('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
				$('#form-review').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
				
				$('#review').load('index.php?route=extension/post/review&post_id={{ post_id }}');
				
				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').prop('checked', false);
			}
		}
	});
});

$('#button-like').on('click', function(){
	$.ajax({
		url: 'index.php?route=extension/post/like&post_id={{ post_id }}',
		type: 'post',
		dataType: 'json',
		success: function(json){
			if(json['success']){
				$('.like_message').html('<span>'+ json['success'] +'</span>');
			}
			if(json['error']){
			  $('#modal-quicklogin').modal('show');
			}
		}
	});
});
//--></script>
{% if snippet %}
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ blog_url }}"
  },
  "headline": "{{ heading_title }}",
  "image": [
    "{{ thumb }}"
   ],
  "datePublished": "{{ publisheddate }}",
  "dateModified": "{{ publisheddatemodified }}",
  "author": {
    "@type": "Person",
    "name": "{{ username }}"
  },
   "publisher": {
    "@type": "Organization",
    "name": "{{ storename }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ logo }}"
    }
  },
  "description": "{{ description }}"
}
</script>
{% endif %}
{{ footer }}