{{ header }}
<div id="product-product" 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 }}
			<div class="row">
				<div class="col-sm-12">
					{% if thumb or images %}
						<ul class="thumbnails">
							{% if thumb %}
								<li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
							{% endif %}
							{% if images %}
								{% for image in images %}
									<li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
								{% endfor %}
							{% endif %}
						</ul>
					{% endif %}
					<div class="content">
						<h1>{{ heading_title }}</h1>
						<div class="tab-pane active" id="tab-description">{{ description }}</div>
						{% if review_status %}
							<div class="rating">
								<p>
									{% for i in 1..5 %}
										{% if rating < i %}<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 %} 
									<a href="" onclick="gotoReview(); return false;">{{ reviews }}</a> / <a href="" onclick="gotoReviewWrite(); return false;">{{ text_write }}</a>
								</p>
							</div>
						{% endif %}
						{% if download_status %}
							<div class="blog-info">
								{% if downloads %}
									<br />
									{% for download in downloads %}
										<a href="{{ download.href }}" title=""><i class="fa fa-floppy-o"></i> {{ download.name }} {{ download.size }}</a><br>
									{% endfor %}
									<br />
								{% endif %} 
							</div>
						{% endif %} 
						{% if products %}
							<h3>{{ text_related_product }}</h3>
							<div class="row">
								{% set i = 0 %}
								{% for product in products %}
									{% if column_left and column_right %}
										{% set class = 'col-xs-8 col-sm-6' %}
									{% elseif column_left or column_right %}
										{% set class = 'col-xs-6 col-md-4' %}
									{% else %}
										{% set class = 'col-xs-6 col-sm-3' %}
									{% 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 %}
							{% if articles %}
								<h3>{{ text_related }}</h3>
								<div class="row">
									{% set i = 0 %}
									{% for article in articles %}
										{% if column_left and column_right %}
											{% set class = 'col-xs-8 col-sm-6' %}
										{% elseif column_left or column_right %}
											{% set class = 'col-xs-6 col-md-4' %}
										{% else %}
											{% set class = 'col-xs-6 col-sm-3' %}
										{% endif %}
										<div class="{{ class }}">
											<div class="product-thumb transition">
												<div class="image"><a href="{{ article.href }}"><img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" class="img-responsive" /></a></div>
												<div class="caption">
													<h4><a href="{{ article.href }}">{{ article.name }}</a></h4>
													<p>{{ article.description }}</p>
													{% if article.rating %}
														<div class="rating">
															{% for j in 1..5 %}
																{% if article.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 %}
												</div>
												<div class="button-group">
													<button type="button" onclick="location.href = ('{{ article.href }}');"><span class="hidden-xs hidden-sm hidden-md">{{ button_more }}</span> <i class="fa fa-share"></i></button>
													<button type="button" data-toggle="tooltip" title="{{ article.date_added }}"><i class="fa fa-clock-o"></i></button>
													<button type="button" data-toggle="tooltip" title="{{ text_views }} {{ article.viewed }}"><i class="fa fa-eye"></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 %}
							{% if review_status %}
								<div class="tab-pane" id="tab-review">
									<form class="form-horizontal" id="form-review">
										<div id="review"></div>
										<h2>{{ text_write }}</h2>
										{% if review_guest %}
											<div class="form-group required">
												<div class="col-sm-12">
													<label class="control-label" for="input-name">{{ entry_name }}</label>
													<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
												</div>
											</div>
											<div class="form-group required">
												<div class="col-sm-12">
													<label class="control-label" for="input-review">{{ entry_review }}</label>
													<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
													<div class="help-block">{{ text_note }}</div>
												</div>
											</div>
											<div class="form-group required">
												<div class="col-sm-12">
													<label class="control-label">{{ entry_rating }}</label>
													&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
													<input type="radio" name="rating" value="1" />
													&nbsp;
													<input type="radio" name="rating" value="2" />
													&nbsp;
													<input type="radio" name="rating" value="3" />
													&nbsp;
													<input type="radio" name="rating" value="4" />
													&nbsp;
													<input type="radio" name="rating" value="5" />
													&nbsp;{{ entry_good }}
												</div>
											</div>
											{{ captcha }}
											<div class="buttons clearfix">
												<div class="pull-right">
													{% if text_agree %}
														{% if agree %}
															<input type="checkbox" name="agree" value="1" checked="checked" />
														{% else %}
															<input type="checkbox" name="agree" value="1" />
														{% endif %}
														{{ text_agree }}
													{% endif %}
													&nbsp;
													<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
												</div>
											</div>
										{% else %}
											{{ text_login }}
										{% endif %}
									</form>
								</div>
							{% endif %}
					</div>
				</div>
			</div>
			{{ content_bottom }}
		</div>
		{{ column_right }}
	</div>
</div>
<script>
$('#review').delegate('.pagination a', 'click', function(e) {
    e.preventDefault();

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

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

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

$('#review').load('index.php?route=blog/article/review&article_id={{ article_id }}');

$('#button-review').on('click', function() {
	$.ajax({
		url: 'index.php?route=blog/article/write&article_id={{ article_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-dismissible').remove();

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

			if (json['success']) {
				$('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').prop('checked', false);
			}
		}
	});
});

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled: true
		}
	});
});
</script> 
<script>
$(document).ready(function() {
  $('#description').find('a>img').each(function(){
    $(this).parent().addClass('gallery');
  });
  $('#description').magnificPopup({
    delegate: 'a.gallery',
    type: 'image',
    gallery: {
        enabled: true
    }
  });

  gotoReview = function() {
    offset = $('#form-review').offset();
    $('html, body').animate({ scrollTop: offset.top-20 }, 'slow');
  }
  gotoReviewWrite = function() {
    offset = $('#form-review h2').offset();
    $('html, body').animate({ scrollTop: offset.top-20 }, 'slow');
  }
  
});
</script>
{{ footer }}