{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ bootstrap_find_resource('css/jquery.dataTables.css', cdn='datatables', use_minified=True) }}">
{% endblock %}

{% block app_content %}
<h1>Manage Tasks</h1>
<div class="row">
	<div class="col-md-4">
		{{ wtf.quick_form(form, button_map={'assign': 'primary', 'delete': 'danger'}) }}
	</div>
</div>
<br>
<h1>Task Overview</h1>
<article class="overview">
    <a href="./tasks/download">Download as CSV</a>
    <br>
    <br>
	<table id="tasks" class="table table-striped">
		<thead class="thead-dark">
			<th scope="col">Task ID</th>
			<th scope="col">Dataset Name</th>
			<th scope="col">Username</th>
			<th scope="col">Status</th>
			<th scope="col">Completed On</th>
		</thead>
		{% for task in tasks %}
		<tr>
			<th scope="row">{{ task.id }}</th>
			<td>{{ task.dataset.name }}</td>
			<td>{{ task.user.username }}</td>
			<td>{% if task.done %}Completed{% else %}Pending{% endif %}</td>
			<td>{% if task.done %}{{ task.annotated_on }}{% else %}{% endif %}</td>
		</tr>
		{% endfor %}
		</tr>
	</table>
</article>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
  <script>$(document).ready(function() { $('#tasks').DataTable({"pageLength": 25}); });</script>
{% endblock scripts %}