{{define "components/toolbar"}}
<div class="level">
  <div class="level-left">
    <div class="field has-addons">
      <p class="control">
        <div class="select">
          <select onchange="SetTabstop(this)">
            <option value="0">Tabstop</option>
            <option value="4">Tabstop 4</option>
            <option value="2">Tabstop 2</option>
            <option value="-1">Tab</option>
          </select>
        </div>
      </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-light is-danger" id="toolWrap" onclick="toggleWrap()">NoWrap</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 SetTabstop(obj){
  let value = obj.value;
  switch (value) {
    case "-1":
      editor.session.setUseSoftTabs(false);
      break;
    case "2":
      editor.session.setTabSize(2);
      editor.session.setUseSoftTabs(true);
      break;
    case "4":
      editor.session.setTabSize(4);
      editor.session.setUseSoftTabs(true);
      break;
  
    default:
      break;
  }
}

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}}