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

{% ocyanjson "carbasa" "compressed_gallery" as compressed_gallery %}
{% with all_images=product.get_all_images %}
{# use length rather then count as the images get queried anyways #}
<div class="carbasa-gallery-{% if compressed_gallery %}1{% else %}2{% endif %}">
    {% if compressed_gallery %}
        {% for image in all_images %}
        <div class="slider-item {% if forloop.first %}active{% endif %}" aria-hidden="false">
            {% thumbnail image.original "1920x1080" upscale=False as lighboxpic %}
        	{% if forloop.counter < 5 %}
            <a href="{{ lighboxpic.url }}" class="popuplink">
            {% picture image.original "900x900" upscale=False alt=image.caption|default:product.title %}
            </a>
            {% else %}
    		<a href="{{ lighboxpic.url }}" class="popuplink invisible">
            empty
            </a>
            {% endif %}
            {% endthumbnail %}
        </div>
        {% endfor %}
        {% if all_images|length > 4 %}<span class="counter">{{ all_images|length }}+</span>{% endif %}
    {% else %}
        {% for image in all_images %}
        <div class="slider-item {% if forloop.first %}active{% endif %}" aria-hidden="false">
            <a href="{{ image.original.url }}" class="popuplink">
                {% responsive_image image.original alt=image.caption|default:product.title %}
            </a>
        </div>
        {% endfor %}
    {% endif %}
</div>
{% endwith %}