{% for  stage in datas %}

  {% if stage.directory %}
    <div class="">
      {% if stage.foldable %}
      <span class="visibilityButton is-small mr-4" @click="switchVisibility('{{stage.id}}')">+/-</span>
      {% else %}
      <span class="noVisibilityButton is-small mr-4">+/-</span>
      {% endif %}
      <a href="{{ base_dir + '/' + stage.directory.split('/')[-1]+'/documentation.madoc.html' }}">{{ stage.directory.split("/")[-1] }}</a>
    </div>
    <ul id="{{ stage.id }}" class="hiddable">
      {% for file in stage.files %}
        <li class="is-size-7">{{ file[:-3] }}</li>
      {% endfor %}
    </ul>
  {% endif %}

  {% if stage.subdirs %}
  <div style="margin-left:20px;">
    {% with datas=stage.subdirs, base_dir=base_dir + "/" + stage.directory.split('/')[-1] %}
      {% include 'madoc/_recursive_menu.html' %}
    {% endwith %}
  </div>
  {% endif %}

{% endfor %}