{% load wagtailcore_tags nav_tags %}
{% with l2_pages=parent|sorted_children %}

{# Sidebar L2 #}
<div class="dn-mega__l2-sidebar">
  {% for l2 in l2_pages %}
    {% with l3_pages=l2|sorted_children %}
    <div class="dn-mega__l2-row{% if forloop.first %} dn-mega__l2-row--active{% endif %}"
         {% if l3_pages and depth != '1' %}data-l3="dn-l3-{{ l2.id }}" onmouseenter="dnShowL3Hover(this,'dn-l3-{{ l2.id }}')"{% endif %}>
      <a href="{% pageurl l2 %}" class="dn-mega__l2-link"
         {% if l3_pages and depth != '1' %}onfocus="dnShowL3(this.closest('.dn-mega__l2-row'), 'dn-l3-{{ l2.id }}')"{% endif %}>{{ l2.title }}</a>
      {% if l3_pages and depth != '1' %}<span class="dn-mega__l2-arr" aria-hidden="true">›</span>{% endif %}
    </div>
    {% endwith %}
  {% endfor %}
</div>

{# Área L3: omitida se depth=1 #}
{% if depth != '1' %}
<div class="dn-mega__l3-area" onmouseenter="dnCancelL3Hover()">
  {% for l2 in l2_pages %}
    {% with l3_pages=l2|sorted_children %}
      {% if l3_pages %}
        <div id="dn-l3-{{ l2.id }}"
             class="dn-mega__l3-panel{% if forloop.first %} dn-mega__l3-panel--visible{% endif %}">

          {# Sidebar L3 #}
          <div class="dn-mega__l3-sidebar">
            {% for l3 in l3_pages %}
              {% with l4_pages=l3|sorted_children %}
              <div class="dn-mega__l3-row{% if forloop.first %} dn-mega__l3-row--active{% endif %}"
                   {% if l4_pages and depth != '2' %}data-l4="dn-l4-{{ l3.id }}" onmouseenter="dnShowL4Hover(this,'dn-l4-{{ l3.id }}')"{% endif %}>
                <a href="{% pageurl l3 %}" class="dn-mega__l3-link"
                   {% if l4_pages and depth != '2' %}onfocus="dnShowL4(this.closest('.dn-mega__l3-row'), 'dn-l4-{{ l3.id }}')"{% endif %}>{{ l3.title }}</a>
                {% if l4_pages and depth != '2' %}<span class="dn-mega__l3-arr" aria-hidden="true">›</span>{% endif %}
              </div>
              {% endwith %}
            {% endfor %}
          </div>

          {# Área L4: omitida se depth=2 #}
          {% if depth != '2' %}
          <div class="dn-mega__l4-area" onmouseenter="dnCancelL4Hover()">
            {% for l3 in l3_pages %}
              {% with l4_pages=l3|sorted_children %}
                {% if l4_pages %}
                  <div id="dn-l4-{{ l3.id }}"
                       class="dn-mega__l4-panel{% if forloop.first %} dn-mega__l4-panel--visible{% endif %}">
                    {% for l4 in l4_pages %}
                      <a href="{% pageurl l4 %}" class="dn-mega__l4-link">{{ l4.title }}</a>
                    {% endfor %}
                  </div>
                {% endif %}
              {% endwith %}
            {% endfor %}
          </div>
          {% endif %}

        </div>
      {% endif %}
    {% endwith %}
  {% endfor %}
</div>
{% endif %}

{% endwith %}