{% load ocyan_thumbnail display_tags ocyanjson coyote_tags %}

{% ocyanjson "themes" "thumbnail_geometry" "150x150" as thumbnail_geometry %}
<article class="product">
    <a class="product-image" href="{{ product.get_absolute_url }}" aria-label="{{ product.title|default:product.get_title }}">
        {% with image=product.primary_image %}
            {% if image %}
                {% 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 %}
            {% endif %}
        {% endwith %}
    </a>

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

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

    <div class="product-addtobasket">
        {% render_optional_template "oscar/catalogue/partials/stock_record.html" product=product request=request %}
    </div>
</article>