{# the variables tree_template and tree_items must be defined before entering #}
{# tree_items is a list of dicts with properties name, url, children #}
{% for child in tree_items %}
  {% if child.children %}
  <li class="node">
    <div class="hitarea">
      {% if child.url %}<a href="{{ child.url }}">{% endif %}
      <span class="folder">{{ child.name }}</span>
      {% if child.url %}</a>{% endif %}
      {% if child.description %}{# show info button if description available #}
      <span class="sidebarbox-action-icon legend-tooltip has_popover"
            data-content="{{ child.description }}"
            data-trigger="click"
            rel="popover"
            title="{{ child.name }}"
      ><i class="icon-info-sign"></i></span>
      {% endif %}
    </div>
    <ul>
      {% with child.children as tree_items %}
        {% include tree_template %}
      {% endwith %}
    </ul>
  </li>
  {% else %}
  <li class="leaf">
    {# No children: it's a leaf. #}
    {% if child.url %}
      <a href="{{ child.url }}"
         class="file">
        {{ child.name }}
      </a>
    {% else %}
      <span class="quiet">{{ child.name }}</span>
    {% endif %}
    {% if child.description %}{# show info button if description available #}
      <span class="sidebarbox-action-icon legend-tooltip has_popover"
            data-content="{{ child.description }}"
            data-trigger="click"
            rel="popover"
            title="{{ child.name }}"
      ><i class="icon-info-sign"></i></span>
    {% endif %}
  </li>
  {% endif %}
{% endfor %}
