{% extends "base.html" %}

{% block content %}
	<ul class="list-group">

		<li class="list-group-item new-task-item task-item">
		  	<form action="/add/" method="post">
		  		{% csrf_token %}
				<div class="col-xs-1 form-group">
				</div>
				<div class="col-xs-10 form-group">
					<input class="form-control" name="name" placeholder="Enter a new job name...">
				</div>
				<div class="col-xs-1 form-group">
					<button type="submit" class="btn btn-link">
		  				<span class="fa fa-check save-button"></span>						
					</button>					
				</div>
			</form>
		</li>

                <li class="list-group-item task-item">
                <div class="col-xs-1">
                     done
                </div>
                <div class="col-xs-10">
                  job name
                </div>
                <div class="col-xs-10">
                  date created
                </div>
                <div class="col-xs-1">
                  delete
                </div>
                </li>                 
		{% for task in tasks %}
			<li class="list-group-item task-item">
			  	<div class="col-xs-1">
		  			{% if task.done %}
			  			<span class="fa fa-check-square-o"></span>
					{% else %}
					  {% if task.running > 0  %}
			  			<span class="fa fa-spinner
			  			fa-spin"></span>
			  			{{ task.running }}%
			                  {% else %}
			                        <span class="fa fa-square-o"></span>
			                  {% endif %}
					{% endif %}

			  	</div>
				<div class="col-xs-10">
                                  <a href="/details/{{task.id}}/">
				  {{ task.name }}</div>
				  </a>
				<div class="col-xs-10">{{ task.created_date  }}</div>
			  	<div class="col-xs-1 actions-column">
			  		<a href="/delete/{{task.id}}/"><span class="fa fa-times"></span></a>
			  	</div>
			</li>		
		{% endfor %}		
	</ul>

<form action="/refresh_done/" method="post">
{% csrf_token %}
<input type="submit" class="btn" value="Refresh" name="refreshbtn">
</form>
<h6 style="text-align:right;float:right;">
{{ variable }} </h6>

{% endblock %}