{% extends "layout.html" %}

{% block title %}Table of contents{% endblock %}

{% block head %}
  <script type="text/javascript" src="/static/js/toggle.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-bonsai@2.1.2/jquery.bonsai.css" integrity="sha384-U1uEPfU2/stCtBJ6oZS4XLX35g0MD+BZTTskUun0Vhv64RLEaTUXtcpxGScTbkUP" crossorigin="anonymous">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-bonsai@2.1.2/jquery.bonsai.min.js" integrity="sha384-ZKch/OmPYYZT/9GpxSgMqUIDdBjwYYuJ3+CfQytRQElwdBsCMJkEmcsynJlFlsCS" crossorigin="anonymous"></script>
{% endblock %}

{% block hamburger %}
  <div class="interaction"></div>
{% endblock %}

{% block breadcrumb %}
{% endblock %}

{% block body %}
  <h2>Table of contents</h2>

  <ul id="toc" class="tree">
    {% for part in parts %}
      <li id="{{ part.tag }}" class="expanded">
        <a class="header-offset" id="{{ part.label }}"></a>
        <strong><a href="/tag/{{ part.tag }}">Part <span data-tag="{{ part.tag }}">{{ part.ref }}</span></a>: {{ part.name }}</strong>

        {#
        {% set filename = part.label.split("-part-")[1] %}
        <a href="/download/part-{{ filename }}.pdf" class="pdf-link">pdf</a>
        #}

        <ul>
          {% for chapter in part.chapters %}
            <li><p><a href="/tag/{{ chapter.tag }}">Chapter <span data-tag="{{ chapter.tag }}">{{ chapter.ref }}</span></a>: {{ chapter.name }}
            {% set filename = chapter.label.split("-section-")[0] %}</p>
            <a href="/download/{{ filename }}.pdf" class="pdf-link">pdf</a>
          {% endfor %}
        </ul>
        <hr class="my-1">
    {% endfor %}
  </ul>
  <script type="text/javascript">
$("ul.tree").bonsai({
  addExpandAll: true,
});

var state = localStorage.getItem("bonsai-toc");
if (state !== null) {
  $("ul#toc").data("bonsai").restore(JSON.parse(state));
}

$("ul#toc").click(function() {
  var bonsai = $(this).data("bonsai");
  var state = bonsai.serialize();
  localStorage.setItem("bonsai-toc", JSON.stringify(state));
});

$("div.expand-all").click(function() {
  $("ul#toc").click();
});
  </script>
{% endblock %}

{% block sidebar %}
  <div class="interaction">
  </div>

  <hr>

  <ul>
  {% for part in parts %}
    <li><a class="sidebar-link" data-for="{{ part.tag }}" href="#{{ part.label }}">Part <span data-tag="{{ part.tag }}">{{ part.ref }}</span></a>: {{ part.name }}
  {% endfor %}
  <script type="text/javascript">
$("a.sidebar-link").click(function() {
  var bonsai = $("ul#toc").data("bonsai");
  bonsai.expand($("li#" + $(this).data("for")));
});
  </script>
  </ul>

  <hr>

  <a href="/download/book.pdf">Download the book</a>
{% endblock %}

