{% extends 'tb_base.html' %}
{% load static %}
{% load i18n %}
{% block CONTENT %}
    {% include "blocks/b_sections_buttons.html" %}

    <div class="breadcrumbs_documentation_block">
        <div class="cut-width">
            <div class="breadcrumbs_documentation">
{#                <div class="way_bread_crumb">#}
{#                    Документация и техническая поддержка#}
{#                </div>#}
{#                <picture class="breadcrumb_arrow_picture">#}
{#                    <source srcset="{% static "images/breadcrumb_arrow.svg" %}">#}
{#                    <img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">#}
{#                </picture>#}
{#                <div class="way_bread_crumb">#}
{#                    Документация для версии 1#}
{#                </div>#}
{#                <picture class="breadcrumb_arrow_picture">#}
{#                    <source srcset="{% static "images/breadcrumb_arrow.svg" %}">#}
{#                    <img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">#}
{#                </picture>#}
{#                <div class="way_bread_crumb last">#}
{#                    Документация для версии 1#}
{#                </div>#}
                {% for name,url in breadcrumbs.items %}
                    <a class="way_bread_crumb{% if forloop.last %} last{% endif %}" {% if not forloop.last %}href="{{ url }}"{% endif %}>
                        {{ name }}
                    </a>
                    {% if not forloop.last %}
                    	<picture class="breadcrumb_arrow_picture">
                            <source srcset="{% static "images/breadcrumb_arrow.svg" %}">
                            <img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">
                        </picture>
                    {% endif %}
                {% endfor %}

            </div>
        </div>
    </div>
    <div class="documentation_block">
        <div class="cut-width flex_container_tree_and_content">
            <div class="left_curtain_documentation">
                <div class="documentation_version">
                    <div class="documentation_version_txt">
                        {% trans "Документация для версии" %}
                    </div>
                    <div class="documentation_version_switcher">
                        <div class="first_line_documentation_version_switcher" onclick="openVersionSwitcher(this)">
                            <div class="cur_documentation_version">
                                {{ cur_version.name }}
                            </div>
                            <picture class="documentation_switcher_arrow_picture">
                                <source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
                                <img class="documentation_switcher_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                            </picture>
                        </div>
                        <div class="documentation_switcher_content_part hidden">
                            {% for item in allow_versions %}

                                <a class="one_item_documentation_switcher_content_part" href="{% url 'docs_version_page' item.url %}" data-title="{{ item.name }}">
                                    {{ item.name }}
                                </a>

                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="tree_documentation_container">
                    {% for name, obj in doc_tree.items %}
                    	<div class="tree_documentation_container_first_level">
                            <div class="tree_documentation_container_first_line">
                                {% if obj.children %}
                                	<picture class="tree_documentation_arrow_picture" onclick="showContentPartTree(this)" {% if obj.active %}style="rotate: 180deg;"{% endif %}>
                                        <source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
                                        <img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                                    </picture>
                                {% endif %}
                                <a class="tree_documentation_container_first_level_txt {% if not obj.children %}margin {% endif %}{% if cur_article.url == obj.url %}chose{% endif %}" href="{% url 'docs_art_page' cur_version.url obj.url %}">
                                    {{ name }}
                                </a>
                            </div>
                            {% if obj.children %}
                                <div class="content_part_tree_documentation_container {% if not obj.active %}hidden{% endif %}">
                                    {% for name, obj in obj.children.items %}

                                        <div class="tree_documentation_container_second_level">
                                            <div class="tree_documentation_container_first_line">
                                                {% if obj.children %}
                                                    <picture class="tree_documentation_arrow_picture" onclick="showContentPartTree(this)" {% if obj.active %}style="rotate: 180deg;"{% endif %}>
                                                        <source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
                                                        <img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                                                    </picture>
                                                {% endif %}
                                                <a class="tree_documentation_container_second_level_txt {% if not obj.children %}margin {% endif %}{% if cur_article.url == obj.url %}chose{% endif %}" href="{% url 'docs_art_page' cur_version.url obj.url %}">
                                                    {{ name }}
                                                </a>
                                            </div>
                                            {% if obj.children %}
                                                <div class="content_part_tree_documentation_container min_padding {% if not obj.active %}hidden{% endif %}">
                                                    <div class="elements_third_level_content_part_tree">
                                                    {% for name,obj in obj.children.items %}
                                                        <a class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" href="{% url 'docs_art_page' cur_version.url obj.url %}">
                                                            {{ name }}
                                                        </a>
                                                    {% endfor %}
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>

                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="content_part_tree_els">
{#                <div class="name_article_tree">#}
{#                    #}
{#                </div>#}
{#                <div class="description_article_tree">#}
{#                    {{ cur_article.text }}#}
{#                </div>#}
                {{ cur_article.text|safe }}
                <div class="controls_content_part_tree_els">
                    <div class="control_content_part_tree_el left">
                        {% if prev_article %}
                            <picture class="arrow_control_content_part_tree_el_picture">
                                <source srcset="{% static "images/arrow_control_part_tree_el.svg" %}">
                                <img class="arrow_control_content_part_tree_el_img" src="{% static "images/arrow_control_part_tree_el.svg" %}" alt="">
                            </picture>

                            <div class="txt_control_content_part_tree_el" data-url="{% url 'docs_art_page' cur_version.url prev_article.url %}" onclick="changeCurArticle(this)">
                                {% trans "Предыдущий" %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="control_content_part_tree_el right">
                        {% if next_article %}
                            <div class="txt_control_content_part_tree_el" data-url="{% url 'docs_art_page' cur_version.url next_article.url %}" onclick="changeCurArticle(this)">
                                {% trans "Следующий" %}
                            </div>
                            <picture class="arrow_control_content_part_tree_el_picture">
                                <source srcset="{% static "images/arrow_control_part_tree_el.svg" %}">
                                <img class="arrow_control_content_part_tree_el_img" src="{% static "images/arrow_control_part_tree_el.svg" %}" alt="">
                            </picture>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}