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



<div class="row">
<div class="span4">
{{range .Chapters}}
{{range .In}}
<ul id="bookMenu" class="nav nav-list hidden-phone">
{{end}}
	<li {{if .Active}}class="active"{{end}}><a href="{{.Link}}">{{.Label}}</a></li>
{{range .Out}}
</ul>
{{end}}
{{end}}
{{if .Chapters}}
</ul>
{{end}}
</div>

<div class="span8">
<script type="text/javascript">
function resizeIframe() {
	var contentHeight = $("#bookContent").contents().find("html").height();
	$("#bookContent").height(ContentHeight);
}
</script>

<ul class="pager">
{{if .Prev}}
  <li class="previous">
    <a href="{{.Prev}}">&larr; Prev</a>
  </li>
{{end}}
{{if .Book.Active}}
  <li class="">
    <a href="{{.Back}}">Back</a>
  </li>
{{else}}
  <span class="label label-warning">waiting for moderation</span>
{{end}}
{{if .Next}}
  <li class="next">
    <a href="{{.Next}}">Next &rarr;</a>
  </li>
{{end}}
</ul>

<iframe id="bookContent" onload="resizeIframe();" style="width: 100%; height: 1080px; border: 0;" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>

<ul class="pager">
{{if .Prev}}
  <li class="previous">
    <a href="{{.Prev}}">&larr; Prev</a>
  </li>
{{end}}
  <li class="">
    <a href="{{.Back}}">Back</a>
  </li>
{{if .Next}}
  <li class="next">
    <a href="{{.Next}}">Next &rarr;</a>
  </li>
{{end}}
</ul>

</div>
</div>



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