{% extends "_base.html" %}
{% block title %}{{ super() }} {% trans %}Jobs{% endtrans %} {% endblock %}
{% block crumbs %}{{ super() }}
/ <a href="./jobs">{% trans %}Jobs{% endtrans %}</a>
{% endblock %}
{% block body %}
    <section id="jobs">
      <div class="row">
        <div class="col-md-12">
          <table class="job-list table table-striped table-bordered">
            <caption>{% trans %}Jobs{% endtrans %}</caption>
            <thead>
              <tr>
                <th>{% trans %}Job ID{% endtrans %}</th>
                <th>{% trans %}Process ID{% endtrans %}</th>
                <th>{% trans %}Start{% endtrans %}</th>
                <th>{% trans %}Duration{% endtrans %}</th>
                <th>{% trans %}Progress{% endtrans %}</th>
                <th>{% trans %}Status{% endtrans %}</th>
                <th>{% trans %}Message{% endtrans %}</th>
              </tr>
            </thead>
            <tbody>
              {% for job in data.jobs.jobs %}
              <tr>
                <td class="small"><a href="{{ config['server']['url'] }}/jobs/{{ job.jobID}}">{{ job.jobID }}</a></td>
                <td class="small"><a href="{{ config['server']['url'] }}/processes/{{ job.processID}}">{{ job.processID }}</a></td>
                <td><abbr title="{{ job.job_start_datetime|format_datetime }}">{{ job.job_start_datetime|format_datetime }}</abbr></td>
                <td>
                  {% if job.status == 'running' %}
                    {{ job.job_start_datetime|format_duration(data.now) }}
                  {% else %}
                    {{ job.job_start_datetime|format_duration(job.job_end_datetime) }}
                  {% endif %}
                </td>
                <td>
                  <progress class="inline" value="{{job.progress|int*10}}" max="1000"></progress>
                </td>
                <td>
                  <mark class="{{job.status}}">{{ job.status }}</mark>
                </td>
                <td>
                  {{ job.message }}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          {% trans %}Limit{% endtrans %}:
          <select id="limits">
            <option value="{{ config['server']['limit'] }}">{{ config['server']['limit'] }} ({% trans %}default{% endtrans %})</option>
            <option value="100">100</option>
            <option value="1000">1,000</option>
            <option value="2000">2,000</option>
          </select>
          <script>
            var select = document.getElementById('limits');
            var defaultValue = select.getElementsByTagName('option')[0].value;
            let params = (new URL(document.location)).searchParams;
            select.value = params.get('limit') || defaultValue;
            select.addEventListener('change', ev => {
              var limit = ev.target.value;
              document.location.search = `limit=${limit}`;
            });
          </script>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          {% for link in data['jobs']['links'] %}
          {% if link['rel'] == 'prev' and data['offset'] > 0 %}
          <a role="button" href="{{ link['href'] }}">{% trans %}Prev{% endtrans %}</a>
          {% elif link['rel'] == 'next' and data['jobs']['jobs'] %}
          <a role="button" href="{{ link['href'] }}">{% trans %}Next{% endtrans %}</a>
          {% endif %}
          {% endfor %}
        </div>
      </div>

    </section>
{% endblock %}
