{% block title %} {{ title }} {% endblock %}

{% block header %}<h2>{{ title }}</h2>{% endblock %}

{% block content %}
<div class="item-content">
	{% include 'templates/includes/product_search_box.html' %}
	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
		<div class="row">
			<div class="col-md-6">
				{% if slideshow %}
					{% include "templates/includes/slideshow.html" %}
				{% else %}
					{% if website_image %}
					<image itemprop="image" class="item-main-image"
						src="{{ website_image }}" />
					{% else %}
					<div class="img-area">
		{% include 'templates/includes/product_missing_image.html' %}
					</div>
					{% endif %}
				{% endif %}
			</div>
			<div class="col-md-6">
				<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
				<p class="help">Item Code: <span itemprop="productID">{{ name }}</span></p>
				<h4>Product Description</h4>
				<div itemprop="description">
				{{ web_long_description or description or "[No description given]" }}
				</div>
				<div style="min-height: 100px; margin: 10px 0;">
					<div class="item-price-info" style="display: none;">
						<h4 class="item-price" itemprop="price"></h4>
						<div class="item-stock" itemprop="availablity"></div>
						<div id="item-add-to-cart">
							<button class="btn btn-primary">
								<i class="icon-shopping-cart"></i> Add to Cart</button>
						</div>
						<div id="item-update-cart" class="input-group col-md-4" style="display: none;
							padding-left: 0px; padding-right: 0px;">
							<input class="form-control" type="text">
							<div class="input-group-btn">
								<button class="btn btn-primary">
									<i class="icon-ok"></i></button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		{% if doc.get({"doctype":"Item Website Specification"}) -%}
		<div class="row" style="margin-top: 20px">
			<div class="col-md-12">
				<h4>Specifications</h4>
				<table class="table table-bordered" style="width: 100%">
				{% for d in doc.get(
					{"doctype":"Item Website Specification"}) -%}
					<tr>
						<td style="width: 30%;">{{ d.label }}</td>
						<td>{{ d.description }}</td>
					</tr>
				{%- endfor %}
				</table>
			</div>
		</div>
		{%- endif %}
	</div>
</div>
<script>
	{% include "templates/includes/product_page.js" %}

	$(function() {
		if(window.logged_in && getCookie("system_user")==="yes") {
			frappe.has_permission("Item", "{{ name }}", "write", function(r) {
				frappe.require("/assets/frappe/js/frappe/website/editable.js");
				frappe.make_editable($('[itemprop="description"]'), "Item", "{{ name }}", "web_long_description");
			});
		}
	});
</script>
{% endblock %}

{% block sidebar %}{% include "templates/includes/sidebar.html" %}{% endblock %}