{% if page.toc %}<!---->
<div class="block-bg mb-12 flex rounded-lg p-2 text-lg">
  <details>
    <summary class="cursor-pointer py-1 pl-4">
      <span>Table of Contents</span>
    </summary>
    <div class="px-2">
      <ul>
        {% for h1 in page.toc %}
        <li>
          <a class="no-underline hover:underline" href="{{ h1.permalink | safe }}"
            >{{ h1.title }}</a
          >
          {% if h1.children %}
          <ul>
            {% for h2 in h1.children %}
            <li>
              <a class="no-underline hover:underline" href="{{ h2.permalink | safe }}"
                >{{ h2.title }}</a
              >
            </li>
            {% endfor %}
          </ul>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
  </details>
</div>
{% endif %}