{% load thumbnail %}
{% load i18n %}
{% load staticfiles %}
{% load wagtailimages_tags %}
{% load ocyan_thumbnail %}

{% with all_images=product.get_all_images %}
    {# use length rather then count as the images get queried anyways #}

    {% if all_images|length > 1 %}

        <div id="product_gallery" class="product_gallery sticky">

            <div class="product-carousel owl-carousel owl-theme" data-slider-id="1">
                {% for image in all_images %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        {% thumbnail image.original "x800" upscale=False as lighboxpic %}<a href="{{ lighboxpic.url }}" class="lightboxlink" data-lightbox="gallery">{% endthumbnail %}
                        {% if forloop.first %}
                        {% picture image.original "440x400" upscale=False alt=image.caption|default:product.title %}
                        {% else %}
                        {% lazy_owl_picture image.original "440x400" upscale=False alt=image.caption|default:product.title %}
                        {% endif %}
                        </a>
                    </div>
                {% endfor %}
            </div>

            <div class="owl-thumbs mt-2" data-slider-id="1">
                {% for image in all_images %}
                        <a class="owl-thumb-item">
                            {% picture image.original "114x114" crop="center" alt=image.caption|default:product.title %}
                        </a>
                {% endfor %}
            </div>
        </div>

    {% else %}

        {# Only one image to show #}
        <div id="product_gallery" class="product_gallery sticky">
            <div class="thumbnail">
                <div class="carousel-inner">
                    <div class="item active">
                    {% with image=product.primary_image %}
                        {% thumbnail image.original "x800" upscale=False as lighboxpic %}<a href="{{ lighboxpic.url  }}" data-lightbox="{{ product.get_title }}" data-title="{{ product.get_title }}">{% endthumbnail %}
                        {% picture image.original "440x400" upscale=False alt=image.caption|default:product.title %}
                        </a>
                    {% endwith %}
                    </div>
                </div>
            </div>
        </div>

    {% endif %}
{% endwith %}