<section id="content">

  <template id="sourcesTemplate">
    <button id="" class=source><img width=64 height=64 src=""></button>
  </template>

  <div id="inputBitmapEnable">
    <input type="checkbox" id="enableSource" data-id="{{.Source}}">
    <label for="enableSource">Use an input bitmap</label>
  </div>

  <button id="selectedSource"></button>

  <pre id="sourceCode">SkBitmap source;</pre>

  <div class="well" id="chooseSource">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">
          Choose an existing image to use as an input bitmap, or upload a new one below.
        </h3>
      </div>
      <div class="panel-body" id="chooseList">
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">
          Upload a new image
        </div>
      </div>
      <div class="panel-body">
        <form action="/sources/" method="post" accept-charset="utf-8" enctype="multipart/form-data">
          <div class="form-group">
            <label for="upload">File input</label>
            <input type="file" accept="image/*" name="upload" value="" id="upload">
          </div>
          <button class="btn btn-default" type="submit">Upload Image</button>
        </form>
      </div>
    </div>
  </div>

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

  <div class="action-buttons">
    <button class="btn btn-primary btn-lg" id='run'>Run</button>
    <a class="btn btn-default btn-lg" href='{{if .Hash}}/c/{{.Hash}}{{end}}' {{if not .Hash}}style="display: none;"{{end}} target=_blank id="permalink">Share</a>

    <button class="btn btn-default btn-lg" id='embedButton' {{if not .Hash}}style="display:none;"{{end}}/>Embed</button>
    <input type="text" value="" id="embed" readonly style="display:none;">
  </div>

  <div id="raster-output" class="image-wrapper panel panel-primary" {{if .RasterURL}}style="display: inline-block;"{{end}}>
    <div class="panel-heading">
      <h3 class="panel-title">
        Raster Output
      </h3>
    </div>
    <div class="panel-body">
      <img touch-action='none' class='zoom' id='raster-img' src='{{.RasterURL}}'/>
    </div>
  </div>

  <div id="gpu-output" class="image-wrapper panel panel-primary" {{if .GPUURL}}style="display: inline-block;"{{end}}>
    <div class="panel-heading">
      <h3 class="panel-title">
        Ganesh Output
      </h3>
    </div>
    <div class="panel-body">
      <img touch-action='none' class='zoom' id='gpu-img' src='{{.GPUURL}}'/>
    </div>
  </div>

  <div id="pdf-output" class="panel panel-primary image-wrapper" {{if .PDFURL}}style="display: inline-block;"{{end}}>
    <div class="panel-heading">
      <h3 class="panel-title">
        PDF Output
      </h3>
    </div>
    <div class="panel-body">
      <a class="btn btn-default btn-lg" id='pdf-link' href='{{if .PDFURL}}{{.PDFURL}}{{end}}' target="_blank">Get the PDF</a>
    </div>
  </div>

  <p id='zoomHex'></p>

  <div id="output-wrapper">
    <h2>Build Issues (click errors to jump to that line)</h2>
    <pre id="output"></pre>
  </div>
  
</section>