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

{% block product %}
    {% with attr=product.attribute_dict %}
        <article data-product-id="{{ product.pk }}"
                class="card product-card pod-product-card shadow {% if not product.attr.premium %}border-yellow{% else %}border-cyan{% endif %} shadow-sm">
            {% if product.attr.premium.value %}
                <div class="coffee-badge premium"></div>
            {% endif %}
            <div class="card-header text-left">
                <h3>
                    <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">
                        {{ attr.coffee_taste.value }}
                    </div>
                    <div class="col-4 text-right small">
                        {% block product_price %}
                            <div class="product_price">
                                From {% cheapest_price product %}
                                {% if not product.is_parent and not product.has_options %}
                                    {% include "catalogue/partials/add_to_basket_form_compact.html" %}
                                {% endif %}
                            </div>
                        {% endblock %}
                    </div>
                </div>
            </div>
            <div class="card-img">
                {% block product_image %}
                    {% with image=product.primary_image %}
                        {% thumbnail image.original "400x250" upscale=True crop="center" as thumb %}
                            <a href="{{ product.get_absolute_url }}">
                                <img src="{{ thumb.url }}" alt="{{ product.get_title }}"
                                     class="thumbnail img-fluid">
                            </a>
                        {% endthumbnail %}
                    {% endwith %}
                {% endblock %}
            </div>
            <div class="card-body">
                <div class="col text-center mb-3 country">
                    {{ attr.country.value }} - {{ attr.region.value }}
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="col text-uppercase">
                            <h5>{% trans attr.acidity.name %}</h5>
                        </div>
                        <div class="col">
                            {{ attr.acidity.value }}
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="col text-uppercase">
                            <h5>{% trans attr.intensity.name %}</h5>
                        </div>
                        <div class="col">
                            {{ attr.intensity.value }}/12
                        </div>
                    </div>
                </div>
                <div class="space-1"></div>
                <div class="col text-center">
                    <a class="btn btn-primary btn-hook" href="{{ product.get_absolute_url }}">
                        {% trans 'More Info' %}
                    </a>
                </div>
            </div>
        </article>
        <div class="space-2"></div>
    {% endwith %}
{% endblock %}