{% macro window(title, close=false) %}
<div class="window">
    <div class="title-bar">
    <div class="title-bar-text">{{title | safe}}</div>
    <div class="title-bar-controls">
        {% if close %}
        <a href="{{ close }}"><button aria-label="Close"></button></a>
        {% endif %}
    </div>
    </div>
    <div class="window-body">
{% endmacro window %}

{% macro endwindow() %}
    </div>
</div>
{% endmacro endwindow %}


{% macro soaosed(text) %}
<span class="flip" data-title="{{ text }}"
  ><span class="hidden-selectable">{{ text }}</span></span
>
{% endmacro soaosed %}

{% macro treeview(height="auto") %}
<div class="sunken-panel">
  <ul class="tree-view" style="height: {{height}}; overflow-y: scroll">
{% endmacro treeview %}

{% macro endtreeview() %}
  </ul>
</div>
{% endmacro endtreeview %}

{% macro subtree(name, url="", open=false, blank=false) %}
<li>
  <details {% if open %}open{% endif %}>
    <summary>
    {% if url %}<a href="{{ url }}" {% if blank %}target="_blank"{% endif %}>{% else %}<b>{% endif %}
    {{ name | safe }}
    {% if url %}</a>{% else %}</b>{% endif %}
    </summary>
    <ul>
{% endmacro subtree %}

{% macro endsubtree() %}
    </ul>
  </details>
</li>
{% endmacro endsubtree %}

{% macro treelink(text, url="", blank=false, wip=false, wip_tooltip="") %}
<li>
  <a href="{{ url }}" {% if blank %} target="_blank" {% endif %} {% if rel %} rel="{{ rel }}" {% endif %}>{{ text | safe }}</a>
  {% if wip %}
  <span {% if wip_tooltip %}data-tooltip="{{ wip_tooltip }}" {% endif %}>
    <span class="under-construction unselectable">⚠</span>
  </span>
  {% endif %}
</li>
{% endmacro treelink %}