{# def toc, page #}

{% macro render_page(url, title) %}
{% if url != "/" -%}
<div class="page {{ 'active' if page.url == url else '' }}">
  <a href="{{ url }}#">{{ title }}</a>
</div>
{%- endif %}
{% endmacro %}


{% macro render_collapsable(title, children) %}
<details open>
  {% if title %}<summary>{{ title }}</summary>{% endif %}
  {{ render_children(children) }}
</details>
{% endmacro %}


{% macro render_section(title, children) %}
<section open>
  {% if title %}<h2>{{ title }}</h2>{% endif %}
  {{ render_children(children) }}
</section>
{% endmacro %}


{% macro render_children(children, collapsable=True) %}
  {%- for url, title, sub_children in children %}
    {% if sub_children -%}
      {% if collapsable -%}
        {{ render_collapsable(title, sub_children) }}
      {%- else -%}
        {{ render_section(title, sub_children) }}
      {%- endif %}
    {%- else -%}
      {{ render_page(url, title) }}
    {%- endif %}
  {%- endfor %}
{% endmacro %}


<div {{ attrs.render(class="cd-toc", data_component="Toc") }}>
  {{ render_children(toc, collapsable=False) }}
</div>