{% 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" "500x500" as thumbnail_geometry %}
    {% if product.primary_image %}
        {% with image=product.primary_image %}
        {% ocyanjson "carbasa" "same_hight_product_image" as same_height %}
        <a class="product-image{% if same_height %} same-height{% endif %} mb-3" href="{{ product.get_absolute_url }}" aria-label="Product image" title="{{ product.get_title }}">
            {% block product_review %}
            {% iffeature "reviews" %}
                {% if product.rating %}
                <span class="rating">
                    <i class="fa fa-star-solid"></i> {{product.rating}}
                </span>
                {% endif %}
            {% endiffeature %}
            {% endblock %}

            {% block add_icon %}
            <i class="fa fa-long-arrow-right add-icon"></i>
            {% endblock %}

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

    <div class="product-info">
        {% block product_price %}
        <div class="product-addtobasket">
            {% include "oscar/catalogue/partials/stock_record.html" %}
        </div>
        {% 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 }}" tabindex="-1">
                {{ product.get_title|truncatechars:50 }}
            </a>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
</article>
{% endblock %}