{% load sekizai_tags thumbnail filer_tags filer_image_tags %}

{% addtoblock "js" %}
<script type="text/javascript" charset="utf-8">
$(function() {
	$('#gallery{{ object.id }}').carousel()
});
</script>
{% endaddtoblock %}

{% with folder_images|first as image_first %}

<div id="gallery{{ object.id }}" class="carousel slide" style="width: 600px;">
<div class="carousel-inner">
{% for image in folder_images %}
<div class="item{% if image == image_first %} active{% endif %}">
{% thumbnail image.file 600x400 crop="smart" upscale=True subject_location=image.subject_location as thumbnail %}
<img alt="{{ image.name }}" src="{{ thumbnail.url }}">
{% if image.name or image.description %}
<div class="carousel-caption">
{% if image.name %}<h4>{{ image.name }}</h4>{% endif %}
{% if image.description %}<p>{{ image.description }}</p>{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
<a class="carousel-control left" href="#gallery{{ object.id }}" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#gallery{{ object.id }}" data-slide="next">&rsaquo;</a>
</div>

{% endwith %}