{{with .Data}}
<div id="example_{{.Name}}" class="toggle">
  <div class="collapsed">
    <p class="exampleHeading toggleButton">▹ <span class="text">Example{{.Page.ExampleSuffix .Name}}</span></p>
  </div>
  <div class="expanded">
    <p class="exampleHeading toggleButton">▾ <span class="text">Example{{.Page.ExampleSuffix .Name}}</span></p>
    {{with .Doc}}<p>{{.}}</p>{{end}}
    {{$output := .Output}}
    {{with .Play}}
      <div class="play">
        <div class="input"><textarea class="code" spellcheck="false">{{.}}</textarea></div>
        <div class="output"><pre>{{html $output}}</pre></div>
        <div class="buttons">
          <button class="Button Button--primary run" title="Run this code [shift-enter]">Run</button>
          <button class="Button fmt" title="Format this code">Format</button>
          {{if not $.GoogleCN}}
            <button class="Button share" title="Share this code">Share</button>
          {{end}}
        </div>
      </div>
    {{else}}
      <p>Code:</p>
      <pre class="code">{{.Code}}</pre>
      {{with .Output}}
        <p>Output:</p>
        <pre class="output">{{.}}</pre>
      {{end}}
    {{end}}
  </div>
</div>
{{end}}