{% load static %}
{% if page.get_slides %}
    <div class="container_sliders">
        {% for slide in page.get_slides %}
            <div class="one_slide_container{% if forloop.counter0 == 0 %} show{% else %} hide{% endif %}" data-id-slide="{{ forloop.counter }}">
                <div class="picture_slider_container" {% if slide.bg_color %}style="background: {{ slide.bg_color }}" {% endif %}>
                    {% if slide.picture %}
                        <picture>
                            <source media="(min-width:800px)" srcset="{{ MEDIA_URL }}{{ slide.picture }}">
                            <source media="(max-width:800px)" srcset="{% static "images/image_f_800_slider.png" %}">
                            <img class="picture_slider" src="{{ MEDIA_URL }}{{ slide.picture }}" alt="{{ slide.name }}" />
                        </picture>

                    {% endif %}
                </div>
                {% if slide.name or slide.description %}
                    <div class="slider_block_text_container">
                        <div class="cut-width cut_width_slider">
                            <div class="bottom_part_container_slide">
                                <div class="functions_btns_slider" data-index-slide="{{ forloop.counter }}" data-lenght-slides="{{ page.get_slides|length }}">
                                    <img onclick="change_slide('{{ forloop.counter }}','back','{{ page.get_slides|length }}')" src="{% static "images/arrow_white_left.svg" %}">
                                    <span class="iterator_slide">
                                        {{ forloop.counter }} / {{ page.get_slides|length }}
                                    </span>
                                    <img onclick="change_slide('{{ forloop.counter }}','next','{{ page.get_slides|length }}')" src="{% static "images/arrow_white_right.svg" %}">
                                </div>
                            </div>
                            <div class="top_part_container_slide">
                                <div class="slider_block_text">
                                    {% if slide.name %}
                                        <div class="title_slide">{{ slide.name }}</div>
                                    {% endif %}
                                    {% if slide.description %}
                                        <div class="description_slide">{{ slide.description|linebreaksbr }}</div>
                                    {% endif %}
                                    {% if slide.but_title %}
                                        {% with widget=slide name_w='slide' %}
                                            {% include 'blocks/block_elements/be_button.html' %}
                                        {% endwith %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endif %}