{% macro tree(item, options) %}
  {% import _self as menu_macros %}

  {% set drag_handle %}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path fill="#212B36"
            d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2m0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8m0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14m6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6m0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8m0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14"/>
    </svg>{% endset %}

  {% if item.parent is null %}
    {% set baseUrl = 'test' %}
    <ul class="menu-tree"
        data-menu-item-id="{{ item.id }}"
        data-menu-id="{{ item.menu.id }}"
        data-update-url="{{ admin_path(item, 'update') }}"
        data-create-url="{{ admin_path(item, 'create') }}"
        data-delete-url="{{ admin_path(item, 'delete') }}"
        data-reorder-url="{{ admin_path(item, 'reorder') }}"
    >
      {% if item.children is not empty %}
        {% for subItem in item.children %}
          {{ menu_macros.tree(subItem, {first: loop.first, last: loop.last}) }}
        {%- endfor -%}
      {% endif %}
    </ul>
  {% else %}
    {% set liClasses = '' %}
    {% if item.children is not empty %}
      {% set liClasses = liClasses ~ ' has-children' %}
      {% set liClasses = liClasses ~ ' opened' %}
    {% endif %}
    <li data-menu-item-id="{{ item.id }}" class="{{ liClasses }}">
      <div class="item-container">
        <a class="caret"><i class="fa"></i></a>
        <span class="drag-handle">{{ drag_handle }}</span>
        <span class="label">{{ item.currentTranslation|default({label: '[emptytrans]'}).label|striptags }}</span>
        <div class="actions">
          <button class="btn btn-sm btn-primary" data-action="move-down"><i class="fa fa-arrow-down"></i></button>
          <button class="btn btn-sm btn-primary" data-action="move-up"><i class="fa fa-arrow-up"></i></button>
          <button class="btn btn-sm btn-primary" data-action="add-child"><i class="fa fa-plus"></i></button>
          <button class="btn btn-sm btn-primary" data-action="update"><i class="fa fa-edit"></i></button>
          <button class="btn btn-sm btn-danger" data-action="delete"><i class="fa fa-remove"></i></button>
        </div>
      </div>
      <ul class="children">
        {% if item.children is not empty %}
          {% for subItem in item.children %}
            {{ menu_macros.tree(subItem, {first: loop.first, last: loop.last}) }}
          {%- endfor -%}
        {% endif %}
      </ul>
    </li>
  {% endif %}
{% endmacro %}