[% BLOCK body_style %]
<style type="text/css" media="screen">
    #editor {
      margin: auto;
      position: relative !important;
      width: 100%;
    }

    html, body, #content {
      width: 100%;
    }
  </style>
[% END %]

[% BLOCK page_header %]
<div class="row">
    <div class="col-md-3">
      <b>Who: </b>[% who | html %]
    </div>
    <div class="col-md-3">
      <b>When: </b>[% when %]
    </div>
    <div class="col-md-6">
      <b>What: </b>[% what | html %]
    </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="col-md-6">
            <pre id="editor">[% paste | html %]</pre>
          </div>
          <div id="eval" class="col-md-6">
            <h3>Program Output:</h3>
            <pre>[% eval | html %]</pre>
          </div>
        </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/perl");

    editor.setReadOnly(true);

    function resizeAce() {
      var h = window.innerHeight;
      if (h > 360) {
        $('#editor').css('height', (h - 175).toString() + 'px');
      }
    };
    $(window).on('resize', function () {
      resizeAce();
    });
    resizeAce();

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

</script>
[% END %]