{% extends "oscar/catalogue/partials/product.html" %}
{% load thumbnail i18n ocyanjson %}
{% load reviews_tags %}
{% load display_tags %}
{% load staticfiles ocyan_thumbnail %}

{% 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 }}">
                        {% lazy_picture image.original product_image_geometry upscale=False  alt=image.caption|default:product.title %}
                    </a>
                {% endwith %}
            </div>
        {% endblock %}

        <div class="popup">
            {% block product_title %}
                <span class="product_name">
                    {{ product.get_title }}
                </span>
            {% endblock %}

            {% block product_price %}
                <div class="product_price">
                    {% include "catalogue/partials/stock_record.html" %}
                </div>
            {% endblock %}

            {% block product_review %}
                {% iffeature "reviews" %}
                    <p class="star-rating text-center {{ product.rating|as_stars }}">
                        <i class="icon-star"></i>
                        <i class="icon-star"></i>
                        <i class="icon-star"></i>
                        <i class="icon-star"></i>
                        <i class="icon-star"></i>
                    </p>
                {% endiffeature %}
            {% endblock %}

            {% if not product.is_parent and not product.has_options and product.min_quantity <= 1 %}
                {% include "catalogue/partials/add_to_basket_form_compact.html" %}
            {% else %}
                <form>
                <a class="btn btn-info btn-add-to-basket" href="{{ product.get_absolute_url }}" class="btn btn-primary btn-block">{% trans "View product" %}</a>
                </form>
            {% endif %}
        </div>
    </article>
{% endblock %}