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

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

{% block header_actions %}
{% include 'templates/includes/product_search_box.html' %}
{% endblock %}

{% block 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="col-sm-5">
				{% if slideshow %}
					{% include "templates/includes/slideshow.html" %}
				{% else %}
					{{ product_image(website_image, "product-full-image") }}
				{% endif %}
			</div>
			<div class="col-sm-7">
				<!-- <h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3> -->
				<div itemprop="description">
				{{ web_long_description or description or _("No description given") }}
				</div>
				<p class="text-muted">
					{{ _("Item Code") }}: <span itemprop="productID">{{ name }}</span></p>
				<br>
				<div class="item-attribute-selectors">
                    {% if has_variants %}
                    {% for d in attributes %}
                    <div class="item-view-attribute"
                            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 {%- endif %}>
							{{ _(value) }}
						</option>
                        {% endfor %}
                        </select>
                    </div>
                    {% endfor %}
                    {% endif %}
				</div>
				<br>
				<div style="min-height: 100px; margin: 10px 0;">
					<h4 class="item-price" itemprop="price"></h4>
					<div class="item-stock" itemprop="availablity"></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;
    						padding-left: 0px; padding-right: 0px;
                            padding-top: 10px;">
    						<div>
                                <input class="form-control"
                                    type="text" style="max-width: 140px;">
                            </div>
    						<div style="margin-top: 10px;">
    							<button class="btn btn-default btn-sm">
                                {{ _("Update") }}</button>
    						</div>
                            <div style="margin-top: 5px;">
                                <a href="/cart" class="text-muted small">
                                    {{ _("View Cart") }}</a>
                            </div>
    					</div>
                    </div>
				</div>
			</div>
		</div>
		{% if website_specifications -%}
		<div class="row item-website-specification" style="margin-top: 20px">
			<div class="col-md-12">
				<h4>{{ _("Specifications") }}</h4>

				<table class="table table-bordered" style="width: 100%">
				{% for d in website_specifications -%}
					<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" %}

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