{% extends "layout/public.j2" %}
{% block nav %}
<ul class="navbar-nav mr-auto">
    {% for menu_item in menu %}
    {% if 'children' in menu_item %}
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{ menu_item['title'] }}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="/{{ menu_item['url'] }}">{{ menu_item['title'] }}</a>
            {%- for child_menu_item in menu_item['children'] recursive -%}
            <a class="dropdown-item" href="/{{ child_menu_item['url'] }}">{{ '> ' * (loop.depth - 1) }}{{ child_menu_item['title'] }}</a>
            {{ loop(child_menu_item['children']) }}
            {%- endfor -%}
        </div>
    </li>
    {% else %}
    <li class="nav-item">
        <a class="nav-link" href="/{{ menu_item['url'] }}">{{ menu_item['title'] }}</a>
    </li>
    {% endif %}
    {% endfor %}
</ul>
<ul class="navbar-nav">
	<li class="nav-item text-nowrap">
          <a class="nav-link" href="/backend">Backend</a>
    </li>
    <li class="nav-item text-nowrap">
          <a class="nav-link" href="/logout">Logout</a>
    </li>
</ul>
{% endblock %}