{% if group and group.adds %}
<div class="advertisiment_{{__SELF__}}">
    {% for reklama in group.adds %}
    <a class="advertisiment__item"
       {% if reklama.enable_stats and reklama.url !="#" %}
       data-request="{{__SELF__}}::onRedirect"
       data-request-data = '[{id:{{reklama.id}}},{url:"{{reklama.url}}"}]'
       {% endif %}
    >
        <img src="{{reklama.media|media_cdn}}" alt="{{reklama.title}}">
    </a>
    {% endfor %}
</div>

<script>
    // advertisement start
    $(function () {
        var $slideshow = $(".advertisiment_{{__SELF__}}");
        var ImagePauses = {{group.adds.pluck('display')}};

        // Init
        $slideshow.slick({
            dots: false,
            arrows: false,
            infinite: true,
            initialSlide: 0,
            autoplay: true,
            autoplaySpeed: ImagePauses[0] * 1000,
            fade: true,
            cssEase: "linear",
            adaptiveHeight: true,
        });

        // Sliding settings
        $slideshow.on("afterChange", function (event, slick, currentSlide) {
            // Console log, can be removed
            console.log(
                "Current slide: " +
                currentSlide +
                ". Setting speed to: " +
                ImagePauses[currentSlide]
            );

            // Update autoplay speed according to slide index
            $slideshow.slick(
                "slickSetOption",
                "autoplaySpeed",
                ImagePauses[currentSlide] * 1000,
                true
            );
        });
    });
    // advertisement end
</script>

{% endif %}