{% extends "wx/station_base.html" %} {% block station_content %}

<div style="display: flex; justify-content: space-between; margin-bottom: 16px">
  <span class="srf-display-1 text-uppercase">Variables</span>
  <div class="srf-flex">
    {% if not station.is_automatic %}
      <a href="{% url 'stationvariable-create' station.id %}">
        <button class="btn-outline-default btn-small" type="button">
          Add variable item
        </button>
      </a>
    {% endif %}
  </div>
</div>

<div class="srf-layout flex-column srf-padding" style="width: 100%">
  <div class="srf-layout flex-row" style="width: 100%">
    <table id="id_station_list" style="width: 100%">
      <thead>
        <tr>
          <th>Variable</th>
          {% if not station.is_automatic %}
              <th>Actions</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for object in object_list %}
        <tr>
          <td>{{ object.variable }}</td>
          {% if not station.is_automatic %}
              <td class="justify-center layout">
                <a href="{% url 'stationvariable-delete' station.id object.id %}">
                  <button
                    id="id_delete_station"
                    class="mdl-button mdl-js-button mdl-button--icon"
                  >
                    <i class="material-icons custon-icon-16 icon-danger">delete</i>
                  </button>
                  <div class="mdl-tooltip" data-mdl-for="id_delete_station">
                    Delete station
                  </div>
                </a>
              </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

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