{% extends "shop/base.html" %}
{% load mezzanine_tags shop_tags rating_tags i18n %}

{% block meta_title %}{{ product.meta_title }}{% endblock %}

{% block meta_keywords %}{% metablock %}
{% for keyword in product.keywords.all %}
    {% if not forloop.first %}, {% endif %}
    {{ keyword }}
{% endfor %}
{% endmetablock %}{% endblock %}

{% block meta_description %}{% metablock %}
{{ product.description }}
{% endmetablock %}{% endblock %}

{% block extra_head %}
{{ block.super }}
<script src="{{ STATIC_URL }}mezzanine/js/jquery.tools.toolbox.expose.js"></script>
<script src="{{ STATIC_URL }}mezzanine/js/jquery.tools.overlay.js"></script>
<script>var variations = {{ variations_json|safe }};</script>
<script src="{{ STATIC_URL }}cartridge/js/product_variations.js"></script>
{% endblock %}

{% block breadcrumb_menu %}
{{ block.super }}
<li>{{ product.title }}</li>
{% endblock %}

{% block title %}
{% editable product.title %}{{ product.title }}{% endeditable %}
{% endblock %}

{% block main %}

{% if images %}
{% spaceless %}
<ul id="product-images-large" class="thumbnails">
    {% for image in images %}
    <li id="image-{{ image.id }}-large"{% if not forloop.first %}style="display:none;"{% endif %}>
    	<a class="product-image-large thumbnail" rel="#image-full-{{ image.id }}" href="{{ MEDIA_URL }}{{ image.file }}">
            <img alt="{{ image.description }}" src="{{ MEDIA_URL }}{% thumbnail image.file 0 300 %}">
        </a>
        <div class="product-image-full" style="display:none;" id="image-full-{{ image.id }}">
            <img src="{{ MEDIA_URL }}{{ image.file }}">
        </div>
    </li>
    {% endfor %}
</ul>

{% if images|length != 1 %}
<ul id="product-images-thumb" class="thumbnails">
	{% for image in images %}
	<li>
        <a class="thumbnail" id="image-{{ image.id }}" href="{{ MEDIA_URL }}{{ image.file }}">
            <img alt="{{ image.description }}" src="{{ MEDIA_URL }}{% thumbnail image.file 75 75 %}">
        </a>
    </li>
	{% endfor %}
</ul>
{% endif %}

{% endspaceless %}
{% endif %}

{% editable product.content %}
{{ product.content|safe }}
{% endeditable %}

{% if product.available and has_available_variations %}
<ul id="variations" class="unstyled">
	{% for variation in variations %}
	<li id="variation-{{ variation.sku }}"
		{% if not variation.default %}style="display:none;"{% endif %}>
		{% if variation.has_price %}
			{% if variation.on_sale %}
				<span class="old-price">{{ variation.unit_price|currency }}</span>
				{% trans "On sale:" %}
			{% endif %}
			<span class="price">{{ variation.price|currency }}</span>
		{% else %}
		    {% if has_available_variations %}
		    {% trans "The selected options are currently unavailable." %}
		    {% endif %}
		{% endif %}
	</li>
	{% endfor %}
</ul>
<form method="post" id="add-cart" class="form-horizontal form-shop">
    {% csrf_token %}
    {% fields_for add_product_form %}
    <div class="form-actions clearfix">
        <div class="form-actions-wrap">
        <input type="submit" class="btn btn-primary btn-large" name="add_cart" value="{% trans "Buy" %}">
        <input type="submit" class="btn btn-large" name="add_wishlist" value="{% trans "Save for later" %}">
        </div>
    </div>
</form>
{% else %}
<p>{% trans "This product is currently unavailable." %}</p>
{% endif %}

{% if settings.SHOP_USE_RATINGS %}
{% rating_for product %}
{% endif %}

{% if related_products %}
<h2>{% trans "Related Products" %}</h2>
<ul id="related-products" class="thumbnails">
    {% for product in related_products %}
    <li>
        <a class="thumbnail" href="{{ product.get_absolute_url }}">
            {% if product.image %}
            <img src="{{ MEDIA_URL }}{% thumbnail product.image 90 90 %}">
            {% endif %}
            <h6>{{ product }}</h6>
            {% if product.has_price %}
                {% if product.on_sale %}
                <span class="old-price">{{ product.unit_price|currency }}</span>
                {% endif %}
                <span class="price">{{ product.price|currency }}</span>
            {% endif %}
        </a>
    </li>
    {% endfor %}
</ul>
{% endif %}

{% endblock %}
