{{ header }}
<div id="product-product" class="container-fluid container-lg flex-grow-1 pr-product mobile-no-gutters">
  	<nav aria-label="breadcrumb">
		<ul class="breadcrumb pr-breadcrumb fsz-12">
		{% for breadcrumb in breadcrumbs %}
		{% if loop.last %}
		<li class="breadcrumb-item pr-breadcrumb-item">{{ breadcrumb.text }}</li>
		{% else %}
		<li class="breadcrumb-item pr-breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
		{% endif %}
		{% endfor %}
		</ul>
	</nav>
	<main>
		<div class="row">
			<div class="col-12 pr-page-title pb-3">
				<h1>{{ heading_title }}</h1>
			</div>
		</div>
		<div class="content-top-box">{{ content_top }}</div>
		<div class="row no-gutters">
			{{ column_left }}
		    {% if column_left and column_right %}
                {% set class = 'col-xl-6 is-cols' %}
            {% elseif column_left or column_right %}
                {% set class = 'col-xl-9' %}
            {% else %}
                {% set class = 'col-xl-12 no-col' %}
            {% endif %}
		    <div id="content" class="{{ class }}">
			    <div class="content-block p-3 p-md-4 mobile-no-radius">
					{% 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="tab-pane active" id="tab-description">{{ description }}</div>
					{% if review_status %}
						<div class="pr-module-rating d-flex align-items-center mt-2 mb-1 br-4">
							<div class="pr-module-rating-stars d-flex align-items-center">
								{% for i in 1..5 %}
									{% if rating < i %}
										<span class="pr-module-rating-star"></span>
									{% else %}
										<span class="pr-module-rating-star pr-module-rating-star-is"></span>
									{% endif %}
								{% endfor %}
							</div>
							<div class="pr-module-reviews d-flex align-items-center">
								<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
									<g>
										<path d="M1.88345 11.5383C1.82835 11.5383 1.77318 11.5276 1.72036 11.506C1.5613 11.4401 1.45741 11.2844 1.45741 11.1123V2.5916C1.45741 1.21806 2.21405 0.461426 3.58759 0.461426H10.4042C11.7777 0.461426 12.5343 1.21806 12.5343 2.5916V7.70403C12.5343 9.07757 11.7777 9.83421 10.4042 9.83421H3.76427L2.18508 11.4134C2.10329 11.4952 1.99422 11.5383 1.88345 11.5383ZM3.58759 1.3135C2.69178 1.3135 2.30948 1.69579 2.30948 2.5916V10.0836L3.28651 9.10653C3.3666 9.02644 3.47455 8.98158 3.58759 8.98158H10.4042C11.3 8.98158 11.6823 8.59929 11.6823 7.70347V2.59105C11.6823 1.69524 11.3 1.31294 10.4042 1.31294H3.58759V1.3135ZM9.6941 4.01172C9.6941 3.77655 9.50323 3.58569 9.26806 3.58569H4.72369C4.48851 3.58569 4.29765 3.77655 4.29765 4.01172C4.29765 4.24689 4.48851 4.43776 4.72369 4.43776H9.26806C9.50323 4.43776 9.6941 4.24689 9.6941 4.01172ZM7.98996 6.28391C7.98996 6.04874 7.79909 5.85788 7.56392 5.85788H4.72369C4.48851 5.85788 4.29765 6.04874 4.29765 6.28391C4.29765 6.51908 4.48851 6.70995 4.72369 6.70995H7.56392C7.79909 6.70995 7.98996 6.51908 7.98996 6.28391Z" fill="#9CA3AF"></path>
									</g>
								</svg>
								<span class="blue-link fsz-12 ps-1" onclick="gotoReview(); return false;">{{ reviews }}</span>
							</div>
						</div>
						<div class="rating">
							<hr>
						</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 %}
						<div class="row mt-3 mt-md-0 p-3 p-md-0 g-2 g-md-3 pr-module">
							<div class="pr-module-header fsz-22 dark-text fw-700 text-center text-md-start mt-0 mt-md-2 mb-2">{{ text_related_product }}</div>
							{% for product in products %}
								<div class="pr-module-item pr-module-col" data-product-id="{{ product.product_id }}">
									<div class="content-block h-100 d-flex flex-column">
										<div class="pr-module-img position-relative">
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-fluid" />
											</a>
											<div class="pr-module-btns d-flex flex-column position-absolute">
												<button type="button" aria-label="Wishlist" class="pr-btn pr-btn-outline pr-btn-outline-secondary pr-btn-with-icon br-4 pr-wishlist-btn" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');">
													<span class="pr-btn-icon pr-btn-icon-wishlist"></span>
												</button>
												<button type="button" aria-label="Compare" class="pr-btn pr-btn-outline pr-btn-outline-secondary pr-btn-with-icon br-4 pr-compare-btn" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');">
													<span class="pr-btn-icon pr-btn-icon-compare"></span>
												</button>
											</div>
										</div>
										<div class="pr-module-caption d-flex flex-column justify-content-between py-md-2 h-100">
											<div class="pr-module-info">
												<a href="{{ product.href }}" class="pr-module-title dark-text fw-700">{{ product.name }}</a>
												{% if product.rating is not same as(false) %}
													<div class="pr-module-rating d-flex align-items-center mt-2 mb-1 br-4">
														<div class="pr-module-rating-stars d-flex align-items-center">
															{% for i in 1..5 %}
																{% if product.rating < i %}
																	<span class="pr-module-rating-star"></span>
																{% else %}
																	<span class="pr-module-rating-star pr-module-rating-star-is"></span>
																{% endif %}
															{% endfor %}
														</div>
													</div>
												{% endif %}
											</div>
											{% if product.price %}
											<div class="pr-module-price-box py-2 mt-auto">
												{% if product.tax %}
													<div class="price-tax fw-300 fsz-12 light-text">
														{{ text_tax }} {{ product.tax }}
													</div>
												{% endif %}
												{% if not product.special %}
													<span class="pr-module-price fw-800 dark-text mt-1">{{ product.price }}</span>
												{% else %}
													<span class="pr-module-price-old light-text fsz-14">{{ product.price }}</span>
													<span class="pr-module-price fw-800 dark-text mt-1">{{ product.special }}</span>
												{% endif %}
											</div>
											{% endif %}
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					{% endif %}
					{% if articles %}
						<div class="row mt-3 mt-md-0 p-3 p-md-0 g-2 g-md-3 pr-module">
							<div class="pr-module-header fsz-22 dark-text fw-700 text-center text-md-start mt-0 mt-md-2 mb-2">{{ text_related }}</div>
							{% for article in articles %}
								<div class="pr-module-item pr-module-col">
									<div class="content-block h-100 d-flex flex-column p-3 overflow-hidden">
										<div class="pr-module-img">
											<a href="{{ article.href }}">
												<img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" class="img-responsive" />
											</a>
										</div>
										<div class="rm-module-title flex-grow-1">
											<a class="pr-last-news-title fw-700 fsz-14 dark-text" href="{{ article.href }}">{{ article.name }}</a>
										</div>
										{% if article.rating %}
										<div class="pr-module-rating d-flex align-items-center justify-content-start">
											<div class="pr-module-rating-stars d-flex align-items-center">
												{% for i in 1..5 %}
													{% if product.rating < i %}
														<span class="pr-module-rating-star"></span>
													{% else %}
														<span class="pr-module-rating-star pr-module-rating-star-is"></span>
													{% endif %}
												{% endfor %}
											</div>
										</div>
										{% endif %}
										<div class="fsz-14 dark-text my-4">{{ article.description }}</div>
										<button class="button button-primary br-7 mt-auto" type="button" onclick="location.href = ('{{ article.href }}');"><i class="fas fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_more }}</span></button>
									</div>
								</div>
							{% endfor %}
						</div>
					{% endif %}
					{% if review_status %}
						<div class="tab-pane" id="tab-review">
							<form class="form-horizontal" id="form-review">
								<div id="review"></div>
								<div class="pr-module-header fsz-22 dark-text fw-700 text-center text-md-start mt-0 mt-md-2 mb-2">{{ text_write }}</div>
								{% if review_guest %}
									<div class="form-group mb-4">
										<div>
											<label class="dark-text fsz-14 fw-500 mb-1" for="input-name"><span class="required">*</span> {{ entry_name }}</label>
											<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
										</div>
									</div>
									<div class="form-group mb-4">
										<div>
											<label class="dark-text fsz-14 fw-500 mb-1" for="input-review"><span class="required">*</span> {{ entry_review }}</label>
											<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
											<div class="help-block fsz-12 light-text mt-2">{{ text_note }}</div>
										</div>
									</div>
									<div class="form-group mb-4">
										<label class="dark-text fsz-14 fw-500 mb-1"><span class="required">*</span> {{ entry_rating }}</label>
										<div class="form-check d-flex align-items-center mb-0 ps-0 dark-text fsz-14">
											{{ 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 }}
									<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="button button-primary br-7">{{ button_continue }}</button>
								{% else %}
									{{ text_login }}
								{% endif %}
							</form>
						</div>
					{% endif %}
			</div>
	    	{{ column_right }}
		</div>
		{{ content_bottom }}
	</main>
</div>

<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=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']) {
				prNotify('danger', json['error']);
			}

			if (json['success']) {
				prNotify('success', json['success']);

				$('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 type="text/javascript"><!--
$(document).ready(function() {

  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 }} 
