{% 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">
	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
		<div class="row">
			<div class="row">
				{% if slideshow %}
				{% set slideshow_items = frappe.get_list(doctype="Website Slideshow Item",  fields=["image"], filters={ "parent": doc.slideshow }) %}
				<div class="col-md-1">
				{%- for slideshow_item in slideshow_items -%}
					{% set image_src = slideshow_item['image'] %}
					{% if image_src %}
					<div class="item-alternative-image border">
						<img src="{{ image_src }}" height="50" weight="50" />
					</div>
					{% endif %}
				{% endfor %}
				</div>
				<div class="col-md-5">
					<div class="item-image">
						{% set first_image = slideshow_items[0]['image'] %}
						{{ product_image(first_image, "product-full-image") }}
					</div>
				</div>
				{% else %}
				<div class="col-md-6">
					{{ product_image(website_image, "product-full-image") }}
				</div>
				{% endif %}
				<div class="col-sm-6">
					<h2 itemprop="name">{{ 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 and attributes %}

						{% 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>
						<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
							<h4 class="item-price hide" itemprop="price"></h4>
							<div class="item-stock hide" itemprop="availability"></div>
						</div>
						<div class="item-cart hide">
							<div id="item-spinner">
								<span style="display: inline-block">
									<div class="input-group number-spinner">
										<span class="input-group-btn">
											<button class="btn btn-default cart-btn" data-dir="dwn">
												–</button>
										</span>
										<input class="form-control text-right cart-qty" value="1">
										<span class="input-group-btn">
											<button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
											+</button>
										</span>
									</div>
								</span>
							</div>
							<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 margin-top">
				<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 margin-top">
				<div class="col-md-12">
					<div class="h6 text-uppercase">{{ _("Specifications") }}</div>

					<table class="table">
					{% for d in website_specifications -%}
						<tr>
							<td class="text-muted" style="width: 30%;">{{ d.label }}</td>
							<td>{{ d.description }}</td>
						</tr>
					{%- endfor %}
					</table>
				</div>
			</div>
			{%- endif %}
		</div>
	</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 %}