[% WRAPPER _conf_frame.tt %]
<link rel="stylesheet" href="[% url_prefix %]plugins/[% plugin_editor_path %]/editor-[% fileversion %].css">
<script src="[% url_prefix %]/vendor/ace-builds-1.4.12/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="[% url_prefix %]/vendor/ace-builds-1.4.12/src-min-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

<form action="conf.cgi" method="POST" id="saveform" class="w-full h-full">
  <input type="hidden" name="sub" value="objects">
  <input type="hidden" name="action" value="savefile">
  <input type="hidden" name="file" value="[% file_link | html %]">
  <input type="hidden" name="content" value="[% file_content | html %]" id='filecontent'>
  <input type="hidden" name="CSRFtoken" value="[% get_user_token(c) %]">
  [% IF show_object && back == "edit" %]
  <input type="hidden" name="data.id" value="[% object.get_id() %]">
  [% END %]
  <input type="hidden" name="line" value="" id="fileline">
  [% IF c.req.parameters.exists('backlink') %]
  <input type="hidden" name="backlink" value="[% c.req.parameters.backlink | html %]">
  [% END %]
  [% file_locked = ""; PROCESS _conf_ondemand_file_edit.tt file=file form="saveform" %]
  [% readonly = 0;
  IF file.readonly; readonly = 1; END;
  IF file_locked; readonly = 1; END;
  %]

  <div class="card w-full h-full flexcol flex-nowrap gap-0 overflow-hidden">
    <div class="head justify-between">
      <a href="[% IF c.req.parameters.exists('backlink') %][% c.req.parameters.backlink | html %][% ELSIF show_object && back == "edit" %]conf.cgi?sub=objects&amp;data.id=[% object.get_id() %][% ELSE %]conf.cgi?sub=objects&amp;action=browser#[% file_link | html %][% END %]" onclick="return confirm_discard_changes()" class="button header-button rounded w-[70px]" title="Go back">
        <i class="uil uil-angle-double-left"></i>Back
      </a>
      <h3>
        <span id="filename" class="js-copy-to-clipboard">[% file_link | html %]</span>
        [% IF file.readonly %]<span class="textHINT"> (read-only)</span>[% END %]
        [% IF file_locked %] <br><a href="[% uri_with(c, unlock => 1) %]"><span class="textHINT"> File is currently locked by [% file_locked.user %]. Edit Anyway? (Last changed: [% date_format(c, file_locked.time) %]) </span></a>[% END %]
      </h3>
      <div>
        [% UNLESS readonly %]<a class="button w-40 green" href='#' onClick="save_file(this); return false;"><i class="uil uil-save"></i> save</a>[% END %]
      </div>
    </div>
    <div class="w-full h-full flex">
      <div id="editor" class="w-full h-full flex"></div>
    </div>
  </div>
</form>

<script>
  var editor = ace.edit("editor");
  var original_value;
  /* set up editor */
  window.onload = function() {
    editor.setTheme("ace/theme/clouds");
    editor.session.setMode("ace/mode/naemon");
    editor.setOptions({
      enableLiveAutocompletion: true,
      highlightActiveLine: true
    });
    editor.setValue(document.getElementById('filecontent').value);
    original_value = document.getElementById('filecontent').value;
    editor.gotoLine([% line %]);
  };

  /* intercept when there are unsaved changes */
  function confirm_discard_changes() {
    form = document.getElementById('saveform');
    if(has_changed() && !form.needs_reload) {
      return confirm("File has been changed. Really discard changes?");
    }
    return true;
  }

  function has_changed() {
    if(editor.session.getValue() != original_value) {
      return true;
    }
    return false;
  }

  function save_file(btn) {
    form = document.getElementById('saveform');
    document.getElementById('filecontent').value = editor.session.getValue();
    [%+ IF show_object && back == "edit" +%]
    document.getElementById('fileline').value = editor.getCursorPosition().row;
    [%+ END +%]
    setBtnSpinner(btn);
    form.submit();
  }
</script>

[% END %]

[% PROCESS _footer.tt %]
