{% load i18n %}
{% load sekizai_tags goscale_tags %}

{% goscale_addtoblock "css" %}
	<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}goscale/css/goscale.plugins.pictures.css" />
{% endaddtoblock %}

{% goscale_addtoblock "js" %}
	<script type="text/javascript" src="{{ STATIC_URL }}goscale/js/slides.min.jquery.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}goscale/js/goscale.plugins.pictures.slideshow.js" data-callback="plugins.goscalePluginsPicturesSlideshow"></script>
{% endaddtoblock %}

<div class="goscale-plugins-pictures slideshow" data-type="slideshow" data-autoplay="{{ autoplay }}"{% if width != null %} data-width="{{ width }}"{% endif %}{% if height != null %} data-height="{{ height }}"{% endif %}{% if thumbnail_width != null %} data-thumbnailWidth="{{ thumbnail_width }}"{% endif %}{% if thumbnail_height != null %} data-thumbnailHeight="{{ thumbnail_height }}"{% endif %}>
	{% if title %}<h1>{{ title }}</h1>{% endif %}

	<div class="slides no-al">
		<div class="slides_container">
			{% for image in posts %}
				<div>
					<img src="{{ image.thumbnails.s800.url }}" /></a>
				</div>
			{% endfor %}
		</div>
		<a href="#" class="prev"></a>
		<a href="#" class="next"></a>
	</div>
	
	<div class="loader">
		<img src="{{ STATIC_URL }}goscale/img/loader.gif" />
	</div>
</div>