{{ define "content" }}

 <main role="main" class="inner DAU" x-data="logs()" x-init="get_logs()">
   <h1 class="DAU-heading">Logs</h1>
   <p class="lead">Discord-auto-upload logs</p>

   <div class="container">
    <div class="row">
      <div class="col-sm">
        <button type="button"  @click="debug = !debug" class="btn btn-primary" x-text="debug ? 'debug' : 'no debug'"></button>
      </div>
      <div class="col-sm">
        <button type="button" @click="scroll = !scroll" class="btn btn-primary" x-text="scroll ? 'auto-scroll' : 'no scroll'"></button>
      </div>
    </div>
  </div>

  <pre id="logs" x-text="text" class="text-left pre-scrollable">
  </pre>
</main>

{{ end }}

{{ define "js" }}

<script>
  function logs() {
    return {
      text: '',  scroll: true, debug: false,
      get_logs() {
        fetch('/rest/logs?' + new URLSearchParams({ debug: this.debug  ? "1" : "0" }))
          .then(response => response.text())  
          .then(text => {
            console.log(text);
            this.text = text;
            if (this.scroll) {
              document.getElementById('logs').scrollTop =10000;
            }
            let self = this;
            setTimeout(function() { self.get_logs(); }, 1000)
          })
        },
    }
  }
</script>

{{ end }}