{% extends "base.html" %}

{% block extrahead %}
<style type="text/css" media="screen">
    #editor {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
{% endblock %}

{% block body %}
<div class="span-24">
  <h1>Edit activity raw data</h1>
  <div id="editor">{{ data|safe }}</div>
</div>

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var data_backup={{ data|safe }};
</script>
<script type="text/javascript">
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/solarized_light");
    editor.getSession().setMode("ace/mode/javascript");
</script>
{% endblock %}
