{% from "macros/nswdesignsystem/_navigation_link.html" import link with context  %}
{% from "macros/form/attributes.html" import attributes %}

{% macro nav(details, path) %}
    <li {% if details.attrs %} {{ attributes(details.attrs) }} {% endif %}>
        {{ caller("nav", details) if caller is defined else link(details, path) }}

        {% if details.subnav %}
            <div class="nsw-main-nav__sub-nav" id="sub-nav-{{ path | join("-") }}"
                 role="region" aria-label="{{ details.label }} Submenu">
                <div class="nsw-main-nav__header">
                    <button class="nsw-icon-button nsw-icon-button--flex js-close-sub-nav"
                            type="button" aria-expanded="true" aria-controls="sub-nav-{{ path | join("-") }}">
                        <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_left</span>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                    </button>

                    <button class="nsw-icon-button js-close-nav" type="button" aria-expanded="true">
                        <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
                        <span class="sr-only">Close Menu</span>
                    </button>
                </div>

                <div class="nsw-main-nav__title">
                    <a href="{{ details.href }}">
                        <span>{{ details.subnav.label or details.label }}</span>
                        <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">east</span>
                    </a>
                </div>

                {% if details.subnav.description or details.description %}
                    <div class="nsw-main-nav__description">
                        {{ details.subnav.description or details.description }}
                    </div>
                {% endif %}

                <ul class="nsw-main-nav__sub-list">
                    {% for child in details.subnav.children %}
                        {{ nav(child, path=path + [loop.index0]) }}
                    {% endfor %}
                </ul>
            </div>

        {% endif %}
    </li>
{% endmacro %}