{{define "header_additions"}}
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
   <script type="text/javascript" src="/static/js/Map.SelectArea.min.js"></script>
{{end}}
{{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>
<script src="static/js/map.js"></script>

<div id="yesnomodal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Koordinaten als gr&uuml;ne Zone &uuml;bernehmen?</p>
    </header>
    <div class="modal-card-body">
      <!-- Content ... -->
    </div>
    <footer class="modal-card-foot">
      <button id="modal-yes" class="button is-success">Ja</button>
      <button id="modal-no" class="button">Nein</button>
    </footer>
  </div>
</div>

<div class="columns is-mobile" id="myselectors">
  <div class="column is-narrow py-1">
    <div id="reportrange" class="datepicker" 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 py-1" align="right">
    <a href="/downloadmetrics" id="btn_download" class="button" download>
      <span class="icon">
        <i class="fa fa-download"></i>
      </span>
    </a>
  </div>
</div>

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

<div id="map" class="mapbig">
</div>

<div class="slidecontainer">
  <input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="0" step="1" value="" />
</div>
{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}