<!DOCTYPE html>
<html lang="{{{lang}}}">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="crowbook">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="{{{author_raw}}}">
    {{{favicon}}}
    <title>{{title_raw}}</title>
    <style type = "text/css">
      {{{style}}}
    </style>
    <style type = "text/css" media = "print">
      {{{print_style}}}
    </style>
    {{#highlight_code}}
    <style>
      {{{highlight_css}}}
    </style>
    <script src = "{{{highlight_js}}}"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>
    {{/highlight_code}}
   <script>
{{{script}}}
   </script>


  </head>
  <body>
    {{{json_data}}}
    {{#has_toc}}
    <nav id = "nav">
      {{#one_chapter}}
      <div id = "nav-container">
        <div id="toolbar">
          <img id="book-button" alt="Display mode"
               title = "{{{loc_display_all}}}"
               src="{{{book_svg}}}"
               onclick="javascript:switchAll()">
        </div>
      </div>
      {{/one_chapter}}
      <div id = "nav-title">
        <h2><a href = "#link-0">{{{title}}}</a></h2>
      </div>
      {{{toc}}}
    </nav>
    {{/has_toc}}

    <div id = "content">
      {{{header}}}
      <div id = "page">
        <header>

          <div id = "menu">
	    {{#has_toc}}
            <img id = "menu-button" onclick="toggle();"
                 src="{{{menu_svg}}}"
                 alt = "{{{loc_toc}}}" title = "{{{loc_toc}}}" />
            {{/has_toc}}
          </div>
	  <h2 class="author">{{{author}}}</h2>
          <h1 id = "link-0" class="title" >{{{title}}}</h1>
	  {{#has_subtitle}}<h2 class = "subtitle">{{{subtitle}}}</h2>{{/has_subtitle}}
	  {{#has_autograph}}
	  <div id = "autograph">
	    {{{autograph}}}
	  </div>
	  {{/has_autograph}}
        </header>

        {{{content}}}

      </div>
      {{{footer}}}
    </div>
  </body>
</html>
