{% load static %}

{% load cms_tags %}
{% load sekizai_tags %}
{% load l10n %}
{% load thumbnail %}

{% load djangocms_slick_slider_utils %}

{% addtoblock 'css' %}
    <link rel="stylesheet" type="text/css" href="{% static 'slick/slick.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'slick/slick-theme.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/djangocms_slick_slider.css' %}">

    <style type="text/css">
        #slider-{{ instance.id }} .slick-prev:before,
        #slider-{{ instance.id }} .slick-next:before {
            color: {{ instance.arrow_color }}!important;
        }
        .single-image img {
            width: 100%;
            margin: 0 auto; /* it centers any block level element */
        }
        {% if instance.full_width %}
        #slider-{{ instance.id }} .slick-dots {
          bottom: 0 !important;
        }
        {% endif %}
    </style>
{% endaddtoblock %}

<div class="slider-wrapper">
    <div class="image-slider" id="slider-{{ instance.id }}">
        {# Loop over images we added to context #}
        {% for image in images %}
        <div class="single-image">
            {# Create image thumbnail, check link #}
            {% if instance.full_width %}
              {% thumbnail image.image image.full_width_dimensions upscale=True as thumb %}
            {% else %}
              {% thumbnail image.image child_width crop=False upscale=True as thumb %}
            {% endif %}
            {% if image.link %}<a href="{{ image.link }}" target="{{ image.link_target|yesno:"_blank," }}">{% endif %}
            <img data-lazy="{{ thumb.url }}" alt="{{ image.image.default_alt_text }}">
            {% if image.link %}</a>{% endif %}

            {# Add caption, if exists #}
            {% if image.caption_text %}
                <div class="slider-caption-text">
                {{image.caption_text|linebreaks}}
                </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

{% addtoblock 'js' %}

    <script type="text/javascript" src="{% static 'slick/slick.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#slider-{{ instance.id }}').slick({{ instance.settings|jsonify }});
        });
    </script>

{% endaddtoblock %}