{% extends "base.html" %}

{% block main_content %}

<script>
    var active_rows=Array()
    var completed_rows=Array()

    {% for job in jobs %}
        {% if job.state == "Failed" %}
            row='<tr><td class="table-danger"><a href="{{url_for('joblog', id=job.id)}}">Job #{{job.id}} - {{job.name}}</a>'
        {% elif job.state == "Withdrawn" %}
            row='<tr><td class="table-secondary"><i><a href="{{url_for('joblog', id=job.id)}}">Job #{{job.id}} - {{job.name}}</a>'
        {% else %}
            row='<tr><td><a href="{{url_for('joblog', id=job.id)}}">Job #{{job.id}} - {{job.name}}</a>'
        {% endif %}
        {% if job.name != "rmdups" %}
            {% for ex in job.extra %}
                {% if 'path' == ex.name or ('path_prefix'==ex.name and job.name == 'checkdups') %}
                    row+=' ({{ex.name}} == {{ ex.value }})'
                {% endif %}
            {% endfor %}
        {% endif %}

        {% if job.state == "Withdrawn" %}
            row+= '</td><td>{{job.start_time}}</i></td><td>'
        {% else %}
            row+= '</td><td>{{job.start_time}}</td><td>'
        {% endif %}
        {% if job.pa_job_state != "Completed" %}
            {% if job.num_files and job.num_files > 0 %}
                {% set prog=(job.current_file_num/job.num_files*100)|round|int %}
                row +=`
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" style="width: {{prog}}%;" aria-valuenow="{{prog}}" aria-valuemin="0" aria-valuemax="100">
                            {{job.current_file_num}} of {{job.num_files}} - {{prog}}%
                        </div>
                    </div>
                    </td></tr>
                    `
            {% else %}
                   row += 'In Progress</td></tr>'
            {% endif %}
            active_rows.push(row)
        {% else %}
            row += '{{job.last_update}}</td></td></tr>'
            completed_rows.push(row)
        {% endif %}
    {% endfor %}
</script>

<div class="container-fluid">
<h3>{{page_title}}</h3>
<table id="job_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
	<thead>
		<tr class="table-primary"><th>Active Jobs</th><th>Job Started</th><th>Progress</th></tr>
	</thead>
	<tbody>
    <script>
        for(el in active_rows)
            document.write(active_rows[el])
        document.write( '<tr class="table-primary"><th>Completed Jobs</th><th>Job Started</th><th>Job Completed</th></tr>' )
        for(el in completed_rows)
            document.write(completed_rows[el])
    </script>
	</tbody>
</table>
</div class="container-fluid">
{% endblock main_content %}