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

{{range .LastMetrics}}
<div class="column is-full notification is-warning">
  <p id="alias_{{.Deveui}}" class="is-size-2 has-text-centered has-text-weight-bold">{{.Alias}}</p>
  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte Messung: {{.Timestamp}}</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 id="temp_{{.Deveui}}" class="title">{{.Temperature}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="icon"><i class="fa fa-tint"></i></p>
          <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="icon"><i class="fa fa-balance-scale"></i></p>
          <p id="weight_{{.Deveui}}" class="title is-size-1 has-text-weight-bold">{{.Weight}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="icon"><i class="fa fa-cloud"></i></p>
          <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
          <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}}/p>
        </div>
      </div>
      </nav>
    </div>
  </div>
</div>
<div>
</div>
{{end}}

    <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?deveui=0002CC010000029D&property=t', 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}}