{% load image_tags %}
{% load i18n %}
{% load staticfiles %}
{% load flash_sale_tags %}

{% 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="carousel slide">

            <div class="thumbnail">
                <div class="carousel-inner" role="listbox">

                {% is_product_on_sale product as is_on_sale %}
                {% if is_on_sale %}
                    {% include 'oscar/catalogue/partials/sale_icon.html' %}
                {% endif %}

                {% for image in all_images %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        {% oscar_thumbnail image.original "440x400" upscale=False as thumb %}
                        <img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
                    </div>
                {% endfor %}
                </div>
                <a class="carousel-control left" href="#product_gallery" role="button" data-slide="prev">
                    <span class="icon-prev fa-stack fa-lg" aria-hidden="true">
                        <i class="fa fa-square-o fa-stack-2x"></i>
                        <i class="fa fa-angle-left fa-stack-1x"></i>
                    </span>
                </a>
                <a class="carousel-control right" href="#product_gallery" role="button" data-slide="next">
                    <span class="icon-next fa-stack fa-lg" aria-hidden="true">
                        <i class="fa fa-square-o fa-stack-2x"></i>
                        <i class="fa fa-angle-right fa-stack-1x"></i>
                    </span>
                </a>
            </div>

            <ol class="carousel-indicators thumbnail">
                {% for image in all_images %}
                    <li data-target="#product_gallery" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.first %}active{% endif %}">
                        {% oscar_thumbnail image.original "65x55" crop="center" as thumb %}
                        <img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
                    </li>
                {% endfor %}
            </ol>
        </div>

    {% else %}

        {# Only one image to show #}
        <div id="product_gallery" class="carousel">
            <div class="thumbnail">
                <div class="carousel-inner">

                    {% is_product_on_sale product as is_on_sale %}
                    {% if is_on_sale %}
                        {% include 'oscar/catalogue/partials/sale_icon.html' %}
                    {% endif %}

                    <div class="item active">
                    {% with image=product.primary_image %}
                        {% oscar_thumbnail image.original "440x400" upscale=False as thumb %}
                        <img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
                    {% endwith %}
                    </div>
                </div>
            </div>
        </div>

    {% endif %}
{% endwith %}