{%- set toc_mode = config.theme.toc %}
{%- if toc_mode and toc_mode != 'hidden' and page and page.toc %}
  {%- set entries = page.toc | list %}
  {%- if entries | length == 1 and entries[0].children %}
    {%- set entries = entries[0].children | list %}
  {%- endif %}

  {%- if entries | length > 1 %}
    {%- set toc_label = gettext('Table of contents') %}
    {%- if toc_mode == 'collapsed' %}
      <details class="primer-toc">
        <summary class="primer-toc-summary">{{ toc_label }}</summary>
        <nav aria-label="{{ toc_label }}">
          {% include "partials/toc-list.html" %}
        </nav>
      </details>
    {%- else %}
      <section class="primer-toc{{ ' primer-toc-in-rail' if toc_mode != 'expanded' }}"
               {{- ' data-primer-toc-collapsed' if toc_mode != 'expanded' }}>
        <div class="primer-toc-heading" id="primer-toc-label">{{ toc_label }}</div>
        <nav aria-labelledby="primer-toc-label">
          {% include "partials/toc-list.html" %}
        </nav>
      </section>
    {%- endif %}

    <script>
      ;(function () {
        var toc = document.querySelector('.primer-toc')
        if (!toc) return
        if (toc.classList.contains('primer-toc-in-rail') && window.matchMedia('(min-width: 1280px)').matches) return

        // Under the title, and under the metadata line when there is one --
        // partials/metadata.html has already put that there, the script that
        // moves it running earlier in the document than this one.
        var anchor = document.querySelector('.markdown-body h1')
        var metadata = anchor && anchor.nextElementSibling
        if (metadata && metadata.classList.contains('primer-metadata')) anchor = metadata
        if (anchor) anchor.insertAdjacentElement('afterend', toc)

        // Only `auto` arrives closed and needs something to open it. `expanded`
        // asked for an open list, and `collapsed` is a <details> already.
        if (!toc.hasAttribute('data-primer-toc-collapsed')) return

        var heading = toc.querySelector(':scope > .primer-toc-heading')
        var nav = toc.querySelector(':scope > nav')
        if (!heading || !nav) return

        // The same shape the `collapsed` mode renders, built as a button rather
        // than a <summary> because the outline is a <section>: turning it into a
        // <details> would move the list out of the element it was just put in.
        var button = document.createElement('button')
        button.type = 'button'
        button.className = 'primer-toc-summary primer-toc-toggle'
        button.setAttribute('aria-expanded', 'false')
        button.textContent = heading.textContent.trim()

        // The nav is named by this text through aria-labelledby, so the id has
        // to come along with it; aria-controls then says which list it opens.
        button.id = heading.id
        if (!nav.id) nav.id = 'primer-toc-nav'
        button.setAttribute('aria-controls', nav.id)

        button.addEventListener('click', function () {
          var collapsed = toc.hasAttribute('data-primer-toc-collapsed')

          if (collapsed) {
            toc.removeAttribute('data-primer-toc-collapsed')
          } else {
            toc.setAttribute('data-primer-toc-collapsed', '')
          }
          button.setAttribute('aria-expanded', collapsed ? 'true' : 'false')
        })

        heading.replaceWith(button)
      })()
    </script>
  {%- endif %}
{%- endif %}