{{HEAD}}
<div class="container">
	{{HEADER}}
	[[Shop?&get=`breadcrumbs`&id=`[(shop_catalog_root)]`]]
	<div class="page_item">
		<div class="row">
			<div class="page_item_image col-md-4">
				<a href="[[R?&img=`/assets/images/items/[*product_id*]/[*product_cover*]`&folder=`item/[*product_id*]`&opt=`h=700&far=1&fltr=wmt|[(site_name)]|25|BR|ffffff|fonts/5102337.ttf|100||0|000000|50|`]]">
					<img src="[[R?&img=`/assets/images/items/[*product_id*]/[*product_cover*]`&folder=`item/[*product_id*]`&opt=`w=360&h=320&far=1`]]" alt="[*product_name*]">
				</a>
				<ul class="product_images">
					[[Shop?&get=`item_images`&tpl=`tpl_item_image`]]	
				</ul>			
			</div>
			<div class="page_item_desc col-md-6">
				<h1>[*product_name*]</h1>
				
				<div class="page_item_intro">[*product_introtext*]</div>
				<span class="text-success page_item_desc_price">[*product_price*] [(currency)]</span>
				<a href="?buy=[*product_id*]" class="btn btn-lg btn-success" data-buy="[*product_id*]"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a>
				<br><br>
				<pre>Social buttons here</pre>
			</div>
		</div>
		<div class="col-md-12">
			<ul class="nav nav-tabs" id="productTab">
				<li><a href="#desc" data-toggle="tab">Description</a></li>
				<li><a href="#spec" data-toggle="tab">Technical details</a></li>
				<li><a href="#messages" data-toggle="tab">Recalls</a></li>
				<li><a href="#friends" data-toggle="tab">Recommend products</a></li>
				<li><a href="#history" data-toggle="tab">Viewed products</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane fade" id="desc">
					[*product_description*]
				</div>
				<div class="tab-pane fade" id="spec">
					<table class="table table-bordered">
						[[Shop?&get=`item_spec`&tpl=`tpl_item_spec`]]
					</table>
				</div>
				<div class="tab-pane fade" id="messages">
					[[Shop?&get=`item_recalls`&tpl=`tpl_recall`]]
					<form action="" method="post">
						<div class="row">
							<div class="col-md-6">
								<input type="text" name="recall[name]" class="form-control col-md-6" value="[*u_fullname*]" placeholder="Name" required>
							</div>
							<div class="col-md-6">
								<input type="text" name="recall[email]" class="form-control col-md-6" value="[*u_email*]" placeholder="Email" required>
							</div>
							<br><br>
							<div class="col-md-12">
								<textarea name="recall[text]" placeholder="Your recall about [*product_name*]" class="form-control" required></textarea>
								<input type="hidden" name="recall[product]" value="[*product_id*]">
								<br>
								<button class="submit btn btn-primary"><span class="glyphicon glyphicon-comment"></span> Send recall</button>
							</div>
						</div>
					</form>
				</div>
				<div class="tab-pane fade" id="friends">
					<div class="col-md-9 catalog js_catalog">
						[[Shop?&get=`friends_product`&tpl=`tpl_catalog`&friends=`[*product_friends*]`]]
					</div>
				</div>
				<div class="tab-pane fade" id="history">
					<div class="col-md-9 catalog js_catalog">
						[[Shop?&get=`friends_product`&tpl=`tpl_catalog`&friends=`[*history*]`]]
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="/assets/site/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/assets/site/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<script>
	$(document).ready(function(){
		$('#productTab a').click(function (e) {
			e.preventDefault()
			$(this).tab('show');
		})
		if (window.location.hash != "")
			$("[href='"+window.location.hash+"']").trigger("click");
		else 
			$("#productTab a:first").trigger("click");
		
		$(".page_item_image a:has(img)").on("click", function (){
			var idx = $(".product_images [href='"+$(this).attr("href")+"']").parents("li").index();
			$.fancybox([
				[[Shop?&get=`item_images`&tpl=`tpl_item_image_fb`]]	
			], {type    : 'image',
				cyclic  : 'true', 
				index   : idx == -1 ? 0 : idx});
			return false;
		});
	});
</script>
{{FOOTER}}