{% extends "oscar/catalogue/partials/product.html" %}

{% load ocyan_thumbnail i18n ocyanjson wagtailcore_tags reviews_tags purchase_info_tags display_tags l10n %}

{% block product %}
    <article class="product_pod">
        {% block product_image %}
            {% ocyanjson "oscar" "product_image_geometry" 'x200' as product_image_geometry %}
            <div class="image_container">
                {% with image=product.primary_image %}
                    <a href="{{ product.get_absolute_url }}">
                    {% if forloop.first %}
                    {% picture image.original product_image_geometry upscale=False  alt=image.caption|default:product.title %}
                    {% else %}
                    {% lazy_picture image.original product_image_geometry upscale=False  alt=image.caption|default:product.title %}
                    {% endif %}
                    </a>
                {% endwith %}
            </div>
        {% endblock %}

        <div class="description px-2 pb-4">
            {% block product_review %}
                {{ block.super }}
            {% endblock %}

            {% block product_title %}
                <b class="d-block {% iffeature 'reviews' %}text-center{% endiffeature %}"><a class="text-break product-title text-dark" href="{{ product.get_absolute_url }}" title="{{ product.get_title }}">{{ product.get_title|truncatechars:50 }}</a></b>
            {% endblock %}

            {% block product_description %}
            {% iffeature "reviews" %}
                <div class="star-rating 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 %}
                <small class="text-muted my-2 {% iffeature 'reviews' %}text-center{% endiffeature %}">{{ product.description|striptags|truncatechars:65 }}</small>
            {% endblock %}

            {% block product_price %}
                {% if priceonly %}
                    {% purchase_info_for_product request product as session %}
                    <div class="inline_add_to_basket">
                        <div class="inline_add_to_basket_stock_record m-auto">
                            {% include "catalogue/partials/stock_record.html" %}
                        </div>
                    </div>
                {% else %}
                    {{block.super}}
                {% endif %}
            {% endblock %}
        </div>
    </article>
{% endblock %}