{% extends "oscar/layout.html" %}
{% load history_tags %}
{% load currency_filters %}
{% load reviews_tags %}
{% load product_tags %}
{% load display_tags %}
{% load i18n %}
{% load purchase_info_tags %}
{% block title %}{{ product.get_meta_title }} | {{ block.super }}{% endblock %}
{% block description %}{{ product.get_meta_description }}{% endblock %}
{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
            </li>
            {% with category=product.get_categories.first %}
            {% for c in category.get_ancestors_and_self %}
                <li class="breadcrumb-item">
                    <a href="{{ c.get_absolute_url }}">
                        {{ c.name }}
                    </a>
                </li>
            {% endfor %}
            <li class="breadcrumb-item active" aria-current="page">
                {{ product.get_title }}
            </li>
            {% get_back_button as backbutton %}
            {% if backbutton %}
                <li class="float-right">
                    <a href="{{ backbutton.url }}">
                        <i class="fas fa-arrow-left"></i>
                        {{ backbutton.title }}
                    </a>
                </li>
            {% endif %}
        {% endwith %}
    </ol>
</nav>
{% endblock %}
{% block header %}{% endblock header %}
{% block content %}
    <article class="product_page">
        <!-- Start of product page -->
        <div class="row">
            {% block product_gallery %}
                <div class="col-sm-6">
                    {% include "oscar/catalogue/partials/gallery.html" %}
                </div>
            {% endblock %}
            {% block product_main %}
                <div class="col-sm-6 product_main">
                    {% comment %}
                    This is a bit 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="float-right d-none d-md-block"
                       href="{% url 'dashboard:catalogue-product' pk=product.id %}">
                        <small>
                        <i class="fas fa-pencil-alt"></i>
                        {% trans "Edit this product" %}
                        </small>
                    </a>
                {% endif %}
                <h1>{{ product.get_title }}</h1>
                {% block product_stock_record %}
                    {% include "oscar/catalogue/partials/stock_record.html" with verbose=1 %}{% endblock %}
                    {% iffeature "reviews" %}
                        {% include "oscar/catalogue/reviews/partials/review_stars.html" %}{% endiffeature %}
                        <hr/>
                        {% if not product.is_parent %}
                            {% block product_basket_form %}
                                {% include "oscar/catalogue/partials/add_to_basket_form.html" %}{% endblock %}
                            {% else %}
                                {% block variants %}
                                    <h2>{% trans 'Variants:' %}</h2>
                                    {% for child in product.children.public %}
                                        {% purchase_info_for_product request child as child_session %}
                                        {% if child_session.availability.is_available_to_buy %}
                                            <a href="{{ child.get_absolute_url }}">
                                                {{ child.get_title }}
                                            </a>
                                            <br>
                                        {% endif %}
                                    {% endfor %}
                                {% endblock %}
                            {% endif %}
                        </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">
                        {% 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>
                        {% purchase_info_for_product request product as session %}
                        {% 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" %}
                                    </th>
                                    <td>
                                        {{ session.price.tax|currency:session.price.currency }}
                                    </td>
                                </tr>
                            {% endif %}
                            <tr>
                                <th>
                                    {% trans "Availability" %}
                                </th>
                                <td>
                                    {{ session.availability.message }}
                                </td>
                            </tr>
                        {% endif %}
                        {% for av in product.get_attribute_values %}
                            <tr>
                                <th>
                                    {{ av.attribute.name }}
                                </th>
                                <td>
                                    {{ av.value_as_html }}
                                </td>
                            </tr>
                        {% endfor %}
                        {% iffeature "reviews" %}
                            <tr>
                                <th>
                                    {% trans "Number of reviews" %}
                                </th>
                                <td>
                                    {{ product.num_approved_reviews }}
                                </td>
                            </tr>
                        {% endiffeature %}
                    </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 float-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 'oscar/catalogue/partials/review.html' %}
                                        </li>
                                    {% endfor %}
                                </ol>
                            {% endif %}
                        </section>
                    {% endblock product_review %}
                {% endiffeature %}
                {% 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 list-unstyled mx-0">
                        {% for product in recommended_products %}
                            <li class="col-sm-4 col-md-3 col-lg-3">
                                {% render_product product %}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endwith %}
            {% recently_viewed_products current_product=product %}
        </article>
        <!-- End of product page -->
    {% endblock content %}
    {% block extrascripts %}{{ block.super }}{% endblock %}
