{{define "body_content"}}
{{ if ne .UserName "" }}

<button id="mybutton" class="button is-primary is-large">Launch example modal</button>

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section id="chart" class="modal-card-body">
      <!-- Content ... -->
    </section>
  </div>
</div>

<div class="column is-full notification is-warning">
<p class="is-size-2 has-text-centered has-text-weight-bold">Waage 1</p>
<p class="has-text-centered">letzte Messung: 1.1.2000 19:20</p>
<div>
<div class="colums is-full notification is-warning">
  <nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="icon"><i class="fa fa-thermometer-half"></i></p>
      <p class="title">22.0 &deg;C</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="icon"><i class="fa fa-tint"></i></p>
      <p class="title">50 %</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="icon"><i class="fa fa-balance-scale"></i></p>
      <p class="title is-size-1 has-text-weight-bold">456K</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="icon"><i class="fa fa-cloud"></i></p>
      <p class="title">789</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
      <p class="title">90%</p>
    </div>
  </div>
</nav>
</div>
    <script>
$("#mybutton,.delete").click(function(){
  console.log("Hallo Velo");
  $(".modal").toggleClass("is-active");
});
    </script>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
$.getJSON('https://mini-beieli.ch/metrics', function(mydata) {
  var options = {
    chart: {
      type: 'line',
      animations: {
        enabled: false
      }
    },
    xaxis: {
      type: "datetime"
    },
    tooltip: {
      x: {
        format: 'dd.MM.yyyy HH:mm'
      }
    },
    series: [{
      name: 'vbat millivolt',
      data: mydata
    }]
  }

  var chart = new ApexCharts(document.querySelector("#chart"), options);

  chart.render();
});
</script>
{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}