{% load static %}
  <style type="text/css" media="screen">
	#editor {
		border: 1px solid lightgray;
		margin: auto;
		height: {{ widget.height }};
		width: {{ widget.width }};
	}
</style>
<textarea type="text" name="{{ widget.name }}" id="rhotext" style="display: none;">{% if widget.value != None %} {{ widget.value|stringformat:'s' }}{% else %}{{ widget.default_text }}{% endif %}</textarea>
<pre id="editor">{% if widget.value != None %} {{ widget.value|stringformat:'s' }}{% else %}{{ widget.default_text }}{% endif %}</pre>
<script>
    var {{ widget.variable }} = ace.edit("editor");
    {{ widget.variable }}.setTheme("ace/theme/tomorrow_night_eighties");
    {{ widget.variable }}.session.setMode("ace/mode/rholang");
    {{ widget.variable }}.session.setTabSize(2);
    {{ widget.variable }}.renderer.setScrollMargin(10, 10);
    {{ widget.variable }}.setOptions({
      autoScrollEditorIntoView: true,
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: false
    });
    {{ widget.variable }}.resize();
    var rhotext = document.getElementById("rhotext");

    {{ widget.variable }}.getSession().on("change", function () {
      rhotext.value = {{ widget.variable }}.getSession().getValue();
});

</script>