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

{% load history_tags %}
{% load currency_filters %}
{% load reviews_tags %}
{% load staticfiles %}
{% load product_tags %}
{% load display_tags %}
{% load i18n %}
{% load purchase_info_tags %}

{% block content %}

<article class="product_page"><!-- Start of product page -->

    <div class="row">

        {% block product_gallery %}
        <div class="col-sm-6">
            {% include "catalogue/partials/gallery.html" %}
        </div>
        {% 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 prepend_product_basket_form %}{% endblock %}
                {% block basket_form %}{% include "catalogue/partials/add_to_basket_form.html" %}{% endblock %}
                {% block append_product_basket_form %}{% endblock %}
            {% endblock %}
        </div><!-- /col-sm-6 -->
        {% endblock %}

    </div><!-- /row -->

    {% 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">
        {% block product_info_rows %}

        {% block product_default_info %}
            {% if product.upc %}
            <tr>
                <th>{% trans "UPC" %}</th><td>{{ product.upc }}</td>
            </tr>
            {% endif %}
            <tr>
                <th>{% trans "Product Type" %}</th><td>{{ product.get_product_class.name }}</td>
            </tr>
        {% endblock %}

        {% purchase_info_for_product request product as session %}

        {% block product_price_info %}
            {% if session.price.exists %}
                <tr>
                    <th>{% trans "Price (excl. tax)" %}</th><td>{{ session.price.excl_tax|currency:session.price.currency }}</td>
                </tr>
                {% if session.price.is_tax_known %}
                    <tr>
                        <th>{% trans "Price (incl. tax)" %}</th><td>{{ session.price.incl_tax|currency:session.price.currency }}</td>
                    </tr>
                    <tr>
                        <th>{% trans "Tax" %} {% trans product.vat_rate %} ({% widthratio product.tax_percentage 1 100 %}%)</th><td>{{ session.price.tax|currency:session.price.currency }}</td>
                    </tr>
                {% endif %}
            {% endif %}
        {% endblock %}

        {% block product_availability_info %}
            <tr>
                <th>{% trans "Availability" %}</th>
                <td>{{ session.availability.message }}</td>
            </tr>
        {% endblock %}

        {% block product_attributes_info %}
            {% for av in product.get_attribute_values %}
                <tr>
                    <th>{{ av.attribute.name }}</th>
                    <td>{{ av.value_as_html }}</td>
                </tr>
            {% endfor %}
        {% endblock %}

        {% block product_reviews_info %}
            {% iffeature "reviews" %}
                <tr>
                    <th>{% trans "Number of reviews" %}</th>
                    <td>{{ product.num_approved_reviews }}</td>
                </tr>
            {% endiffeature %}
        {% endblock %}
        {% endblock %}
    </table>
    {% endblock %}

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

            {% if product.num_approved_reviews == 0 %}
                <p>
                    {% if product|is_review_permitted:user %}
                        {% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id as add_review_url %}
                            {% blocktrans %}This product does not have any reviews yet -
                            <a href="{{ add_review_url }}#addreview">be the first to write one</a>.
                        {% endblocktrans %}
                    {% else %}
                        {% trans "This product does not have any reviews yet" %}.
                    {% endif %}
                </p>
            {% else %}
                <ol class="list-unstyled review-list">
                    {% for review in product.reviews.approved.all|slice:":3" %}
                        <li>
                        {% include 'catalogue/partials/review.html' %}
                        </li>
                    {% endfor %}
                </ol>
            {% endif %}
        </section>
        {% endblock product_review %}
    {% endiffeature %}

    {% block recommended %}
    {% with recommended_products=product.sorted_recommended_products|slice:":6" %}
        {% if recommended_products %}
            <div class="sub-header">
                <h2>{% trans "Recommended items" %}</h2>
            </div>
            <ul class="row">
                {% for product in recommended_products %}
                <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
                    {% render_product product %}
                </li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    {% endblock recommended %}

    {% recently_viewed_products current_product=product %}

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