{% extends 'base.html' %}

{% block head %}
{% endblock %}

{% block header %}
<h1 class="display-4">{{ station.name }}</h1>
{% endblock %}

{% block content %}
<section>
  {% if station.climate_date_old() %}
  <div class="alert alert-danger" role="alert">
    Die letzten Messwerte zu dieser Station sind von {{ station.climate_date_range()["max"] }}.
  </div>
  {% endif %}
  <div class="card ">
    <div class="embed-responsive embed-responsive-16by9">
      <div class="clickoverlay embed-responsive-item">
        <p class="text-center">Klicken um die Karte freizuschalten</p>
      </div>
      <div id="mapid" class="embed-responsive-item"></div>
    </div>
  </div>
  <div class="card-group">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Latitude</h5>
        <p class="card-text">{{ station.lat }}°</p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Longitude</h5>
        <p class="card-text">{{ station.lon}}°</p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Höhe über nn</h5>
         <p class="card-text">{{ station.sea_level }}m</p>
      </div>
    </div>
  </div>
  <div class="card-group">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Bundesland</h5>
        <p class="card-text">{{ station.state }}</p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">DWD ID</h5>
         <p class="card-text">{{ station.dwd_id }}</p>
      </div>
    </div>
  </div>

  <a href="/station/{{ station.dwd_id }}/export/" class="btn btn-lg btn-block btn-outline-primary">Exportieren</a>

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Meta</h5>
    </div>
    <div class="list-group list-group-flush">
      <a href="https://opendata.dwd.de/climate_environment/CDC/observations_germany/climate/daily/kl/recent/tageswerte_KL_{{ station.dwd_id }}_akt.zip" class="list-group-item" target="_blank">Aktueller Source vom DWD</a>
      <div class="list-group-item">Bereich Messdaten: {{ station.climate_date_range()["min"] }} - {{ station.climate_date_range()["max"] }}</div>
      <div class="list-group-item">Letztes Update: {{ station.dwd_last_update }}</div>
    </div>
  </div>
</section>
{% endblock %}

{% block foot %}
<script>
  mymap = L.map('mapid').setView([52, 10], 6);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(mymap);

  $.getJSON("/api/station?s={{ station.dwd_id }}", (stations) => {
    if(stations.length == 1) {
      mymap.setView([stations[0]["lat"], stations[0]["lon"]], 6);
    }
    stations.forEach((station, i, j) => {
      L.marker([station["lat"], station["lon"]]).addTo(mymap);
    })
  });
</script>
{% endblock %}