{% extends "oscar/catalogue/detail.html" %}

{% load i18n currency_filters display_tags purchase_info_tags %}

{% block product_info %}
<div class="sub-header">
    <h2>{% trans "Product Information" %}</h2>
</div>

<ul class="list-group list-unstyled">
    {% if product.upc %}
    <li class="list-group-item">
        <strong>{% trans "UPC" %}</strong>
        <span class="pull-right">{{ product.upc }}</span>
    </li>
    {% endif %}
    {% purchase_info_for_product request product as session %}
    {% if session.price.exists %}
        <li class="list-group-item">
            <strong>{% trans "Price (excl. tax)" %}</strong>
            <span class="pull-right">{{ session.price.excl_tax|currency:session.price.currency }}</span>
        </li>
        {% if session.price.is_tax_known %}
            <li class="list-group-item">
                <strong>{% trans "Price (incl. tax)" %}</strong>
                <span class="pull-right">{{ session.price.incl_tax|currency:session.price.currency }}</span>
            </li>
            <li class="list-group-item">
                <strong>{% trans "Tax" %} {% trans product.vat_rate %} ({% widthratio product.tax_percentage 1 100 %}%)</strong>
                <span class="pull-right">{{ session.price.tax|currency:session.price.currency }}</span>
            </li>
        {% endif %}
    {% endif %}
    {% for av in product.attribute_values.all %}
        <li class="list-group-item clearfix">
            <strong>{{ av.attribute.name }}</strong>
            <span class="pull-right">{{ av.value_as_html }}</span>
        </li>
    {% endfor %}
    {% iffeature "reviews" %}
        <li class="list-group-item">
            <strong>{% trans "Number of reviews" %}</strong>
            <span class="pull-right">{{ product.num_approved_reviews }}</span>
        </li>
    {% endiffeature %}
</ul>
{% endblock %}

{% block product_main %}
<div class="col-sm-6 product_main">
    {% 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_staff %}
        <a class="pull-right hidden-xs" href="{% url 'dashboard:catalogue-product' pk=product.id %}"><small><i class="icon-edit"></i> {% trans "Edit this product" %}</small></a>
    {% endif %}
    <h1>{{ product.get_title }}</h1>

    {% block product_stock_record %}
        {% include "catalogue/partials/stock_record.html" with verbose=1 %}
    {% endblock %}

    {% iffeature "reviews" %}
        {% include "catalogue/reviews/partials/review_stars.html" %}
    {% endiffeature %}

    <hr/>

    {% block product_basket_form %}
    {{ block.super }}
    {% endblock %}
</div><!-- /col-sm-6 -->
{% endblock %}