{% extends "layout.html" %}
{% load currency_filters %}
{% load history_tags %}
{% load reviews_tags %}
{% load staticfiles %}
{% load product_tags %}
{% load i18n %}

{% block extrastyles %}
	<!-- Colorbox (a lightbox plugin) for image galleries -->
    <link rel="stylesheet" href="{% static "oscar/js/colorbox/colorbox.css" %}" type="text/css" media="screen" charset="utf-8"/>
{% endblock %}

{% block title %}
    {{ product.title }} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
<ul class="breadcrumb">
	<li> 
		<a href="{% url promotions:home %}">{% trans "Home" %}</a>
        <span class="divider">/</span>
    </li>
	{% with category=product.categories.all.0 %}
		{% for c in category.get_ancestors %}
		<li>
			<a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
			<span class="divider">/</span>
		</li>
		{% endfor %}
		<li class="active">{{ product.title }}</li>
    {% endwith %}
</ul>
{% endblock %}

{% block header %}
{% endblock header %}

{% block content %}
<article class="product_page"><!-- Start of product page -->

    {% comment %} 
    This is a but clunky here.  Better to have some kind of JS-driven dashboard menu that 
    pops out when clicked.  A bit like the Django-Debug-Toolbar button
    {% endcomment %}
    {% if user.is_authenticated and user.is_staff %}
        <div class="row-fluid">
            <div class="well">
                <a href="{% url dashboard:catalogue-product product.id %}"><button class="btn btn-success btn-full">{% trans "Edit this product" %}</button></a>
            </div>
        </div>
    {% endif %}

    <div class="row-fluid">

        {% block product_gallery %}
        <div class="span6">
            {% include "catalogue/partials/gallery.html" %}
        </div>
        {% endblock %}

        {% block product_main %}
        <div class="span6">
            <h1>{{ product.get_title }}</h1>
            
            {% block product_stock_record %}
            {% include "catalogue/partials/stock_record.html" %}
            {% endblock %}
            
			{% if product.rating != None %}
            <p class="star {{ product.rating|as_stars }}">
                <small><a href="{% url catalogue:reviews-list product.slug product.id %}">
                        {% blocktrans count reviews|length as num_reviews %}
                        1 custom review
                        {% plural %}
                        {{ num_reviews }} customer reviews
                        {% endblocktrans %}
                </a></small>
                &nbsp;
                <a id="write_review" href="{% url catalogue:reviews-add product.slug product.id %}#addreview" class="btn btn-success btn-small">{% trans "Write a review" %}</a>
            </p>
			{% else %}
				<p class="star">
					<a id="write_review" href="{% url catalogue:reviews-add product.slug product.id %}#addreview" class="btn btn-success btn-small">{% trans "Write a review" %}</a>
				</p>
			{% endif %}
             
            <hr/>

            {% block product_basket_form %}
            {% include "catalogue/partials/add_to_basket_form.html" %}
            {% endblock %}
        </div><!-- /span6 -->
        {% endblock %}

    </div><!-- /row-fluid -->
              
	{% block product_description %}
        {% if product.description %}
        <div id="product_description" class="sub-header">
            <h2>{% trans "Product Description" %}</h2>
        </div>
        <p>{{ product.description|safe }}</p>
        {% endif %}
	{% endblock %}
    
	{% block product_info %}
	<div class="sub-header">
		<h2>{% trans "Product Information" %}</h2>
	</div>
    <table class="table table-striped table-condensed">
		{% if product.upc %}
        <tr>
			<th>{% trans "UPC" %}</th><td>{{ product.upc }}</td>
        </tr>
		{% endif %}
        <tr>
			<th>{% trans "Product class" %}</th><td>{{ product.product_class.name }}</td>
        </tr>
        {% if product.stockrecord %}
        <tr>
			<th>{% trans "Price (excl. tax)" %}</th><td>{{ product.stockrecord.price_incl_tax|currency }}</td>
        </tr>
        <tr>
			<th>{% trans "Price (incl. tax)" %}</th><td>{{ product.stockrecord.price_excl_tax|currency }}</td>
        </tr>
        <tr>
			<th>{% trans "Availability" %}</th>
            <td>{{ product.stockrecord.availability }}</td>
        </tr>
        {% endif %}
        {% for av in product.attribute_values.all %}
        <tr>
            <th>{{ av.attribute.name }}</th>
            <td>{{ av.value }}</td>
        </tr>
        {% endfor %}
        <tr>
			<th>{% trans "Num reviews" %}</th>
            <td>{{ reviews.count|default:0 }}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
	{% endblock %}

    {% block product_review %}
    <section>
        <div id="reviews" class="sub-header">
            {% if reviews %}
                <a href="{% url catalogue:reviews-list product.slug product.id %}" class="btn pull-right">{% trans "See all reviews" %}</a>
            {% endif %}
			<h2>{% trans "Customer Reviews" %}</h2>
        </div>

        {% if not reviews %}
            <p>
                {% trans "This product does not have any reviews yet" %} - 
                <a href="{% url catalogue:reviews-add product.slug product.id %}#addreview">{% trans "be the first to write one" %}</a>.
            </p>
        {% else %}
            <div>
                {% for review in reviews|slice:":3" %}
                    {% include 'catalogue/partials/review.html' %}
                {% endfor %}
            </div>
        {% endif %}
    </section>    
    {% endblock product_review %}
    
    <div class="row-fluid">
        {% if product.related_products.count %}
        <div class="span6">
            <div class="sub-header">
				<h2>{% trans "Related items" %}</h2>
            </div>
            <div class="es-carousel-wrapper">
                <div class="es-carousel">
                    <ul>
                        {% for product in product.related_products.all %}
                        <li>
                            {% render_product product %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        {% if product.recommended_products.count %}
        <div class="span6">
            <div class="sub-header">
				<h2>{% trans "Recommended items" %}</h2>
            </div>
            <div class="es-carousel-wrapper">
                <div class="es-carousel">
                    <ul>
                        {% for product in product.recommended_products.all %}
                        <li>
	                        {% render_product product %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

		{% recently_viewed_products %}

    </div>
</article><!-- End of product page -->
{% endblock content %}

{% block extrascripts %}
{{ block.super }}
<!-- Responsive gallery js -->
<script src="{% static "oscar/js/colorbox/jquery.colorbox-min.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "oscar/js/responsivegallery/jquery.tmpl.min.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "oscar/js/responsivegallery/gallery.js" %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
