{% extends 'base.html' %}

{% block head %}
{% endblock %}

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

{% block content %}
<section>
  <div class="table-responsive">
    <table class="table table-hover" id="tableid">
      <thead>
        <tr>
          <th>Name</th>
          <th>Bundesland</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for station in stations %}
        <tr>
          <td>{{ station.name }}</td>
          <td>{{ station.state }}</td>
          <td><a href="/station/{{ station.dwd_id }}/export/" class="btn btn-secondary">Export</a> <a href="/station/{{ station.dwd_id }}/" class="btn btn-primary">Info</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}

{% block foot %}
<script>
  $(document).ready(function() {
      $('#tableid').DataTable({
        "search": {
          "search": new URLSearchParams(window.location.search).get("q")
        }
      });
  } );
</script>
{% endblock %}