    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Runestone / PreTeXt{% block title %}{% endblock %}</title>
        <!-- meta -->
        <meta name="description" content="Runestone Library listing of all books" />
        <meta name="author" content="Runestone Academy LTD" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <!-- provide search engines with canonical link -->
        <link rel="canonical" href="https://runestone.academy/ns/books/index" />
        <!-- styles -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        />
        <link
            href="/ns/staticAssets/main.css"	  
            rel="stylesheet"
            media="screen"
        />
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        {% block css %}{% endblock %}
    </head>

    <body>
        <nav class="navbar navbar-expand-sm sticky-top navbar-light bg-light">
        <!-- logo -- back to xxx  -- create course                    user scratch help -->
        <a class="navbar-brand" href="https://runestone.academy"><img src="/ns/staticAssets/RAIcon.png" height="30px"/></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="/ns/books/published/{{course}}/index.html">Back to {{course}} <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/runestone/designer/index">Create Course</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="https://blog.runestone.academy">Runestone News</a>
                </li>
              {% block navitems %} {% endblock %}
            </ul>
            <div class="nav-item dropdown mr-lg-2">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="material-icons">account_circle</i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                  {% if user %}
                  <span class="dropdown-item">logged in: {{user}}</span>
                  <div class="dropdown-divider"></div>
                  {% endif %}
                  <a class="dropdown-item" href="/runestone/assignments/chooseAssignment">Assignments</a>
                  <a class="dropdown-item" href="/runestone/assignments/practice">Practice</a>
                  <a class="dropdown-item" href="/runestone/peer/student.html">Peer Instruction (Student)</a>
                  <a class="dropdown-item" href="/runestone/dashboard/studentreport">Proogress Page</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="/runestone/default/courses">Change Course</a>
                  <div class="dropdown-divider"></div>
                  {% if is_instructor %}
                  <a class="dropdown-item" href="/runestone/admin/index">Instructor's Page</a>
                  <a class="dropdown-item" href="/runestone/peer/instructor.html">Peer Instruction (Instructor)</a>
                  <a class="dropdown-item" href="https://author.runestone.academy'">Author Tools</a>
                  <a class="dropdown-item" href="/runestone/admin/manage_exercises">Editorial Page</a>
                  <div class="dropdown-divider"></div>
                  {% endif %}
                  <a class="dropdown-item" href="/runestone/default/user/profile">Edit Profile</a>
                  <a class="dropdown-item" href="/runestone/default/user/change_password">Change Password</a>
                  <a class="dropdown-item" href="/runestone/default/user/logout">Log Out</a>
                </div>
              </li>
          </div>
          <div class="nav-item dropdown mr-lg-2">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="material-icons">help</i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="https://blog.runestone.academy/pages/faq.html">FAQ</a>
                    <a class="dropdown-item" href="/ns/books/published/instructorguide/frontmatter-1.html?mode=browsing">Instructors Guide</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="https://blog.runestone.academy/pages/about.html">About Runestone</a>
                    <a class="dropdown-item" href="/runestone/default/reportabug">Report a Problem</a>
                  </div>
                </li>
            </div>
        </nav>
        <div class="container">
            <!-- child template -->
            {% block content %}{% endblock %}
        </div>

        {% include 'footer.html' %}

        <!-- scripts -->
        <script
 	  src="/static/main.js"
          type="text/javascript"
        ></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
        {% block js %}{% endblock %}
    </body>
</html>
