{{define "home"}}
{{template "base/header" .}}
{{template "components/error" .}}
<script>
var Active = "{{.File.Name}}";
</script>

<nav class="level py-1">
  <div class="level-left">
    <div class="level-item">
      <a class="title is-size-4 ml-2" href="{{.BaseUrl}}">
        {{.AppName}}
      </a>
    </div>
  </div>
  <div class="level-right">
    {{ block "links" .}}
    <a class="button is-white level-item" 
      href="https://kumoly.io/tools/configui/issues"
    >Report Bug</a>
    {{end}}
    <p class="level-item mr-2"></p>
  </div>
</nav>

<div class="columns">
  <div class="column is-one-quarter">
    <div class="box">
      {{template "components/menu" .}}
    </div>
    {{if .Actions}}
    <div class="box">
      <p class="menu-label has-text-left">Actions</p>
      <div class="buttons are-small">
      {{- range .Actions -}}
        <button class="button has-tooltip-arrow" id="actbtn-{{.Name|normal}}"
          data-tooltip="{{.Cmd}}" onclick="toolDoAction('{{.Name}}')">
          <span>{{- .Name -}}</span>
        </button>
      {{- end -}}
      </div>
    </div>
    {{end}}
    {{if .Integrations}}
    <div class="box">
      <p class="menu-label has-text-left">Integrations</p>
      <div class="buttons are-small">
      {{- range .Integrations -}}
        <button class="button has-tooltip-arrow" id="itgbtn-{{.Name|normal}}"
          data-tooltip="{{.Description}}" onclick="toolDoIntegration('{{.Name}}')">
          <span>{{- .Name -}}</span>
        </button>
      {{- end -}}
      </div>
    </div>
    {{end}}
    <div class="box has-text-centered">
      <a href="{{.BaseUrl}}api/export" class="button is-small">Export Files</a>
    </div>
  </div>
  <div class="column">
    <div class="box">
      {{if and .HideConfig (eq .File.Name .AppName)}}
      Home
      {{else}}
      {{template "components/editor" .}}
      {{end}}
    </div>
    {{if .ResultBellow}}
    <div class="box">
      <div id="result_editor"></div>
    </div>
    {{end}}
  </div>
</div>

<script>
async function toolDoAction(name){
  let el = document.getElementById('actbtn-'+name.replaceAll(" ","-"));
  el.classList.add("is-loading")
  el.classList.remove("has-tooltip-arrow")
  await DoAction('action',name)
  el.classList.remove("is-loading")
  el.classList.add("has-tooltip-arrow")
  {{if not .ResultBellow}}ResultViewTog(){{end}}
}

async function toolDoIntegration(name){
  let el = document.getElementById('itgbtn-'+name.replaceAll(" ","-"));
  el.classList.add("is-loading")
  el.classList.remove("has-tooltip-arrow")
  await DoAction('integration',name)
  el.classList.remove("is-loading")
  el.classList.add("has-tooltip-arrow")
  {{if not .ResultBellow}}ResultViewTog(){{end}}
}
</script>
{{if not .ResultBellow}}
{{template "components/result" .}}
{{end}}
{{template "base/footer" .}}
{{end}}