{{define "components/toolbar"}}
<div class="level">
  <div class="level-left">
    <div class="field has-addons">
      <p class="control">
        <button class="button">Tabstop</button>
      </p>
      <p class="control">
        <button class="button" id="toolFollow" onclick="toolFollow()">Follow</button>
      </p>
      <p class="control">
        <button class="button" onclick="toolFormat()">Format</button>
      </p>
      <p class="control">
        <button class="button is-success" id="toolWrap" onclick="toggleWrap()">Wrap</button>
      </p>
    </div>
  </div>
  
  <div class="level-right">
    <div class="field has-addons">
      <p class="control">
        <button class="button" id="toolRefresh" onclick="toolRefresh()">Refresh</button>
      </p>
      {{if not .File.RO}}
        <p class="control">
          {{if eq .File.Alias "ConfigUI"}}
            <button class="button" id="toolSave" onclick="toolSave()">Apply</button>
          {{else}}
            <button class="button" id="toolSave" onclick="toolSave()">Save</button>
          {{end}}
        </p>
      {{end}}
      {{if .File.Action}}
      <p class="control">
        <button class="button has-tooltip-arrow"
          data-tooltip="{{.File.Action}}"
          id="toolApply" onclick="toolApply()"
        >Apply</button>
      </p>

      {{/* <p class="control">
        <a class="button" href="/api/dl?name">Download</a>
      </p> */}}
      {{end}}
    </div>
  </div>
</div>

<script>
function toggleWrap(){
  let mode = editor.session.getUseWrapMode();
  editor.session.setUseWrapMode(!mode)
  let el = document.getElementById('toolWrap');
  if (mode){
    el.classList.remove('is-success');
    el.classList.add('is-danger');
    el.innerHTML = 'NoWrap'
  } else {
    el.classList.remove('is-danger');
    el.classList.add('is-success');
    el.innerHTML = 'Wrap'
  }
}

function toolFormat(){
  beautify.beautify(editor.session);
}

function toolFollow(){
  if (ToolIsFollow){
    ToolIsFollow = false
    let el = document.getElementById('toolFollow');
    el.classList.remove('is-primary');
  } else {
    ToolIsFollow = true
    let el = document.getElementById('toolFollow');
    el.classList.add('is-primary');
    editor.gotoLine(editor.session.getLength());
  }
}

async function toolRefresh(){
  let el = document.getElementById('toolRefresh');
  el.classList.add("is-loading")
  await FileGet()
  el.classList.remove("is-loading")
}

async function toolSave(){
  let el = document.getElementById('toolSave');
  el.classList.add("is-loading")
  await FileSave()
  el.classList.remove("is-loading")
}

async function toolApply(){
  let el = document.getElementById('toolApply');
  el.classList.add("is-loading")
  await FileApply()
  el.classList.remove("is-loading")
  ResultViewTog()
}
</script>
{{end}}