{% load thumbnail %}


{% if object.carousel %}
    <div id="imageonlycarousel-{{ content_block.id }}" class="{{ css_classes }} carousel slide" data-ride="carousel">
        {% with carousel_images=object.carousel.carousel_images.select_related.all %}
            <!-- Indicators -->
            <ol class="carousel-indicators">
                {% for image in carousel_images %}
                    <li data-target="#imageonlycarousel-{{ content_block.id }}" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}>
                    </li>
                {% endfor %}
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                {% for image in carousel_images %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        {% thumbnail image.image.file thumb_dimensions crop="center" as thumb %}
                            <img src="{{ thumb.url }}" height="{{ thumb.height }}" width="{{ thumb.width }}" alt="">
                        {% endthumbnail %}
                    </div>
                {% endfor %}
            </div>
        {% endwith %}

        <!-- Controls -->
        <a class="left carousel-control" href="#" data-target="#imageonlycarousel-{{ content_block.id }}" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#" role="button" data-target="#imageonlycarousel-{{ content_block.id }}"  data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
{% endif %}
