{% extends "base.html" %}

{% block main_content %}

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

    function HandleStaleJob(id, action)
    {
        s='<form id="_fm" method="POST" action="/stale_job/' + id + '">'
        s+='<input type="hidden" name="action" value="' + action + '">'
        s+='</form>'
        $(s).appendTo('body').submit();
    }

    {% 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>"
            {% if job.pa_job_state == 'Stale' %}
                row+='<button class="btn btn-success py-0" onClick="HandleStaleJob({{job.id}}, \'restart\' )">Restart</button>'
                row+='<button class="btn btn-danger py-0" onClick="HandleStaleJob({{job.id}}, \'cancel\' )">Cancel</button>&nbsp;&nbsp;'
            {% endif %}
            row+='<a href="{{url_for('joblog', id=job.id)}}">Job #{{job.id}} - {{job.name}}</a>'
        {% endif %}
        {% if job.name != "rm_dups" %}
            {% for ex in job.extra %}
                {% if 'path' == ex.name or ('path_prefix'==ex.name and job.name == 'check_dups') %}
                    row+=' ({{ex.name}} == {{ ex.value }})'
                {% endif %}
            {% endfor %}
        {% endif %}

        {% if job.state == "Withdrawn" %}
            row+= '</td><td>{{job.start_time|vicdate}}</i></td><td>'
        {% else %}
            row+= '</td><td>{{job.start_time|vicdate}}</td><td>'
        {% endif %}
        {% if job.pa_job_state == "Stale" %}
            row += 'In Progress</td></tr>'
            active_rows.push(row)
        {% elif 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 title="{{job.current_file_num}} of {{job.num_files}} - {{prog}}%" 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|vicdate}}</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">
    {% if 'Stale' not in page_title %}
	<thead>
		<tr class="table-primary"><th>Active Jobs</th><th>Job Started</th><th>Progress</th></tr>
	</thead>
    {% endif %}
	<tbody id="job_tbl_body">
	</tbody>
</table>
</div class="container-fluid">

<script>
    for(el in active_rows)
        $('#job_tbl_body').append(active_rows[el])
        {% if 'Stale' not in page_title %}
            $('#job_tbl_body').append( '<tr class="table-primary"><th>Completed Jobs</th><th>Job Started</th><th>Job Completed</th></tr>' )
            for(el in completed_rows)
                $('#job_tbl_body').append(completed_rows[el])
        {% endif %}
        {% if 'recent' in page_title %}
            tr=`
                <tr>
                    <td><button type="button" class="btn btn-outline-info my-0 py-1" onClick="document.body.innerHTML+='<form id=_fm method=POST action={{url_for('jobs')}}></form>';document.getElementById('_fm').submit();">Show all jobs</button>
                    </td>
                 </tr>`
            $('#job_tbl_body').append( tr )
        {% endif %}
</script>
{% endblock main_content %}