{% extends "base.html" %} {% block content %} {% load wx_filters %}
<div class="srf-container">
  <div style="display: flex; justify-content: space-between; margin-bottom: 16px">
    <span class="srf-display-1 text-uppercase">Station list</span>

    <!-- only show the station create button if the user has Create station permissions -->
    {% if request|has_any_feature_permission:"stations-list:write" %}
    <div class="srf-flex">
      <a href="{% url 'station-create' %}">
        <button class="btn-outline-default btn-small" type="button">
          Add station
        </button>
      </a>
    </div>
    {% endif %}

  </div>
  <div class="srf-layout flex-row" style="width:100%;">
    <table id="id_station_list" class="mdl-data-table" style="width:100%">
      <thead>
        <tr>
          <th>Code</th>
          <th>Name</th>
          <th>Alias name</th>
          <th>Profile</th>
          <th>Status</th>
          <th>Type</th>
          <th>Watershed</th>
          <th>District</th>
          <th>UTC Offset (min)</th>
          <th>Longitude</th>
          <th>Latitude</th>
          <th>Elevation</th>
          <th>Comm. type</th>
          <th>Last update</th>
        </tr>
      </thead>
      <tbody>
        {% for station in object_list %}
        <tr>
          <td>{{ station.code }}</td>
          <td>
            <a href="{{ station.get_absolute_url }}">{{ station.name }}</a>
          </td>
          <td>{{ station.alias_name }}</td>
          <td>{{ station.profile }}</td>
          <td>{{ station.is_active }}</td>
          <td>{{ station.is_automatic }}</td>
          <td>{{ station.watershed }}</td>
          <td>{{ station.region }}</td>
          <td>{{ station.utc_offset_minutes }}</td>
          <td>{{ station.longitude }}</td>
          <td>{{ station.latitude }}</td>
          <td>{{ station.elevation }}</td>
          <td>{{ station.communication_type }}</td>
          <td>{{ station.updated_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<style>
  table.dataTable thead .sorting, 
  table.dataTable thead .sorting_asc, 
  table.dataTable thead .sorting_desc {
    background : none;
  }
</style>

<!-- </div> -->
{% endblock %} {% block localjavascript %}
<script>
  
  $(document).ready(function() {
    $('#id_station_list').DataTable({
      scrollX: true,
      columnDefs: [
        {
          targets: [0, 1, 2],
          className: 'mdl-data-table__cell--non-numeric'
        }
      ]
    });
  });
</script>
{% endblock %}