{% extends "base.html" %}

{% block content %}

<div class="container">
<div class="panel panel-success">
<div class="panel-heading"><h3 class="panel-title">Receivers</h3></div>
<div class="panel-body">

<form>
<div class="well">
<select name="country" onchange="this.form.submit();">
	<option value="">(all)</option>
    {% for country in countries %}
    <option value="{{ country.iso2 }}"{% if sel_country == country.iso2 %} SELECTED{% endif %}>{{ country.iso2 }}</option>
    {% endfor %}
</select>
</div>
</form>

  <table id="myTable" class="datatable table table-striped table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Country</th>
        <th>Name</th>
        <th>Airport</th>
        <th>Altitude</th>
        <th>Status</th>
        <th>Version</th>
        <th>Platform</th>
      </tr>
    </thead>

    <tbody>
      {% for receiver in receivers %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ receiver|to_html_flag|safe }}</td>
        <td>{{ receiver|to_html_link|safe }}</td>
        <td>{{ receiver.airport|to_html_link|safe }}</td>
        <td>{{ receiver.altitude|int }} m</td>
        <td>{{ receiver.state.name }}</td>
        <td>{{ receiver.version if receiver.version else '-' }}</td>
        <td>{{ receiver.platform if receiver.platform else '-' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</div>

{% endblock %}

{% block scripts %}
  {{ super() }}
  <script>
    $(function() {
      $("#myTable").tablesorter({sortList: [[0,0]], theme:"bootstrap", headerTemplate:"{content} {icon}", widgets:["uitheme"]});
    });
  </script>
{% endblock %}
