{% load cms_tags i18n thumbnail %}

<div class="slider reveal_container" data-active="0" data-last="{{ instance.child_plugin_instances|length|add:'-1' }}">
    <div class="slider__content">
        <div class="slider__images__frame reveal reveal_animation">
            <div class="slider__images scroll" data-ease-multiplier="-2">
                {% for plugin in instance.child_plugin_instances %}
                    {% thumbnail plugin.image 1000x700 box=plugin.cropping crop detail as thumb %}
                    <div class="slider__image__item data_id_{{ forloop.counter0 }}"
                         style="background-image: url({{ thumb.url }})"></div>
                {% endfor %}
            </div>
        </div>
        <div class="slider__texts reveal reveal_animation data_delay_2">
            <div class="slider__texts__frame">
                <div class="slider__texts__main">
                    <div class="slider__texts__content">
                        {% for plugin in instance.child_plugin_instances %}
                            <div class="slider__text__item data_id_{{ forloop.counter0 }}">
                                {% render_plugin plugin %}
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {% if instance.child_plugin_instances|length > 1 %}
                    <a href="#"
                       class="slider__navigation slider__navigation--next">
                        {% include 'project/assets/arrow-right.svg' %}
                        {% trans 'Nächster Slide' %}
                    </a>
                    <a href="#"
                       class="slider__navigation slider__navigation--prev">
                        {% include 'project/assets/arrow-left.svg' %}
                        {% trans 'Vorheriger Slide' %}
                    </a>
                {% endif %}
            </div>

            {% for plugin in instance.child_plugin_instances %}
                {% if plugin.email %}
                    <a href="mailto:{{ plugin.email }}"
                       class="slider__text__item__email data_id_{{ forloop.counter0 }}">
                        {% include 'project/assets/mail.svg' %}
                    </a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>