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

{% block product %}
    <article data-product-id="{{ product.pk }}" class="card product-card hook-bags-card shadow-sm text-center">
        <div class="card-header">
            {% block product_title %}
                <h3><a href="{{ product.get_absolute_url }}"
                       title="{{ product.get_title }}">{{ product.get_title }}</a></h3>
            {% endblock %}
        </div>
        <div class="card-img card-img-top">
            {% block product_image %}
                {% with all_images=product.get_all_images %}
                    {# use length rather then count as the images get queried anyways #}

                    {% if all_images|length > 1 %}
                        <ul class="light-slider">
                            {% for image in all_images %}
                                <li>
                                    {% thumbnail image.original "350x200" crop="center" upscale=True as thumb %}
                                        <img class="img-fluid" src="{{ thumb.url }}" alt="{{ product.get_title }}"/>
                                    {% endthumbnail %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}

                        {# Only one image to show #}
                        <div id="product_gallery" class="carousel">
                            <div class="thumbnail">
                                <div class="carousel-inner">
                                    <div class="item active">
                                        {% with image=product.primary_image %}
                                            {% thumbnail image.original "350x200" crop="center" upscale=True as thumb %}
                                                <img src="{{ thumb.url }}" alt="{{ product.get_title }}"/>
                                            {% endthumbnail %}
                                        {% endwith %}
                                    </div>
                                </div>
                            </div>
                        </div>

                    {% endif %}
                {% endwith %}
            {% endblock %}
        </div>
        <div class="card-body">
            <div class="col-12 text-center mb-2">
                <small>{{ product.attr.sub_title }}</small>
            </div>
            <div class="col-12 text-center mb-3">
                {% block product_price %}
                    <div class="product_price">
                        {% include "catalogue/partials/stock_record.html" %}
                    </div>
                {% endblock %}
            </div>
            <div class="col-12 text-center">
                <a data-preview="{{ product.get_absolute_url }}?preview=true" href="{{ product.get_absolute_url }}" class="btn btn-primary btn-hook shadow-sm more-info">More info</a>
            </div>
        </div>
    </article>
    <div class="space-2"></div>
{% endblock %}