[% BLOCK body_style %]
<style type="text/css" media="screen">
    #editor, #paste {
      margin: auto;
      position: relative !important;
      width: 100%;
      font-variant-ligatures: none;
      /*font-family: "AnonymousPro";*/
      font-size: 1em;
    }

    html, body, #content {
      width: 100%;
    }
    .options label {
      padding-right: 0.5em;
    }
    .options label:not(:first-child) {
      padding-left: 2em;
    }

    td, th {border-left: thin solid black; border-top: thin solid black; margin: 1px;}    
    td pre {border-radius: 0; border: none;}
    table {border-right: thin solid black; border-bottom: thin solid black}

    @font-face {
      font-family: "AnonymousPro";
      src: url("/static/fonts/AnonymousPro-Regular.woff2") format('woff2');
    }
  </style>
[% END %]

[% BLOCK page_header %]
<div class="row">
    <div class="col-md-1">
      <a href="/">Make a new paste</a>
    </div>
    <div class="col-md-2">
      <b>Who: </b>[% who | html %]
    </div>
    <div class="col-md-2">
      <b>When: </b>[% when %]
    </div>
    <div class="col-md-6">
      <b>What: </b>[% what | html %]
    </div>

  <div class="col-md-1">
    <a href="http://www.cafepress.com/perlbot">Perlbot Merch</a>
  </div>
</div>
[% END %]

[% BLOCK body %]
<form action="/edit/[% paste_id %]" method="GET" id="form">
    <div id="content" class="container">
      <div class="panel">
        <div class="panel-heading">
         [% PROCESS page_header %]
        </div>
      </div>
      <div class="panel-body">
        <div class="row">
            <div class="options">
              <label>Raw Viewer</label>
              <input type="checkbox" id="raw_editor"/>
              <label><a href="/raw/[% pasteid %]">Raw Link</a></label>
              <label>Language: </label><span>[% language.description %]</label>
              <!-- TODO this should come from the eval server somehow -->
            </div>
          <div class="col-md-12">
            <pre id="paste">[% paste | html %]</pre>
            <pre id="editor"></pre>
          </div>
        </div>
        <div class="row">
	  [% IF eval.keys.size == 0 %]
	    ZERO
	  [% ELSIF eval.keys.size == 1 %]
            <div id="eval" class="col-md-12">
              <h3>Program Output</h3>
	      [% FOR lang IN eval.keys %]
              <pre>[% eval.$lang | html %]</pre>
              [% END %]
            </div>
	  [% ELSE %]
            <div class="col-md-1"></div>
            <table id="eval" class="col-md-8">
            <tr><th>Language</th><th>Output</th></tr>
	    [% FOR lang IN eval.keys.sort %]
              <tr><td style="width: 1px; white-space: nowrap; padding-right: 5em;">[% lang %]</td><td><pre>[% eval.$lang | html %]</pre></td></tr>
	    [% END %]
            </table>
          [% END %]
        </div>
        <div class="panel-footer">
          <input value="Fork and Edit" type="submit" id="submit" />
        </div>
      </div>
    </div>
</form>

<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    //editor.setTheme("ace/theme/twilight");

    editor.session.setMode("ace/mode/[% language.mode %]");

    var use_editor = function() {
      if ($("#raw_editor").is(":checked")) {
	$("#editor").hide();
	$("#paste").show();
      } else {
        console.log($("#paste").text());
        editor.setValue($("#paste").text(),0);
        editor.clearSelection();
	$("#paste").hide();
	$("#editor").show();
      }
    };
 
    use_editor();
    $("#raw_editor").on("change", use_editor);
    editor.setReadOnly(true);
    editor.setOptions({maxLines: Infinity});
    editor.getSession().setUseWrapMode(true);
    /*function resizeAce() {
      var h = window.innerHeight;
      var ch = h - 400;
      var m = ch > 360 ? ch : 360;
   //   $('#editor').css('height', m.toString() + 'px');
    };
    $(window).on('resize', function () {
      resizeAce();
    });
    resizeAce();*/

    $("#submit").on('click', function () {
        $("#paste").text(editor.getValue()); // copy to the textarea
    });

</script>
[% END %]