{% load thumbnail %}
{% load i18n %}
{% load display_tags %}
{% load staticfiles %}
{% load catalogue_tags %}
{% load reviews_tags %}

{% block product %}
    <article data-product-id="{{ product.pk }}" class="card product-card shadow {% if not product.attr.premium %}border-yellow{% else %}border-cyan{% endif %} shadow-sm mb-5">
        {% if product.attr.premium %}
            <div class="coffee-badge premium"></div>
        {% endif %}
        <div class="card-header text-center">
            <h3 class="text-left">
                <a href="{{ product.get_absolute_url }}" title="{{ product.get_title }}">
                    {{ product.get_title }}
                </a>
            </h3>
            <div class="row">
                <div class="col-8 text-left">
                    <small class="small">
                        {{ product.attr.coffee_taste }}
                    </small>
                </div>
                <div class="col-4 text-right">
                    {% block product_price %}
                        <small class="product_price">
                            {% comment %}
                            {% include "catalogue/partials/stock_record.html" %}
                            {% endcomment %}
                            From {% cheapest_price product %}
                            {% if not product.is_parent and not product.has_options %}
                                {% include "catalogue/partials/add_to_basket_form_compact.html" %}
                            {% endif %}
                        </small>
                    {% endblock %}
                </div>
            </div>
        </div>
        <div class="card-img">
            {% block product_image %}
                <div class="image_container">
                    {% with image=product.primary_image %}
                        {% thumbnail image.original "400x250" upscale=True crop="center" as thumb %}
                            <a href="{{ product.get_absolute_url }}">
                                <img data-src="{{ thumb.url }}" alt="{{ product.get_title }}"
                                     class="thumbnail img-fluid lazy">
                            </a>
                        {% endthumbnail %}
                    {% endwith %}
                </div>
            {% endblock %}
        </div>
        <div class="card-body text-center">
            <div class="d-block text-center">
                {% block product_review %}
                    <span class="rating-stars ml-auto mr-auto" data-rateyo-rating="{{ product.rating|round_rating }}"></span>
                {% endblock %}
            </div>
            <div class="d-block mb-3">
                <a class="small reviews_popup" data-href="{% url 'catalogue:reviews_list' product.pk %}" href="#">See
                    reviews</a>
            </div>
            <div class="row">
                <div class="col-6">
                    <h5 class="attribute-title">Origin</h5>
                    <p class="attribute-value">{{ product.attr.country }},{{ product.attr.region }}</p>
                </div>
                <div class="col-6">
                    <h5 class="attribute-title">Roasted On</h5>
                    <p class="attribute-value">{{ global_preferences.coffee__roasted_date }}</p>
                </div>
                <div class="col-6">
                    <h5 class="attribute-title">Acidity</h5>
                    <p class="attribute-value">{{ product.attr.acidity }}</p>
                </div>
                <div class="col-6">
                    <h5 class="attribute-title">Upcoming Roast</h5>
                    <p class="attribute-value">{{ global_preferences.coffee__upcoming_roast }}</p>
                </div>
            </div>
            <div class="space-1"></div>
            <div class="clear text-center">
                <!-- <a class="btn btn-lg btn-primary btn-hook" href="{{ product.get_absolute_url }}">More
                    info</a> -->
                {% check_product_like product.pk request.user.pk as preference %}
                <a class="btn btn-lg btn-primary btn-hook confirm-more-info" data-preferences='{{preference}}' data-url="{{ product.get_absolute_url }}">More info</a>
                    
            </div>
        </div>
    </article>
{% endblock %}