{% load village_tags i18n %}
{% translate "Side menu" as side_menu_label %}
<nav role="navigation"
     class="village-sidemenu{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}"
     aria-label="{{ side_menu_label }}"
     id="village-sidemenu"
     data-village-js-sidemenu="true">
  <div class="village-sidemenu__inner">
    <button type="button"
            class="village-sidemenu__btn"
            aria-controls="village-sidemenu-wrapper"
            aria-expanded="false">
      {% translate "In this section" %}
    </button>
    <div class="village-collapse" id="village-sidemenu-wrapper">
      {% if self.title %}
        <{{ self.heading_tag|default:"div" }} class="village-sidemenu__title">{{ self.title }}</{{ self.heading_tag|default:"div" }}>
      {% endif %}
      <ul class="village-sidemenu__list">
        {% for item in self.items %}
          {# Level 1 #}
          <li class="village-sidemenu__item{% if item.is_active %} village-sidemenu__item--active{% endif %}">
            {% if "items" in item %}
              {% with "village-sidemenu-item"|hyphenate:forloop.counter as item_id %}
                <button type="button"
                        class="village-sidemenu__btn"
                        aria-expanded="{% if item.is_active %}true{% else %}false{% endif %}"
                        aria-controls="{{ item_id }}">
                  {{ item.label }}
                </button>
                <div class="village-collapse" id="{{ item_id }}">
                  <ul class="village-sidemenu__list">
                    {% for sub_item in item.items %}
                      <li class="village-sidemenu__item{% if sub_item.is_active %} village-sidemenu__item--active{% endif %}">
                        {% if "items" in sub_item %}
                          {# Level 2 #}
                          {% with "village-sidemenu-item"|hyphenate:forloop.parentloop.counter|hyphenate:forloop.counter as sub_item_id %}
                            <button type="button"
                                    class="village-sidemenu__btn"
                                    aria-expanded="{% if sub_item.is_active %}true{% else %}false{% endif %}"
                                    aria-controls="{{ sub_item_id }}">
                              {{ sub_item.label }}
                            </button>
                            <div class="village-collapse" id="{{ sub_item_id }}">
                              <ul class="village-sidemenu__list">
                                {% for lv3_item in sub_item.items %}
                                  <li class="village-sidemenu__item{% if lv3_item.is_active %} village-sidemenu__item--active{% endif %}">
                                    <a class="village-sidemenu__link"
                                       href="{{ lv3_item.link }}"
                                       target="_self"
                                       {% if lv3_item.is_active %}aria-current="page"{% endif %}>
                                      {{ lv3_item.label }}
                                    </a>
                                  </li>
                                {% endfor %}
                              </ul>
                            </div>
                          {% endwith %}
                        {% else %}
                          <a class="village-sidemenu__link"
                             href="{{ sub_item.link }}"
                             target="_self"
                             {% if sub_item.is_active %}aria-current="page"{% endif %}>{{ sub_item.label }}</a>
                        {% endif %}
                        {# Level 2 #}
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endwith %}
            {% else %}
              <a class="village-sidemenu__link"
                 href="{{ item.link }}"
                 target="_self"
                 {% if item.is_active %}aria-current="page"{% endif %}>{{ item.label }}</a>
            {% endif %}
          </li>
        {% endfor %}
        {# Level 1 #}
      </ul>
    </div>
  </div>
</nav>
