  <div class="toc_bar">
    <div class="toc_menu">
      <div class="toc_menu-btn btn-toggle" id="toc_toggle"></div>
      <div class="toc_menu-spacer"></div>
      <a
        class="toc_menu-btn btn-document"
        title="Go to Document view"
        href="{{document.meta.get_root_path_prefix()}}/{{document.meta.get_html_doc_link()}}">
        DOC
      </a>
      <a
        class="toc_menu-btn btn-table"
        title="Go to Table view"
        href="{{document.meta.get_root_path_prefix()}}/{{document.meta.get_html_table_link()}}">
        TBL
      </a>
      <a
        class="toc_menu-btn btn-traceability"
        title="Go to Traceability view"
        href="{{document.meta.get_root_path_prefix()}}/{{document.meta.get_html_traceability_link()}}">
        TR
      </a>
      <a
        class="toc_menu-btn btn-deep-traceability"
        title="Go to Deep Traceability view"
        href="{{document.meta.get_root_path_prefix()}}/{{document.meta.get_html_deep_traceability_link()}}">
        DTR
      </a>
    </div>

  </div>

  <!-- <div id="toc_toggle" class="toc_toggle"></div> -->

  <header class="toc_header">
    <a class="link-back-to-index" href="{{document.meta.get_root_path_prefix()}}/index.html">Back to Index</a>
    <div class="toc_title">Table of Contents</div>
  </header>

  <div class="toc_container">

    <ul class="toc_list">
    {%- for section in document_iterator.table_of_contents() -%}
      <li>
        <a href="#{{ link_renderer.render(section) }}">
          <span class="section-number">{{ section.context.title_number_string }}</span>
          {%- if section.is_requirement -%}
            {{ section.title if section.title else (section.uid if section.uid else '[ no title ]') }}
          {%- else -%}
            {{ section.title if section.title else '[ no title ]' }}
          {%- endif -%}
        </a>

      {%- if not loop.last -%}
        {%- if loop.nextitem.ng_level > section.ng_level -%}
          <ul>
        {%- elif loop.nextitem.ng_level < section.ng_level -%}
            </li>
          {%- for x in range(0, section.ng_level - loop.nextitem.ng_level) -%}
            </ul>
            </li>
          {%- endfor -%}
        {%- else -%}
          </li>
        {%- endif -%}
      {%- else -%}
        </li>
        {%- for x in range(0, section.ng_level - 1) -%}
            </ul>
            </li>
          {%- endfor -%}
        </ul>
      {%- endif -%}
    {%- endfor %}

  </div>
