{% 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 %}
                        <img class="picture_slider" src="{{ MEDIA_URL }}{{ slide.picture }}" alt="{{ slide.name }}" />
                    {% endif %}
                </div>
                {% if slide.name or slide.description %}
                    <div class="cut-width slider_block_text_container">
                        <div class="functions_btns_slider">
                            <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 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 %}
                                <a href="{{ slide.url }}">
                                    {% if slide.but_icon %}
                                        <img src="{{ MEDIA_URL }}{{ slide.but_icon }}" alt="{{ slide.but_title }}" />
                                    {% endif %}
                                    <div style="border: {{ slide.but_color }} solid 5px; color: {{ slide.but_color }}">{{ slide.but_title }}</div>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endif %}