<section id=content>

  <template id=sourcesTemplate>
      <button id="" class=source><img width=64 height=64 src=''></button>
  </template>
  <input type="checkbox" id="enableSource" data-id="{{.Source}}"> Use an input bitmap.
  <br>
  <button id=selectedSource></button>
  <pre id=sourceCode>SkBitmap source;</pre>
  <div id=chooseSource>
    Choose an image below or upload a new one to use as an input bitmap.
    <div id="chooseList">
    </div>
    <form action="/sources/" method="post" accept-charset="utf-8" enctype="multipart/form-data">
      <input type="file" accept="image/*" name="upload" value="" id="upload">
      <input type="submit" value="Add Image">
    </form>
  </div>

  <pre>
    <textarea spellcheck=false name='code' id='code' rows='15' cols='100'>{{.Code}}</textarea>
  </pre>

  <input type='button' value='Run' id='run'>
  <a href='{{if .Hash}}/c/{{.Hash}}{{end}}' target=_blank id=permalink>Share</a>

  <input type='button' value='Embed' id='embedButton' disabled/>
  <input type="text" value="" id="embed" readonly style="display:none;">
  <br>

  <p>
  <img  touch-action='none' class='zoom' id='img' src='{{if .Hash}}/i/{{.Hash}}.png{{end}}'/>
  </p>
  <p id='zoomHex'></p>

  <h2>Warnings and Errors</h2>
  <pre><code id='output'></code></pre>
  <h2>Runtime output</h2>
  <pre id='stdout'></pre>

</section>