{{define "components/editor"}}
{{template "components/toolbar" .}}

<!-- <container class="container is-max-desktop"> -->
  <div id="editor">{{.File.Content}}</div>
<!-- </container> -->
<script>
function setEditor(){
  var beautify = ace.require("ace/ext/beautify");
  window.beautify = beautify
  var editor = ace.edit("editor");
  window.editor = editor
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/{{.Editor.Lang}}");
  editor.session.setUseWrapMode(false);
  editor.session.setNewLineMode('{{.Editor.Platform}}')
  editor.setReadOnly({{.File.RO}});

  editor.session.on('change', function(delta) {
    // delta.start, delta.end, delta.lines, delta.action
    window.ContentChanged = true
  });

  editor.commands.addCommand({
    name: 'SaveContent',
    bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
    exec: function(editor) {
        //...
        FileSave()
    },
    readOnly: false // false if this command should not apply in readOnly mode
  });
  editor.commands.addCommand({
    name: 'Reload',
    bindKey: {win: 'F5',  mac: 'Command-R'},
    exec: function(editor) {
      if (window.ContentChanged)
        if(confirm("You have unsaved changes, are you sure to reload?"))
          window.location.reload()
    },
    readOnly: false
  });
  editor.commands.addCommand({
    name: 'SaveAndApply',
    bindKey: {win: 'Ctrl-E',  mac: 'Command-E'},
    exec: function(editor) {
      if ('{{.File.Name}}'=='{{.AppName}}') toolSave()
      else toolApply()
    },
    readOnly: true
  });
}
</script>
{{end}}