{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('nav navbar-nav') }}>
      {% else %}
        <ul class="sub-menu toggle-menu">
        {% endif %}
        {% for item in items %}
          {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail is-active',
        ]
          %}
          {% if (loop.index == "1") and (menu_level == 0) %}
            <li{{ item.attributes.addClass(classes) }}>
              <a href="{{ item.url }}" class="home-icon list-none"><img src="{{ file_url('themes/custom/jkyog/images/' ~ item.title|lower ~ '.png') }}" alt="{{ item.title }}" title="{{ item.title }}" /></a>
            </li>
          {% else %}
            <li{{ item.attributes.addClass(classes) }}>
              {% if item.below %}
                <a href="{{ item.url }}" class="at-drop-down">{{ item.title }}</a>
                <span class="dropdown-cls caret hidden-nav"></span>
                {{ menus.sub_menu_links(item.below, attributes, menu_level + 1) }}
              {% else %}  
                {{ link(item.title, item.url) }}
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}
  {% endmacro %}
  
  {% macro sub_menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('nav navbar-nav') }}>
      {% else %}
        <ul class="sub-menu toggle-menu">
        {% endif %}
        {% for item in items %}
          {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail is-active',
        ]
          %}
          {% if (loop.index == "1") and (menu_level == 0) %}
            <li{{ item.attributes.addClass(classes) }}>
              <a href="{{ item.url }}" class="home-icon list-none"><img src="{{ file_url('themes/custom/jkyog/images/' ~ item.title|lower ~ '.png') }}" alt="{{ item.title }}" title="{{ item.title }}" /></a>
            </li>
          {% else %}
            <li{{ item.attributes.addClass(classes) }}>
              {% if item.below %}
                <a href="{{ item.url }}" class="at-drop-down">{{ item.title }}</a>
                <span class="dropdown-sub-cls caret hidden-nav"></span>
                {{ menus.submenu_child_links(item.below, attributes, menu_level + 1) }}
              {% else %}  
                {{ link(item.title, item.url) }}
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}
  {% endmacro %}
  
  {% macro submenu_child_links(items, attributes, menu_level) %}
  {% import _self as menus %}
      <ul class="child toggle-sub-menu">
        {% for item in items %}
          <li>
            <a target="{{item.url.getOption("attributes").target}}" href="{{item.url}}">{{item.title}}</a>
			{{ menus.submenu_child_links(item.below, attributes, menu_level+1) }}
          </li>
        {% endfor %}
      </ul>
{% endmacro %}