{% extends "base.html" %}
{% block content %}

<div class="srf-container">

<div style="display: flex; justify-content: space-between; margin-bottom: 16px">
  <span class="srf-display-1 text-uppercase">{{ sensor }} - Instruments</span>
  <div class="srf-flex">
    <a href="{% url 'instrument-create' sensor.id %}">
      <button class="btn-outline-default btn-small" type="button">
        Add instrument
      </button>
    </a>
  </div>
</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>Serial number</th>
        <th>Other reference</th>
        <th>Date first received</th>
        <th>Donated by</th>
        <th>First deployed</th>
        <th>Last deployed</th>
        <th>Last calibration</th>
      </tr>
    </thead>
    <tbody>
      {% for object in object_list %}
      <tr>
        <td> <a href="{% url 'instrument-details' sensor.id object.id %}">
          {{ object.serial_number|default:'-' }}
        </a></td>
        <td>{{ object.other_reference|default:'-' }}</td>
        <td>{{ object.first_received|default:'-' }}</td>
        <td>{{ object.donated_by|default:'-' }}</td>
        <td>{{ object.first_deployed|default:'-' }}</td>
        <td>{{ object.last_deployed|default:'-' }}</td>
        <td>{{ object.last_calibration|default:'-' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</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 %}