{% load sekizai_tags i18n %}

{% addtoblock "css" %}<link rel="stylesheet" href="{{ STATIC_URL }}css/djangocms_gallery/simple.css" />{% endaddtoblock "css" %}
{% addtoblock "js" %}<script src="{{ STATIC_URL }}js/libs/jquery.min.js"></script>{% endaddtoblock "js" %}
{% addtoblock "js" %}<script src="{{ STATIC_URL }}js/libs/class.min.js"></script>{% endaddtoblock "js" %}
{% addtoblock "js" %}<script src="{{ STATIC_URL }}js/cl.gallery.js"></script>{% endaddtoblock "js" %}

{% addtoblock "js" %}<script type="text/javascript">
    jQuery('document').ready(function(){
        new Cl.Gallery('#gallery_{{ instance.pk }}',{
        'timeout': {{ instance.autoplay }}*1000,
        'duration': {{ instance.duration }}*1000,
        });
    })
</script>{% endaddtoblock "js" %}

<div id="gallery_{{ instance.pk }}" class="clearfix djangocms_gallery">
    {% if instance.title %}<h2>{{ instance.title }}</h2>{% endif %}
    <div class="wrapper">
        <div class="viewport">
            {% for slide in instance.slides.all %}
            {% if slide.has_link %}<a href="{{ slide.link }}">{% endif %}
            <article>
                {% if slide.has_link %}<a href="{{ slide.link }}">{% endif %}
                <img class="slide" src="{{ slide.image.url }}" alt="{{ slide.image.label}}">
                {% if slide.has_link %}</a>{% endif %}
            </article>
            {% if slide.has_link %}</a>{% endif %}
            {% endfor %}
        </div>
    </div>
    <nav>
        {% for slide in instance.slides.all %}
        <span><a>{{ slide.get_title }}</a></span>
        {% endfor %}
    </nav>
    <div class="controls">
        <span class="trigger-left"><a>{% trans 'Prev Slide' %}</a></span>
        <span class="trigger-right"><a>{% trans 'Next Slide' %}</a></span>
    </div>
</div>