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

{% block extrahead %}
{{ block.super }}
<style type="text/css">
.column {
    position: relative;
    float: left;
    padding-right: 2em;
    padding-bottom: 1em;
}
</style>
{% endblock %}

{% block content %}
<h2>Device {{ device.hostname }}</h2>

{% if show_maintenance %}
<form style="display:inline; float:right" method="POST"
      action="{% url lava_scheduler_app.views.device_maintenance_mode device.pk %}">
  {% csrf_token %}
  <button id="maintenance-button">Put into maintenance mode</button>
</form>
{% endif %}
{% if show_online %}
<form style="display:inline; float:right" method="POST"
      action="{% url lava_scheduler_app.views.device_online device.pk %}">
  {% csrf_token %}
  <button id="online-button">Put online</button>
</form>
{% endif %}

<div id="columns">
  <div class="column">
    <dt>Hostname:</dt>
    <dd>{{ device.hostname }}</dd>

    <dt>Device type:</dt>
    <dd>{{ device.device_type }}</dd>
  </div>
  <div class="column">
    <dt>Status:</dt>
    <dd>{{ device.get_status_display }}</dd>

{% if device.current_job %}
    <dt>Currently running:</dt>
    <dd>
      <a href="{% url lava_scheduler_app.views.job pk=device.current_job.pk %}">
        Job {{ device.current_job.id }}
      </a>
    </dd>
{% endif %}
  </div>
  <div style="clear: both"></div>
</div>

<table class="data display">
  <thead>
    <tr>
      <th class="id">ID</th>
      <th>Status</th>
      <th>Device</th>
      <th>Submitter</th>
      <th>Start Time</th>
      <th>Finish Time</th>
    </tr>
  </thead>
  <tbody>
    {% for job in recent_jobs %}
    <tr>
      <td><a href="{% url lava_scheduler_app.views.job pk=job.pk %}">{{ job.id }}</a></td>
      <td>{{ job.get_status_display }}</td>
      <td>{{ job.actual_device|default:'' }}</td>
      <td>{{ job.submitter }}</td>
      <td>{{ job.start_time }}</td>
      <td>{{ job.end_time|default:"not finished" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script>
$(document).ready(
  function() {
    $("table.data").dataTable({
      "bJQueryUI": true,
      "aoColumnDefs": [
        { "sType": "num-html", "aTargets": [ "id" ] }
      ],
      "aaSorting": [[4, 'desc', 4]]
    });
    $("#maintenance-button").button();
    $("#online-button").button();
  }
);
</script>

{% endblock %}
