<!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 slug, title in lessons %}
          <a href="@/{{slug}}/">{{title}}</a>
{% endfor %}
	</span>
      </span>
      &middot;
      <span class="dropdown">
        <a href="#">Appendices</a>
        <span id="nav-appendices" class="dropdown-content">
{% for slug, title in appendices %}
          <a href="@/{{slug}}/">{{title}}</a>
{% endfor %}
        </span>
      </span>
    </nav>
    <main>
{{content}}
    </main>
    <footer>
      <div class="row">
	<div class="col-3 left">
	  {% if prev[0] %}&#8656; <a href="@/{{prev[0]}}/">{{prev[1]}}</a>{% endif %}
	</div>
	<div class="col-6 center">
	  <a href="@/">{{title}}</a>
	  &copy; 2025
	  <a href="@/#acknowledgments">the authors</a>
	</div>
	<div class="col-3 right">
	  {% if next[0] %}<a href="@/{{next[0]}}/">{{next[1]}}</a> &#8658;{% endif %}
	</div>
      </div>
    </footer>
  </body>
</html>
