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

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


{% block product %}
<article class="product">
    {% block product_image %}
    {% ocyanjson "themes" "thumbnail_geometry" "305x305" as thumbnail_geometry %}
    {% with image=product.primary_image %}
    <a class="product-image" href="{{ product.get_absolute_url }}" aria-label="Product image" tabindex="-1">
        {% if notlazy %}
        {% picture image.original thumbnail_geometry upscale=False alt=image.caption|default:product.title %}
        {% else %}
        {% lazy_picture image.original thumbnail_geometry upscale=False alt=image.caption|default:product.title %}
        {% endif %}
    </a>
    {% endwith %}
    {% endblock %}

    {% block product_review %}
    {% iffeature "reviews" %}
    <div class="product-rating {% if product.rating != None %}{{ product.rating|as_stars }}{% else %}none{% endif %} stars-{{ product.rating }}">
        {% include "oscar/catalogue/reviews/partials/stars.html" with rating=product.rating %}
        
        <span class="product-rating-count"><small>({{product.num_approved_reviews}})</small></span>
    </div>
    {% endiffeature %}
    {% endblock %}

    {% block product_description %}
    <div class="product-description-wrapper">
        {% block product_title %}
        <a class="product-title" href="{{ product.get_absolute_url }}" title="{{ product.get_title }}">
            {{ product.get_title|truncatechars:50 }}
        </a>
        {% endblock %}

        {% if product.description %}
        <div class="product-description">
            {{ product.description|safe|striptags|truncatechars:80 }}
        </div>
        {% endif %}
    </div>
    {% endblock %}

    {% block product_price %}
    <div class="product-addtobasket">
        {% include "oscar/catalogue/partials/stock_record.html" %}
        {% if not priceonly %}
        {% include "oscar/catalogue/partials/add_to_basket_form_compact.html" %}
        {% endif %}
    </div>
    {% endblock %}
</article>
{% endblock %}