<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" type="image/x-icon" href="@/static/favicon.ico">
    <link rel="stylesheet" href="@/static/page.css" type="text/css">
    {% include "extras.html" ignore missing %}
  </head>
  <body>
    <nav>
      <a href="@/">Home</a>
      &middot;
      <span class="dropdown">
	<a href="#">Lessons</a>
	<span id="nav-lessons" class="dropdown-content">
{% for key in lessons %}
          <a href="{{key}}">{{lessons[key]}}</a>
{% endfor %}
	</span>
      </span>
      &middot;
      <span class="dropdown">
        <a href="#">Appendices</a>
        <span id="nav-extras" class="dropdown-content">
{% for key in appendices %}
          <a href="{{key}}">{{appendices[key]}}</a>
{% endfor %}
        </span>
      </span>
    </nav>
    <main>
{{content}}
    </main>
    <footer>
      <a href="@/">{{title}}</a>
      copyright &copy; 2025
      <a href="@/#acknowledgments">the authors</a>
    </footer>
  </body>
</html>
