{% load menu_tags thumbnail util_tags %}

<div class="navigation__main" data-active="{% spaceless %}
{% for child in children %}{% if child.selected or child.ancestor %}{{ forloop.counter0 }}{% endif %}{% endfor %}
{% endspaceless %}">
    {% for n in 'nn' %}
        <div class="{% cycle 'navigation__images' 'navigation__list' %}">
            {% for child in children|slice:'3' %}
                {% thumbnail child.id|page_image 800x1200 box=child.id|page_image_cropping crop as thumb %}
                <div class="navigation__item data_id_{{ forloop.counter0 }}" data-id="{{ forloop.counter0 }}">
                    {% if forloop.parentloop.first %}
                        <div class="navigation__item__background"
                             style="background-image: url('{{ thumb.url|media_bridge }}');"></div>
                    {% else %}
                        <a href="#" class="navigation__item__title"
                           data-id="{{ forloop.counter0 }}">
                            <span>
                                {% include 'project/assets/arrow-left.svg' %}
                                {{ child.get_menu_title }}
                            </span>
                        </a>
                        {% if child.children %}
                            <ul class="navigation__item__list">
                                {% for grandchild in child.children %}
                                    <li class="{% if grandchild.selected %}selected{% endif %}">
                                        <a href="{{ grandchild.attr.redirect_url|default:grandchild.get_absolute_url }}">
                                            {% include 'project/assets/arrow-right.svg' %}
                                            {{ grandchild.get_menu_title }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</div>