{% 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 content_wrapper %}
<article class="product-detail">
	<div class="container">
		<div class="row">
			<div class="col-xl-6 pe-xl-5">
				<div class="breadcrumb-wrapper d-lg-none">
					{% include 'oscar/partials/breadcrumbs.html' with product=product current=False %}
				</div>
                {% block product_gallery %}
					{% include "oscar/catalogue/partials/gallery.html" %}
				{% endblock %}
			</div>
			<div class="col-xl-6 ps-xl-5 right-side">
                <div class="right-side-inner">
    				{% block breadcrumbs %}
    				<div class="breadcrumb-wrapper d-lg-block d-none">
    					{% include 'oscar/partials/breadcrumbs.html' with product=product current=False %}
    				</div>
    				{% endblock breadcrumbs %}
    				<div class="header-title">
    					<h1 class="h3">{{ product.title }}</h1>
                        {% include "oscar/catalogue/reviews/partials/review_stars.html" %}
    				</div>

    				{% block product_stock_record %}
                    {% purchase_info_for_product request product as session %}
    				<div class="stock-record">
                    	{% include "oscar/catalogue/partials/stock_record.html" %}
                        <div class="availability-message text-dark">
                            <small><i class="me-1 fa {% if not session.availability.is_available_to_buy %}fa-times text-danger{% elif session.stockrecord.is_below_threshold or session.availability.is_backorder %}fa-exclamation-triangle text-warning{% else %}fa-check-circle text-success{% endif %}"></i> {{session.availability.message}}</small>
                        </div>
                	</div>
                    {% endblock product_stock_record %}
                    
                    {% block product_basket_form %}
                    <div class="basket-form">
                	{% block prepend_product_basket_form %}
                	{{block.super}}
                	{% endblock %}

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

                    {% block append_product_basket_form %}
                    {{block.super}}
                    {% endblock %}
            		</div>
                    {% endblock product_basket_form %}
                    
                    {% block product_basket_form_children %}
                    <div class="basket-form-children">
                    	{{block.super}}
                	</div>
                    {% endblock %}

                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        {% block product_description %}
                            {% if product.description %}
                                <div class="accordion-item">
                                    <h5 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                            {% trans "Description" %}
                                        </button>
                                    </h5>
                                    <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body px-0">
                                            {{ product.description|safe }}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endblock product_description %}
                        {% block product_information_table %}
                        <div class="accordion-item">
                            <h5 class="accordion-header" id="flush-headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                    {% trans "Product Information" %}
                                </button>
                            </h5>
                            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body px-0">
                                    <table class="table table-borderless table-sm">
                                        {% block product_info_rows %}
                                        {% block product_attributes_info %}
                                        {{block.super}}
                                        {% endblock %}
                                        {% block product_default_info %}
                                        <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 %}
                                        {% endblock %}

                                        {% block product_availability_info %}
                                        
                                        {% endblock %}
                                        {% endblock product_info_rows %}
                                    </table>
                                </div>
                            </div>
                        </div>
                        {% endblock %}
                        {% block accordion_append %}{% endblock %}
                    </div>
                </div>
			</div>
		</div>
        {% block long_description %}
        {% if product.long_description %}
        <div class="row">
            <div class="col-xl-12 my-5">
                <div class="long-description p-5 bg-light">
                    {{product.long_description|safe}}
                </div>
            </div>
        </div>
        {% endif %}
        {% endblock long_description %}
        <div class="my-5">
            {% 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 class="h3 d-inline-block">{% trans "Recommended items" %}</span>
                </div>
                <div class="row">
                    {% for product in recommended_products %}
                    <div class="col-lg-3 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>
</article>
{% endblock %}

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