{% extends "lava_scheduler_app/_content.html" %}


{% block content %}
<h2>All Jobs</h2>

<table class="data display">
  <thead>
    <tr>
      <th class="id">ID</th>
      <th class="status">Status</th>
      <th class="device">Device</th>
      <th class="description">Description</th>
      <th class="submitter">Submitter</th>
      <th class="submit_time">Submit Time</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script>
$(document).ready(
  function() {
    $("table.data").dataTable({
      bJQueryUI: true,
      bServerSide: true,
      bProcessing: true,
      bFilter: true,
      sAjaxSource: "{% url lava_scheduler_app.views.alljobs_json %}",
      aaSorting: [[0, "desc"]],
      iDisplayLength: 25,
      aoColumnDefs: [
        {
          aTargets: ["id"],
          fnRender: function (o) { return '<a href="' + o.aData.id.link + '">' + o.aData.id.id + '</a>'; }
        },
        {aTargets: ["status"], mDataProp: 'status'},
        {aTargets: ["description"], mDataProp: 'description'},
        {aTargets: ["submitter"], mDataProp: 'submitter'},
        {aTargets: ["submit_time"], mDataProp: 'submit_time'},
        {
          aTargets: ["device"],
          fnRender: function (o) {
            o = o.aData.device;
            r = o.name;
            if (o.requested) {
              r = '<i>' + r + '</i>';
            }
            if (o.link) {
              return '<a href="' + o.link + '">' + r + '</a>';
            }
            return r;
         }
        }
      ]
    });
  }
);
</script>

{% endblock %}
