{{template "header.html" .S}}



<div class="row">

    
  {{if .Chapters}}
  <div class="col-md-4">
    <nav id="index" class="navbar navbar-expand-md navbar-light bg-light flex-column">
      <div class="row">
        <div class="col d-flex justify-content-start">
  	      <a class="navbar-brand" href="#">Index</a>
        </div>
        <div class="d-block d-md-none col d-flex justify-content-end">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#indexContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
      <div class="collapse navbar-collapse" id="indexContent">
        {{range .Chapters}}
          {{range .In}}
            <nav class="nav nav-pills flex-column">
          {{end}}
              <a class="nav-link ms-{{mul 2 .Depth}}{{if .Active}} active{{end}}" href="{{.Link}}">{{.Label}}</a>
          {{range .Out}}
            </nav>
          {{end}}
        {{end}}
      </div>
    </nav>
  </div>
  {{end}}

  <div class="col">
    {{if not .Book.Active}}
      <div class="text-center">
    	<p class="badge bg-warning">waiting for moderation</p>
      </div>
    {{end}}
    <nav class="d-flex justify-content-center" arial-label="Book navigation">
      <ul class="pagination">
    	<li class="page-item {{if not .Prev}}disabled{{end}}">
    	  <a class="page-link" href="{{.Prev}}">&larr; Prev</a>
    	</li>
    	<li class="page-item">
    	  <a class="page-link" href="{{.Back}}">Back</a>
    	</li>
    	<li class="page-item {{if not .Next}}disabled{{end}}">
    	  <a class="page-link" href="{{.Next}}">Next &rarr;</a>
    	</li>
      </ul>
    </nav>
    
    <iframe id="bookContent" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
    
    <nav class="d-flex justify-content-center" arial-label="Book navigation">
      <ul class="pagination">
    	<li class="page-item {{if not .Prev}}disabled{{end}}">
    	  <a class="page-link" href="{{.Prev}}">&larr; Prev</a>
    	</li>
    	<li class="page-item">
    	  <a class="page-link" href="{{.Back}}">Back</a>
    	</li>
    	<li class="page-item {{if not .Next}}disabled{{end}}">
    	  <a class="page-link" href="{{.Next}}">Next &rarr;</a>
    	</li>
      </ul>
    </nav>
    
  </div>
</div>


<script>
var bookContent = document.getElementById("bookContent");
bookContent.onload = function() {
	bookContent.style.height = bookContent.contentWindow.document.body.scrollHeight + "px";
}
</script>

{{template "footer.html" .S}}