{% 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 %}

{% block breadcrumbs %}
<ul class="breadcrumb my-3 bg-light">
    <li class="breadcrumb-item">
        <a href="{{ homepage_url }}">{% trans "Home" %}</a>
    </li>
    {% with category=product.categories.all.0 %}
        {% 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 }}</li>

    {% endwith %}

</ul>
{% get_back_button as backbutton %}
    {% if backbutton %}
        <a href="{{ backbutton.url }}" class="btn btn-primary">
            <small><i class="far fa-arrow-left"></i></small> {{ backbutton.title }}
        </a>
    {% endif %}
{% endblock %}

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

{% block content %}

{% purchase_info_for_product request product as session %}

<article class="product_page"><!-- Start of product page -->
    <div class="row mb-4">
        {% 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="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 %}
                <hr>
            {% endblock %}

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

            {% block product_basket_form %}
                {{ block.super }}
            {% endblock %}

            <div id="accordion" class="mt-3">
                {% block product_description %}
                    {% if product.description %}
                    <div class="accordion-header">
                        <a class="collapsed" data-toggle="collapse" data-target="#product_description" aria-expanded="true" aria-controls="product_description">
                            <h5>{% trans "Product Description" %}</h5>
                        </a>
                        <div id="product_description" class="collapse" aria-labelledby="product_description">
                            <div class="accordion-body clearfix">
                                {{ product.description|richtext }}
                            </div>
                        </div>
                    </div>

                    {% endif %}
                {% endblock %}

                {% block product_info %}

                <div class="accordion-header">
                    <a class="collapsed" data-toggle="collapse" data-target="#product_information" aria-expanded="true" aria-controls="product_information">
                        <h5>{% trans "Product Information" %}</h5>
                    </a>
                    <div id="product_information" class="collapse" aria-labelledby="product_information">
                        <div class="accordion-body">
                            <table class="table no-border table-pl-0 table-smaller mb-0">
                                {% block product_default_info %}
                                    {{block.super}}
                                {% endblock %}

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

                                {% block product_availability_info %}
                                    {{block.super}}
                                {% endblock %}

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

                                {% block product_reviews_info %}
                                    {{block.super}}
                                {% endblock %}
                            </table>
                        </div>
                    </div>
                </div>

                  {% for attribute_group in attributes.grouped %}
                    <div class="accordion-header">
                        <a class="collapsed" data-toggle="collapse" data-target="#product_attributegroup_{{ attribute_group.name|slugify }}" aria-expanded="true" aria-controls="product_attributegroup_{{ attribute_group.name|slugify }}">
                            <h5>{{ attribute_group.name }}</h5>
                        </a>
                        <div id="product_attributegroup_{{ attribute_group.name|slugify }}" class="collapse" aria-labelledby="product_attributegroup_{{ attribute_group.name|slugify }}">
                            <div class="accordion-body">
                                <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 class="text-right">{{ av.value_as_html }}</td>
                                    </tr>
                                {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>
                {% endfor %}

                {% endblock %}

            {% iffeature "wishlists" %}
                {% if user.is_authenticated %}
                    {% with wishlists=user.wishlists.all %}
                        {% wishlists_containing_product wishlists product as product_wishlists %}
                        {% if product_wishlists %}
                            <div class="accordion-header">
                                <a class="collapsed" data-toggle="collapse" data-target="#wishlist" aria-expanded="true" aria-controls="wishlist">
                                    <h5>{% trans "Appears in wishlist" %}</h5>
                                </a>
                                <div id="wishlist" class="collapse">
                                    <div class="accordion-body">
                                    {% for wishlist in product_wishlists %}
                                        <form action="{% url 'customer:wishlists-remove-product' key=wishlist.key product_pk=product.id %}" method="post">
                                            {% csrf_token %}
                                            <div class="d-flex align-items-center">
                                            <a href="{{ wishlist.get_absolute_url }}" class="btn btn-primary">{{ wishlist.name }}</a>
                                            <button type="submit" aria-lableby="Remove" class="btn btn-primary" data-loading-text="{% trans 'Removing...' %}"><i class="fa fa-times"></i></button>
                                            </div>
                                        </form>
                                    {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endwith %}
                {% endif %}
            {% endiffeature %}
            </div>
        </div><!-- /col-sm-6 -->
        {% endblock %}

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

    {% block product_long_description %}
        {% ocyanjson "oscar" "enable_long_description" False as enable_long_description %}
        {% if enable_long_description and product.long_description %}
            <section class="product-long_description mb-4">
                {{ product.long_description|richtext}}
            </section>
        {% endif %}
    {% endblock product_long_description %}

    {% 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 %}
                <h3>{% trans "Customer Reviews" %}</h3>
            </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">
                <h3 class="text-center">{% trans "Recommended items" %}</h3>
            </div>
            <ol class="row mb-4">
                {% for product in recommended_products %}
                    <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
                        {% render_product product %}
                    </li>
                {% endfor %}
            </ol>
        {% endif %}
    {% endwith %}
    {% endblock recommended %}


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

{% block outside_content %}
<section>
    <div class="container-fluid p-0">
    {% recently_viewed_products current_product=product %}
    </div>
</section>
{% endblock %}

{% block extrascripts %}
    {{ block.super }}
{% endblock %}