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

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>

<div class="columns" id="myselectors">
  <div class="column is-half py-1">
    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
      <i class="fa fa-calendar"></i>&nbsp;
      <span></span> <i class="fa fa-caret-down"></i>
    </div>
  </div>
  <div class="column is-half py-1">
  </div>
</div>

<script src="static/js/map.js"></script>
<script src="static/js/graph.js"></script>

<div>
  <section id="chart">
    <!-- Content ... -->
  </section>
</div>

<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
<div id="map" class="mapbig"></div>

<script>
var urlParams = new URLSearchParams(window.location.search);
var deveui = urlParams.get('deveui');
var lon = urlParams.get('lon');
var lat = urlParams.get('lat');
var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");


var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
var map = new ga.Map({
  target: 'map',
  layers: [layer],
  view: new ol.View({
    center: position,
    resolution: 20
  })
});

// Create the layer with the icon
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [new ol.Feature({
      geometry: new ol.geom.Point(position)
    })]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: '/static/images/marker.png'
    })
  })
});
map.addLayer(vectorLayer);
</script>


    <div class="slidecontainer">
      <input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="200000" step="1" value="100000" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />

<script>
function updateSlider(c)
{
    if(c.value <=  50000)
  {
    if(c.step != 1)
        c.step = 1;
    alert(c.value);
  }
  else
  {
     if(c.step != 3)
        c.step = 3;
    alert(c.value);
  }
}

function updateSliderTooltip(c)
{
  $('#tooltiptext').html(c.value);
}
</script>
    </div>
    <div class="slidecontainer has-textcentered">
      <span id="tooltiptext">0</span>
    </div>
{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}