{%- if page.toc %}
<nav class="md-toc" aria-label="Table of contents">
  <div class="md-toc__title">On this page</div>
  <ul class="md-toc__list" id="toc-list">
    {%- for toc_item in page.toc %}
    <li class="md-toc__item md-toc__item--h2">
      <a href="{{ toc_item.url }}" class="md-toc__link">{{ toc_item.title }}</a>
      {%- if toc_item.children %}
      {%- for child in toc_item.children %}
      <li class="md-toc__item md-toc__item--h3">
        <a href="{{ child.url }}" class="md-toc__link">{{ child.title }}</a>
        {%- if child.children %}
        {%- for grandchild in child.children %}
        <li class="md-toc__item md-toc__item--h4">
          <a href="{{ grandchild.url }}" class="md-toc__link">{{ grandchild.title }}</a>
        </li>
        {%- endfor %}
        {%- endif %}
      </li>
      {%- endfor %}
      {%- endif %}
    </li>
    {%- endfor %}
  </ul>
</nav>
{%- else %}
<div class="md-toc" aria-hidden="true"></div>
{%- endif %}