{% load ocyan_thumbnail highlight_slider %}

<div class="product-information item{{ item.slide.pk }}-dot{{ forloop.counter }}" style="left:{{ dot.value.coordinates|split:','|first }}%; top:{{ dot.value.coordinates|split:','|last }}%;">
    <div class="inner-box">
        <button class="close bg-primary" accesskey="q"><i class="fa fa-plus"></i></button>
        {% if dot.value.product %}
        <a href="{{ dot.value.product }}" class="col-lg-12">   
        {% endif %}
            {% lazy_picture dot.value.image.file "400x300" %}
            <div class="inline-box">
                <span class="product-header">
                    {{dot.value.title}}
                </span>
                {% if dot.value.product %}
                <span class="product-icon bg-primary">
                    <i class="fa fa-chevron-right"></i>
                </span>
                {% endif %}
            </div>
        {% if dot.value.product %}
        </a>
        {% endif %}
    </div>
</div>