{% assign itemCount = tocContents.count %}
{% if itemCount > 1 %}
{% if itemCount > 10 %}
  {% assign collapsible = true %}
{% endif -%}

{% if collapsible %}
  {% assign topStyle = ' toc-collapsible toc-collapsed' %}
{% else %}
  {% assign topStyle = '' %}
{% endif -%}
<div id="site-toc--inline" class="site-toc{{topStyle}}">
  <header class="site-toc__title">
    Contents
    {% if collapsible %}
      <span class="site-toc--inline__toggle toc-toggle-down"><i class="material-symbols">keyboard_arrow_down</i></span>
      <span class="site-toc--inline__toggle toc-toggle-up"><i class="material-symbols">keyboard_arrow_up</i></span>
    {% endif -%}
  </header>
  <ul class="section-nav">
    {% for topLevel in tocContents.toc %}
    <li class="toc-entry">
      <a href="{{topLevel.id}}">{{topLevel.text}}</a>
      {% if topLevel.children and topLevel.children.size > 0 %}
      <ul>
        {% for child in topLevel.children %}
        <li class="toc-entry">
          <a href="{{child.id}}">{{child.text}}</a>
        </li>
        {% endfor -%}
      </ul>
      {% endif -%}
    </li>
    {% endfor -%}
  </ul>
  {% if collapsible %}
    <span class="site-toc--inline__toggle toc-toggle-more-items"><i class="material-symbols">more_horiz</i></span>
  {% endif -%}
</div>
{% endif -%}