{% 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">Files</span>

    <div class="srf-flex">
      <a href="{% url 'stationfile-create' station.id %}">
        <button class="btn-outline-default btn-small" type="button">
          Add file
        </button>
      </a>
    </div>
</div>

<div class="srf-layout flex-row" style="width:100%;">
  <table id="id_station_list" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
          <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for object in object_list %}
      <tr>
	      <td><a href="{{ object.file.url }}" target="_blank">{{ object.name }}</a></td>

        <td class="justify-center layout">

          <a href="{% url 'stationfile-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
            </div>
          </a>
        </td>

      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %} {% block localjavascript %}
<script>
  $(document).ready(function() {
    $('#id_station_list').DataTable({});
  });
</script>
{% endblock %}