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

<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>

<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();
	var menuHeight =  $("#bookMenu").height();
	if (contentHeight < menuHeight) {
		$("#bookContent").height(menuHeight);
	} else {
		$("#bookContent").height(contentHeight);
	}
}
</script>
<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>
</div>
</div>

<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>

{{template "footer.html"}}