{% load juss_menus %}
{% for i in menus %}
  {% if i|has_menu_perms:user %}
    {% if i.get_children %}
      <li class="is-toggle">
	<a class="is-flex is-align-items-center">
	  <span class="icon mr-2">
	    <i data-feather="{{i.icon|default:"square"}}" width="18" height="18"></i>
	  </span>
	  <span class="is-flex-grow-1">{{i.name}}</span>
	  <i data-feather="chevron-right" width="18" height="18" style="transform:rotate(90deg);transition:all 0.1s"></i>
	</a>
	<ul>
	  {% for ii in i.get_children %}
	    {% if ii|has_menu_perms:user %}	
	      <li {% if ii.url|active_menu:request.path %}class="is-active"{% endif %}>
		<a class="pl-6" href="{{ii.url}}">{{ii.name}}</a>
	      </li>
	    {% endif %}
	  {% endfor %}
	</ul>
      </li>
    {% else %}
      <li {% if i.url|active_menu:request.path %}class="is-active"{% endif %}>
	<a href="{{i.url}}" class="is-flex is-align-items-center">
	  <span class="icon mr-2">
	    <i data-feather="{{i.icon|default:"square"}}" width="18" height="18"></i>
	  </span>
	  <span>{{i.name}}</span>
	</a>
      </li>
    {% endif %}
  {% endif %}
{% endfor %}