<div class="row">
	<div class="col-xs-12">
		<h1 class="page-header">
			Tasks for List #<strong ng-bind="taskCtrl.listId"></strong>
		</h1>
        <a class="btn btn-default" href="#/list/{{taskCtrl.listId}}/task/add">New Task</a>
		<div class="table-responsive" ng-show="taskCtrl.tasks.length">
			<table class="table table-striped table-hover table-condensed ">
				<thead>
				<tr>
					<th width="50"></th>
					<th width="50"></th>
					<th width="50">ID</th>
					<th>Title</th>
					<th class="text-center" width="150">Status</th>
					<th>Description</th>
				</tr>
				</thead>
				<tbody>
				<tr ng-repeat="item in taskCtrl.tasks">
					<td>
						<a ng-href="#/list/{{item.list.listId}}/task/edit/{{item.taskId}}"
						   class="btn btn-default btn-xs" data-toggle="tooltip"
						   data-placement="bottom" title="click here to edit this task">
							<span class="fa fa-pencil fa-lg text-primary"></span>
						</a>
					</td>
					<td>
						<a ng-click="taskCtrl.delete(item,$index)" class="btn btn-default btn-xs" data-toggle="tooltip"
						   data-placement="bottom" title="click here to delete this task">
							<span class="fa fa-remove fa-lg text-danger"></span>
						</a>
					</td>
					<td ng-bind="item.taskId"></td>
					<td ng-bind="item.title"></td>
					<td class="text-center">
						<div class="btn-group">
							<a class="btn btn-xs btn-default" ng-click="taskCtrl.setStatus(item,1)"
							   ng-class="{'btn-danger':item.status==1}">ToDo</a>
							<a class="btn btn-xs btn-default" ng-click="taskCtrl.setStatus(item,2)"
							   ng-class="{'btn-warning':item.status==2}">Doing</a>
							<a class="btn btn-xs btn-default" ng-click="taskCtrl.setStatus(item,3)"
							   ng-class="{'btn-success':item.status==3}">Done</a>
						</div>
					</td>
					<td ng-bind="item.description"></td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="alert alert-warning" ng-hide="taskCtrl.tasks.length">
			You have not created any task yet. click <a href="#/list/{{taskCtrl.listId}}/task/add">here</a> to create a
			new task
		</div>

		<div class="modal fade" id="delete-confirm-modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">Delete Confirmation</h4>
					</div>
					<div class="modal-body">
						<p>Are you sure you want to delete this task ?</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"
						        ng-click="taskCtrl.deleteCanceled()">Cancel
						</button>
						<button type="button" class="btn btn-default btn-sm" ng-click="taskCtrl.deleteConfirmed()">
							<span class="fa fa-remove fa-lg text-danger"></span>
							Delete
						</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

	</div>
</div>