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

{% load history_tags %}
{% load wagtailcore_tags %}
{% load currency_filters %}
{% load reviews_tags %}
{% load product_tags %}
{% load display_tags %}
{% load ocyanjson %}
{% load i18n %}
{% load purchase_info_tags %}
{% load ocyan_main %}

{% block extrahead %}
{% block canonical %}
<link rel="canonical" href="{% absolute_url request.path %}">
{% endblock %}
{{ block.super }}
{% endblock %}

{% block title %}
{% if product.get_meta_title %}
{{ product.get_meta_title }}
{% else %}
{{ block.super }}
{% endif %}
{% wagtail_site as current_site %}{% if current_site.site_name %} - {{ current_site.site_name }}{% endif %}
{% endblock title %}

{% block description %}
{{ product.get_meta_description }}
{% endblock description %}

{% block breadcrumbs %}
{% include 'oscar/partials/breadcrumbs.html' with product=product %}
{% endblock breadcrumbs %}

{% block content %}
<article class="product-page">
    {% block product_info %}
    <div class="product-info">
        {% block product_tabs %}
        {% block basic_details %}
        <div class="row">
            <div class="col-lg-6 left-row">
                {% block product_gallery %}
                <div class="product-gallery row-box">
                    {% include "oscar/catalogue/partials/gallery.html" %}
                </div>
                {% endblock product_gallery %}
            </div>
            <div class="col-lg-6 right-row">
                {% block product_main %}
                <div class="product-main row-box">
                    {% block product_header %}
                    {% if user.is_staff %}
                    <a class="float-right d-none d-lg-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>
                    {% endblock product_header %}

                    {% block product_stock_record %}
                    {% include "oscar/catalogue/partials/stock_record.html" %}
                    {% endblock product_stock_record %}

                    {% iffeature "reviews" %}
                    <div class="review-header">
                        {% include "oscar/catalogue/reviews/partials/review_stars.html" %}
                    </div>
                    {% endiffeature %}

                    {% block product_description %}
                    {% if product.description %}
                    <div class="product-description">
                        <p>{{ product.description|safe }}</p>
                    </div>
                    {% endif %}
                    {% endblock product_description %}

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

                    {% block basket_form %}
                    {{block.super}}
                    {% endblock %}

                    {% block append_product_basket_form %}
                    {{block.super}}
                    {% endblock %}
                    {% endblock product_basket_form %}
                    
                    {% block product_basket_form_children %}
                    {{block.super}}
                    {% endblock %}
                </div>
                {% endblock product_main %}
            </div>
        </div>
        {% endblock basic_details %}
        <div class="row">
            <div class="col-lg-6 left-row">
                {% block long_description %}
                {% if product.long_description %}
                <div class="long-description row-box">
                    <div class="sub-header">
                        <span>{% trans "Description" %}</span>
                    </div>
                    {% if product.long_description|striptags|length > 700 %}
                    <div class="readmore-wrapper" id="long-description">
                        {{product.long_description|safe}}
                    </div>
                    <a class="btn-read-more btn btn-sm collapsed" data-bs-toggle="collapse" href="#long-description">
                        <span><i class="fa fa-chevron-down"></i> {% trans "Read more" %}</span>
                        <span><i class="fa fa-chevron-up"></i> {% trans "Read less" %}</span>
                    </a>
                    {% else %}
                    {{product.long_description|safe}}
                    {% endif %}
                </div>
                {% endif %}
                {% endblock long_description %}

                {% block product_tab_info %}
                <div class="product-info-tabs row-box">
                    <div class="sub-header">
                        <span>{% trans "Product Information" %}</span>
                    </div>
                    <table class="table table-borderless">
                        {% block product_info_rows %}
                        {% block product_default_info %}
                        {% if product.upc %}
                        <tr>
                            <td>{% trans "UPC" %}</td><td>{{ product.upc }}</td>
                        </tr>
                        {% endif %}
                        <tr>
                            <td>{% trans "Product Type" %}</td><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>
                            <td>{% trans "Price (excl. tax)" %}</td><td>{{ session.price.excl_tax|currency:session.price.currency }}</td>
                        </tr>
                        {% if session.price.is_tax_known %}
                            <tr>
                                <td>{% trans "Price (incl. tax)" %}</td><td>{{ session.price.incl_tax|currency:session.price.currency }}</td>
                            </tr>
                            <tr>
                                <td>{% trans "Tax" %}</td><td>{{ session.price.tax|currency:session.price.currency }}</td>
                            </tr>
                        {% endif %}
                        {% endif %}
                        {% endblock %}

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

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

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

                {% block product_tabs_content %}
                {% block product_review %}
                {% iffeature "reviews" %}
                <div class="review-wrapper row-box">
                    <div class="sub-header">
                        <span>{% trans "Reviews" %}</span>
                        {% if product|is_review_permitted:user %}
                        <a id="review_write" href="{% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id %}#addreview" class="btn btn-primary btn-sm btn-review">
                            {% trans "Write a review" %}
                        </a>
                        {% endif %}
                    </div>
                    {% include "oscar/catalogue/reviews/partials/review_header.html" %}
                    {% if not product.num_approved_reviews == 0 %}
                    <ol class="review-wrapper">
                        {% for review in product.reviews.approved.all|slice:":3" %}
                            <li class="review-item">
                            {% include 'oscar/catalogue/partials/review.html' %}
                            </li>
                        {% endfor %}
                    </ol>
                    {% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id as add_review_url %}
                    {% endif %}
                    {% 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 %}
                </div>
                {% endiffeature %}
                {% endblock product_review %}
                {% endblock product_tabs_content %}
            </div>

            <div class="col-lg-6 right-row">
                {% block recommended %}
                {% block recommended_products %}
                {% with recommended_products=product.sorted_recommended_products|slice:":6" %}
                {% if recommended_products %}
                <div class="recommended-products">
                    <div class="sub-header">
                        <span>{% trans "Recommended items" %}</span>
                    </div>
                    <div class="row">
                        {% for product in recommended_products %}
                        <div class="col-md-6 recommended_product">
                            {% render_product product %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                {% endwith %}
                {% endblock recommended_products %}
                {% endblock recommended %}

                {% block recently_viewed_products %}
                {% recently_viewed_products current_product=product %}
                {% endblock recently_viewed_products %}
            </div>
        </div>
        {% endblock product_tabs %}
    </div>
    {% endblock product_info %}
</article>
{% endblock content %}

{% block onbodyload %}
{{ block.super }}
oxyan.productSlider();
oxyan.GalleryPopup();
{% endblock %}