{% load thumbnail %}
{% load i18n %}
{% load static %}
{% load wagtailimages_tags %}
{% load ocyan_thumbnail %}
{% load ocyanjson %}

{% ocyanjson "themes" "image_zoom" as image_zoom %}
{% with all_images=product.get_all_images %}
{# use length rather then count as the images get queried anyways #}
{% if all_images|length > 1 %}
<div class="product-slider" id="product_gallery">
    {% for image in all_images %}
    <div class="slider-item {% if forloop.first %}active{% endif %}" aria-hidden="false" {% if image_zoom %}data-image-zoom="true"{% endif %}>
        {% thumbnail image.original "1920x1080" upscale=False as lighboxpic %}<a href="{{ lighboxpic.url }}" class="popuplink">{% endthumbnail %}
        {% if forloop.first %}
        {% picture image.original "500x500" upscale=False alt=image.caption|default:product.title %}
        {% else %}
        {% lazy_owl_picture image.original "500x500" upscale=False alt=image.caption|default:product.title %}
        {% endif %}
        </a>
    </div>
    {% endfor %}
</div>
<div class="product-thumbnails">
    {% for image in all_images %}
    <div class="thumbnail-item {% if forloop.first %}active{% endif %}" aria-hidden="false">
        {% picture image.original "200x200" crop="center" alt=image.caption|default:product.title %}
    </div>
    {% endfor %}
</div>

{% else %}
<div class="product-slider" id="product_gallery">
{# Only one image to show #}
{% with all_images=product.get_all_images %}
{% with image=product.primary_image %}
{% thumbnail image.original "1920x1080" upscale=False as lighboxpic %}<a href="{{ lighboxpic.url }}" data-title="{{ product.get_title }}" class="popuplink" {% if image_zoom %}data-image-zoom="true"{% endif %}>{% endthumbnail %}
{% picture image.original "500x500" upscale=False alt=image.caption|default:product.title %}
</a>
{% endwith %}
{% endwith %}
</div>
{% endif %}
{% endwith %}