{% load i18n sekizai_tags %}


{% addtoblock "css" %}
    <link rel="stylesheet" href="{{STATIC_URL}}nivo/nivo-slider.css" type="text/css" media="screen" />
{% endaddtoblock %}

{% addtoblock "css" %}
    <link rel="stylesheet" href="{{STATIC_URL}}nivo/themes/{{object.theme}}/{{object.theme}}.css" type="text/css" media="screen" />
{% endaddtoblock %}

{% addtoblock "js" %}
    <script type="text/javascript" src="{{STATIC_URL}}nivo/js/jquery.nivo.slider.pack.js"></script>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script type="text/javascript">
        $(function() {
            $('#nivoslider{{object.pk}}').nivoSlider({
                effect: '{{object.effect}}',
                animSpeed: {{object.anim_speed}},
                pauseTime: {{object.pause_time}},
                directionNav: {{object.arrows|lower}},
                controlNavThumbs: {{object.thumbnails|lower}},
                pauseOnHover: {{object.pause_on_hover|lower}},
                manualAdvance: {{object.manual_advance|lower}},
                prevText: '{% trans 'prev'|capfirst %}',
                nextText: '{% trans 'next'|capfirst %}',
                randomStart: {{object.random_start|lower}}
            });
        });
    </script>
{% endaddtoblock %}

<div    class="slider-wrapper theme-{{object.theme}}"
        {% if object.width %}
            style="width: {{object.width}}px;"
        {% endif %}>
    <div    id="nivoslider{{object.pk}}" class="nivoSlider"
            title="{{object.title|default:''}}"
            {% if object.height %}
                style="height: {{object.height}}px;"
            {% endif %}>
        {% for img in images %}
            <img    src="{{img.image.url}}"
                    data-thumb="{{ img.image.icons.64 }}"
                    alt="{{img.name|default:''}}"
                    title="{{img.description|default:''}}" />
        {% endfor %}
    </div>
</div>