{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Job Key</th>
        <th>Type</th>
        <th>Status</th>
        <!--<th>Progress</th>--> <!-- TODO: Implement progress tracking per session and overall sessions -->
        <th>Start</th>
        <th>End</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      {% for job in jobs %}
        <tr>
          <td>{{ job.job_key }}</td>
          <td>{{ job.job_type }}</td>
          <td>{{ job.status }}</td>
          <!--<td>{{ job.progress }}</td>--> <!-- TODO: Add progress tracking -->
          <td>{{ job.start_time }}</td>
          <td>{{ job.end_time }}</td>
          <td><a href="/log/{{ job.job_key }}" target="_blank">Log</a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}
{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
      
      // Auto-refresh every 10 seconds
      setInterval(function() {
        location.reload();
      }, 10000);
    });
  </script>
{% endblock %}