{% extends "templates/web.html" %}

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

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

{% block page_content %}
{% from "erpnext/templates/includes/macros.html" import product_image %}
<div class="item-content" style="margin-top:20px;">
	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
		<div class="row">
			<div class="col-sm-6">
				{% if slideshow %}
					{% include "templates/includes/slideshow.html" %}
				{% else %}
					{{ product_image(website_image, "product-full-image") }}
				{% endif %}
			</div>
			<div class="col-sm-6" style="padding-left:20px;">
				 <h2 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h2>

				<p class="text-muted">
					{{ _("Item Code") }}: <span itemprop="productID">{{ variant and variant.name or name }}</span></p>
				<br>
				<div class="item-attribute-selectors">
					{% if has_variants %}
					{% for d in attributes %}
					{% if attribute_values[d.attribute] -%}
					<div class="item-view-attribute {% if (attribute_values[d.attribute] | len)==1 -%} hidden {%- endif %}"
							style="margin-bottom: 10px;">
						<h6 class="text-muted">{{ _(d.attribute) }}</h6>
						<select class="form-control"
							style="max-width: 140px"
							data-attribute="{{ d.attribute }}">
						{% for value in attribute_values[d.attribute] %}
						<option value="{{ value }}"
						{% if selected_attributes and selected_attributes[d.attribute]==value -%}
							selected
						{%- elif disabled_attributes and value in disabled_attributes.get(d.attribute, []) -%}
							disabled
						{%- endif %}>
							{{ _(value) }}
						</option>
						{% endfor %}
						</select>
					</div>
					{%- endif %}
					{% endfor %}
					{% endif %}
				</div>
				<br>
				<div style="min-height: 100px; margin: 10px 0;">
					<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
						<h4 class="item-price" itemprop="price"></h4>
						<div class="item-stock" itemprop="availability"></div>
					</div>
					<div class="item-cart hide">
						<div id="item-add-to-cart">
							<button class="btn btn-primary btn-sm">
								{{ _("Add to Cart") }}</button>
						</div>
						<div id="item-update-cart" style="display: none;">
							<a href="/cart" class='btn btn-sm btn-default'>
								<i class='octicon octicon-check'></i>
								{{ _("View in Cart") }}</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row item-website-description" style="margin-top:30px; margin-bottom:20px">
			<div class="col-md-12">
		<div class="h6 text-uppercase">{{ _("Description") }}</div>
		<div itemprop="description" class="item-desc">
		{{ web_long_description or description or _("No description given") }}
		</div>
		</div>
		</div>

		{% if website_specifications -%}
		<div class="row item-website-specification" style="margin-top: 40px">
			<div class="col-md-12">
				<div class="h6 text-uppercase">{{ _("Specifications") }}</div>

				<table class="table borderless" style="width: 100%">
				{% for d in website_specifications -%}
					<tr>
						<td class="uppercase text-muted" 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" %}

	{% if variant_info %}
	window.variant_info = {{ variant_info }};
	{% else %}
	window.variant_info = null;
	{% endif %}
</script>
{% endblock %}