{{define "components/result"}}
<div class="modal" id="result_view">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">{{.File.Alias}}</p>
      <button class="delete" aria-label="close" onclick="ResultViewTog()"></button>
    </header>
    <section class="modal-card-body">
      <p class="title">{{.File.Action}}</p>
      <p class="subtitle">{{.File.Path}}</p>
      <div id="result_editor"></div>
    </section>
    <footer class="modal-card-foot">
      <div class="level">
        <div class="level-left"></div>
        <div class="level-left">
          <button class="button" onclick="ResultViewTog()">OK</button>
        </div>
      </div>
    </footer>
  </div>
</div>

<script>
function setResult(){
  var result_editor = ace.edit("result_editor");
  window.result_editor = result_editor
  result_editor.setTheme("ace/theme/monokai");
  result_editor.session.setMode("ace/mode/sh");
  result_editor.setReadOnly(true);
  result_editor.setOptions({
    maxLines: 1000
});
}

function ResultViewTog(){
  let el = document.getElementById('result_view')
  el.classList.toggle('is-active')
}
</script>
{{end}}