<!--
	Copyright 2010 The Go Authors. All rights reserved.
	Use of this source code is governed by a BSD-style
	license that can be found in the LICENSE file.
-->

{{define "layout"}}

<article class="Codewalk Article">

<h1>{{.title}}</h1>

{{with .codewalk}}
<style type='text/css'>@import "/doc/codewalk/codewalk.css";</style>
<script type="text/javascript" src="/doc/codewalk/codewalk.js"></script>

<div id="codewalk-main">
  <div class="left" id="code-column">
    <div id='sizer'></div>
    <div id="code-area">
      <div id="code-header" align="center">
        <a id="code-popout-link" href="" target="_blank">
          <img title="View code in new window" alt="Pop Out Code" src="/doc/codewalk/popout.png" style="display: block; float: right;"/>
        </a>
        <select id="code-selector">
          {{range .File}}
          <option value="/doc/codewalk/?fileprint=/{{.}}">{{.}}</option>
          {{end}}
        </select>
      </div>
      <div id="code">
        <iframe class="code-display" name="code-display" id="code-display"></iframe>
      </div>
    </div>
    <div id="code-options" class="setting">
      <span>code on <a id="set-code-left" class="selected" href="#">left</a> &bull; <a id="set-code-right" href="#">right</a></span>
      <span>code width <span id="code-column-width">70%</span></span>
      <span>filepaths <a id="show-filepaths" class="selected" href="#">shown</a> &bull; <a id="hide-filepaths" href="#">hidden</a></span>
    </div>
  </div>
  <div class="right" id="comment-column">
    <div id="comment-area">
      {{range .Step}}
      <div class="comment first last">
        <a class="comment-link" href="/doc/codewalk/?fileprint=/{{.File}}&amp;lo={{.Lo}}&amp;hi={{.Hi}}#mark" target="code-display"></a>
        <div class="comment-title">{{.Title}}</div>
        <div class="comment-text">
	{{with .Err}}
	ERROR LOADING FILE: {{.}}<br/><br/>
	{{end}}
        {{.HTML}}
        </div>
        <div class="comment-text file-name"><span class="path-file">{{.}}</span></div>
      </div>
      {{end}}
    </div>
    <div id="comment-options" class="setting">
      <a id="prev-comment" href="#"><span class="hotkey">p</span>revious step</a>
      &bull;
      <a id="next-comment" href="#"><span class="hotkey">n</span>ext step</a>
    </div>
  </div>
</div>
{{end}}

</article>

{{end}}