{% load ocyan_thumbnail static highlight_slider %}

<section class="highlight_slider">
    <span class="highlight_slider-overlay"></span>
    <div class="highlight-slider dot-slider">
        {% for item in self %}
        <div class="dots moodboard lightbox" data-plugin-options='{"delegate": ".zoom", "gallery": {"enabled": true}}'>
            {% if item.slide.image %}
                {% if forloop.first %}
                {% focuspoint_picture item.slide.image classes="tns-lazy-img loaded tns-complete" %}
                {% else %}
                {% lazy_tns_focuspoint_picture item.slide.image %}
                {% endif %}
            {% endif %}
            {% for dot in item.slide.dots %}
            <span class="plus bg-primary" data-target=".item{{ item.slide.pk }}-dot{{ forloop.counter }}" style="left:{{ dot.value.coordinates|split:','|first }}%; top:{{ dot.value.coordinates|split:','|last }}%;"></span>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% for item in self %}
    {% for dot in item.slide.dots %}
    {% include "blocks/dot-block.html" %}
    {% endfor %}
    {% endfor %}
</section>