{{define "home"}}
{{template "base/header" .}}

<div class="columns is-mobile is-centered">
  <div class="column is-half">
    <section class="section">
      <container class="container is-max-desktop">
        <h1 class="title">ConfigUI</h1>
      </container>
    </section>
  </div>
</div>

<div class="tile is-ancestor mx-2">
  <div class="tile is-3 is-vertical is-parent">
    <div class="tile is-child box">
      <section class="is-large">
        <aside class="menu">
          <p class="menu-label">
            Files
          </p>
          <ul class="menu-list">
            {{ range .Files }}
            <li><a>{{ . }}</a></li>
            {{ end }}
          </ul>
          <p class="menu-label">
            ConfigUI
          </p>
          <ul class="menu-list">
            <li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
          </ul>
        </aside>
      </section>
    </div>
    <div class="tile is-child box">
      <p class="title">Two</p>
    </div>
  </div>
  <div class="tile is-parent">
    <div class="tile is-child box">
      <p class="title">Three</p>
        <textarea class="content" placeholder="Enter HTML Source Code" id="editing" spellcheck="false" oninput="update(this.value); sync_scroll(this);" onscroll="sync_scroll(this);" onkeydown="check_tab(this, event);"></textarea>
        <pre id="highlighting" aria-hidden="true">
          <code class="language-html" id="highlighting-content">{{.Content}}</code>
        </pre>

      <!-- <code-input class="content" id="edit" lang="{{.Lang}}" name="config">{{.Content}}</code-input> -->
    </div>
  </div>
</div>

{{template "base/footer" .}}
{{end}}