{% extends "wooey/base.html" %}
{% load i18n %}
{% load wooey_tags %}
{% block center_content_class %}col-md-12 col-xs-12{% endblock center_content_class %}

{% block center_content %}
    <div class="page-header">
        <h3 id="wooey-job-list-title">{{ title }}</h3>
        <p id="wooey-job-list-description">{% blocktrans with obj_len=object_list|length %}{{ obj_len }} job(s){% endblocktrans %}</p>
    </div>

  <div class="row">
    <div class="col-sm-12 col-md-12">
<div class="panel panel-default">
  <div class="panel-body panel-table">
      <table class="table table-striped table-hover table-responsive table-panel" id="wooey-job-table-user">
        <thead>
            <tr>
                <th>#</th>
                <th>{% trans "Job" %}</th>
                <th>{% trans "Script" %}</th>
                <th>{% trans "Submitted" %}</th>
                <th>{% trans "Status" %}</th>

            </tr>
        </thead>
        <tbody>
          {% for job in object_list %}
            <tr>
                <td>{{ job.id }}</td>
                <td><a href="{% url 'wooey:celery_results' job_id=job.pk %}">{{ job.job_name }}</a></td>
                <td>{{ job.script_version.script.script_name }}</td>
                <td>{{ job.created_date|timesince }} </td>

                <td>

                {% if job.status == 'completed' %}
                <span class="label label-success"><span class="glyphicon glyphicon-ok"></span> {% trans "Success" %}</span>
                {% elif job.status == 'running' %}
                <span class="label label-success"><span class="glyphicon glyphicon-refresh spinning"></span> {% trans "Executing" %}</span>
                {% elif job.status == 'pending' %}
                <span class="label label-default"><span class="glyphicon time"></span> {% trans "Queued" %}</span>
                {% elif job.status == 'revoked' %}
                <span class="label label-danger"><span class="glyphicon glyphicon-stop"></span> {% trans "Halted" %}</span>
                {% elif job.status == 'FAILURE' %}
                <span class="label label-danger"><span class="glyphicon glyphicon-exclamation-sign"></span> {% trans "Failure" %}</span>
                {% elif job.status == 'submitted' %}
                <span class="label label-default"><span class="glyphicon glyphicon-hourglass"></span> {% trans "Waiting" %}</span>
                {% else %}
                <span class="label label-danger"><span class="glyphicon glyphicon-question-sign"></span> {{ job.status|title }}</span>
                {% endif %}

                </td>

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

  </div>
  </div>

          </div>
  </div>


{% endblock %}

{% block inline_js %}
    {{ block.super }}
    <script  type="text/javascript">
    $(document).ready(function(){
        var $jobtable_user = $('#wooey-job-table-user');
        var wooey_dt_user = $jobtable_user.dataTable({
            "order": [[ 0, "desc" ]],
        });
    });
    </script>
{% endblock inline_js %}