<div class="task-group-inner">

	<form name="TemplatesForm" class="form-inline" ng-submit="updateTask($event)">
		<div ui-select2="select2Options" ng-model="task.templates" class="col-sm-12" multiple="true" placeholder="Search for a template"></div>
	</form>
	<div class="clearfix"></div>

	<br>

	<p ng-if="task.templates.length == 0"><i class="fa fa-info-circle"></i> There are no templates assigned at the moment.</p>

	<div ng-repeat="template in task.templates">
		<table class="table">
			<thead class="table-header">
				<th colspan="4">{[{ template.name }]}</th>
			</thead>
			<tbody>
				<tr ng-repeat="item in template.items">
					<td style="width: 30px;"><input type="checkbox" ng-checked="item.done" ng-change="done(item)" ng-model="item.done"></td>
					<td style="width: 30px;"><a href="#" ng-click="notRequired(item)" ng-hide="item.notRequired || item.done" class="text-danger">Not required</a></td>
					<td>{[{ item.description }]}</td>
					<td><span class="label label-success pull-right" ng-show="item.done">COMPLETED</span><span class="label label-danger pull-right"  ng-show="item.notRequired">NOT REQUIRED</span></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>