{% extends "oscar/catalogue/detail.html" %}
{% load history_tags currency_filters reviews_tags staticfiles product_tags display_tags i18n purchase_info_tags ocyanjson wagtailcore_tags wishlist_tags l10n %}

{% block extrascripts %}
{{ block.super }}
<script src="{% static 'template9/js/lightbox.min.js' %}"></script>
{% endblock %}

{% block imports %}
    {{block.super}}
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/product.scss' %}">
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/product-detail.scss' %}">
    <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/recommended-carousel.scss' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'template9/css/lightbox.css' %}">
{% endblock %}

{% block header_title %}
    {{product.get_title}}
{% endblock %}

{% block header_breadcrumbs %}
<ul class="breadcrumb my-3 bg-light">
    <li class="breadcrumb-item">
        <a href="{% url 'wagtail_serve' '' %}">{% trans "Home" %}</a>
    </li>
    {% with category=product.primary_category %}
        {% 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">{{ product.get_title|truncatechars:40 }}</li>

    {% endwith %}

</ul>
{% endblock %}

{% block content %}
{% purchase_info_for_product request product as session %}

<article class="product_page"><!-- Start of product page -->
    <div class="row mb-4">
        {% get_back_button as backbutton %}
        {% if backbutton %}
        <div class="col-lg-12 mb-3">
            <a href="{{ backbutton.url }}" class="btn btn-primary">
                <small><i class="fa fa-arrow-left"></i></small> {{ backbutton.title }}
            </a>
        </div>
        {% endif %}
        {% block product_gallery %}
        <div class="{{ product.is_parent|yesno:'col-lg-5,col-lg-7' }} col-md-6">
            {% include "catalogue/partials/gallery.html" %}
        </div>
        {% endblock %}

        {% block product_main %}
        <div class="{{ product.is_parent|yesno:'col-lg-7,col-lg-5' }} col-md-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="d-block hidden-xs" href="{% url 'dashboard:catalogue-product' pk=product.id %}"><small><i class="fa fa-pencil"></i> {% trans "Edit this product" %}</small></a>
            {% endif %}

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

                {% purchase_info_for_product request product as session %}

                {% if session.availability.is_available_to_buy %}
                    {% if session.stockrecord.is_below_threshold %}
                    <div class="mt-3 text-black alert-warning p-2">
                        <span class="availability_short">
                            <small><i class="fa fa-info mr-1 text-warning"></i> {{session.availability.message}}</small>
                        </span>
                    </div>
                    {% else %}
                    <div class="mt-3 text-black alert-success p-2">
                        <span class="availability_short">
                            <small>
                                <i class="fa fa-check mr-1"></i> {{session.availability.message}}
                            </small>
                        </span>
                    </div>
                    {% endif %}
                {% else %}
                    <div class="mt-3 text-black alert-danger p-2">
                        <span class="availability_short">
                            <small>
                                <i class="fa fa-times mr-1"></i> {{session.availability.message}}
                            </small>
                        </span>
                    </div>
                {% endif %}

                {% iffeature "reviews" %}
                <div class="star-rating detail-stars my-2 {% if product.rating != None %}{{ product.rating|as_stars }}{% else %}none{% endif %}" data-star="{{ product.rating|unlocalize }}">
                    <div class="star-wrapper">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <span class="review_count muted"><small>({{product.num_approved_reviews}})</small></span>
                </div>
                {% endiffeature %}
            {% endblock product_stock_record %}

            {% block product_description %}
            {% if product.description %}
            <div class="mt-4 clearfix">
                {{ product.description|richtext }}
            </div>
            {% endif %}
            {% endblock product_description %}

            {% block product_basket_form %}
            <div class="mt-4">
                {{ block.super }}
            </div>
            {% endblock %}

            {% block product_basket_form_children %}
            {{ block.super }}
            {% endblock product_basket_form_children %}

        </div><!-- /product_main -->
        {% endblock product_main %}
    </div><!-- /row -->

    {% ocyanjson "oscar" "enable_long_description" False as enable_long_description %}

    <div class="row m-0 mt-5 info-tab-wrapper">
        {% block info_tab_wrapper %}
        <ul class="nav nav-tabs w-100" id="myTab" role="tablist">
            {% block tab_navigation %}
            {% if enable_long_description and product.long_description %}
            <li class="nav-item">
                <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{% trans "Description" %}</a>
            </li>
            {% endif %}
            <li class="nav-item">
                <a class="nav-link {% if not product.description and not product.long_description %}active{% endif %}" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">{% trans "Product Information" %}</a>
            </li>
            {% for attribute_group in attributes.grouped %}
            <li class="nav-item">
                <a class="nav-link" id="attribute_group_{{ attribute_group.name|slugify }}-tab" data-toggle="tab" href="#attribute_group_{{ attribute_group.name|slugify }}" role="tab" aria-controls="attribute_group_{{ attribute_group.name }}" aria-selected="false">{{ attribute_group.name }}</a>
            </li>
            {% endfor %}
            {% iffeature "reviews" %}
            <li class="nav-item">
                <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">{% trans "Customer Reviews" %}</a>
            </li>
            {% endiffeature %}
            {% if labels %}
                <li class="nav-item">
                    <a class="nav-link" id="labels-tab" data-toggle="tab" href="#labels" role="tab" aria-controls="labels" aria-selected="false">{% trans "Labels" %}</a>
                </li>
            {% endif %}
            {% endblock tab_navigation %}
        </ul>

        <div class="tab-content pt-4 w-100" id="addreview">
            {% block tab_content %}
            {% block tab_description %}
            {% if enable_long_description and product.long_description %}
            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                <div id="product_description">
                    <div class="accordion-body py-2">
                        <section class="product-long_description clearfix">
                            {{ product.long_description|richtext }}
                        </section>
                    </div>
                </div>
            </div>
            {% endif %}
            {% endblock tab_description %}

            {% with long_description=product.long_description %}
            {% block tab_info %}
            <div class="tab-pane fade {% if not enable_long_description or not long_description %}show active{% endif %}" id="info" role="tabpanel" aria-labelledby="info-tab">
                <table class="table no-border table-pl-0 table-smaller mb-0">
                    {% block product_default_info %}
                        {{block.super}}
                        <tr>
                            <th>{% trans "Categories" %}</th>
                            <td>
                                {% for category in product.get_categories.all %}
                                    <a href="{{ category.get_absolute_url }}" >{{ category.name }}</a>{% if not forloop.last %},{% endif %}
                                {% endfor %}
                            </td>
                        </tr>
                    {% endblock %}

                    {% block product_price_info %}
                        {{block.super}}
                    {% endblock %}

                    {% block product_availability_info %}
                        <tr>
                            <th>{% trans "Availability" %}</th>
                            <td>{% if session.availability.is_available_to_buy %}
                                    {% trans 'Available' %}
                                {% else %}
                                    {% trans 'Unavailable' %}
                                {% endif %}
                            </td>
                        </tr>
                    {% endblock %}

                    {% block product_attributes_info %}
                        {{block.super}}
                    {% endblock %}

                    {% block product_reviews_info %}
                        {{block.super}}
                    {% endblock %}
                </table>
                {% for cat in product_categories %}
                    {% if cat.show_on_product %}
                        <div class="rich-text mt-3">
                            {{ cat.category.description|richtext }}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            {% endblock tab_info %}
            {% endwith %}

            {% block tab_attribute_groups %}
            {% for attribute_group in attributes.grouped %}
                <div class="tab-pane fade" id="attribute_group_{{ attribute_group.name|slugify }}" role="tab" aria-labelledby="{{ attribute_group.name }}">
                    <table class="table no-border table-pl-0 table-smaller mb-0">
                   {% for av in attribute_group.attribute_values %}
                    <tr>
                        <th>{{ av.attribute.name }}</th>
                        <td>{{ av.value_as_html }}</td>
                    </tr>
                    {% endfor %}
                    </table>
                </div>
            {% endfor %}
            {% endblock tab_attribute_groups %}

            {% block tab_reviews %}
            {% iffeature "reviews" %}
            <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                {% block product_review %}

                {% if not product.num_approved_reviews == 0 %}
                <div class="review-header mt-2">
                    {% if product.num_approved_reviews > 0 %}
                        <p class="review-header-text">{% trans "Customers give this product a" %} <span class="badge bg-primary text-white">{{ product.rating }}</span></p>
                    {% endif %}
                    <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 %}
                    </div>
                    <p class="mt-2">
                        {% if product|is_review_permitted:user %}
                            {% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id as add_review_url %}
                            <a href="{{ add_review_url }}#addreview" class="text-primary">{% trans "Write a review" %}</a>
                        {% else %}
                            {% trans "This product does not have any reviews yet" %}.
                        {% endif %}
                    </p>
                </div>
                {% endif %}

                {% if product.num_approved_reviews == 0 %}
                <div class="my-3">
                    <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>
                </div>
                {% else %}
                <div class="my-3">
                    <ol class="list-unstyled review-list mt-5">
                        {% for review in product.reviews.approved.all|slice:":3" %}
                            <li>
                            {% include 'catalogue/partials/review.html' %}
                            </li>
                        {% endfor %}
                    </ol>
                </div>
                {% endif %}
                {% endblock %}
            </div>
            {% endiffeature %}
            {% endblock tab_reviews %}

            {% endblock tab_content %}
            {% endblock info_tab_wrapper %}
        </div>
    </div>

    {% block recommended %}
    {% with recommended_products=product.sorted_recommended_products|slice:":6" %}
        {% if recommended_products %}
            <div class="sub-header recom-wrapper mb-3 mt-5">
                <div>
                    <span class="h3">{% trans "Recommended items" %}</span>
                </div>
                <div class="recom-nav-wrapper d-none">
                    <a class="recom-prev btn btn-default mr-2"><i class="fa fa-chevron-left"></i></a>
                    <a class="recom-next btn btn-default"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
            <div class="owl-carousel owl-theme recommended-carousel">
                {% for product in recommended_products %}
                    <div class="item lazy">
                        {% render_product product %}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}
    {% endblock recommended %}


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

{% block outside_content %}

{% endblock %}