@section('header')
	@include('common.header')
@stop

@section('js')
	<script type="text/ng-template" id="admin/modals/task-template.html">
		@include('admin::templates.modals.task-template')
	</script>
	<script type="text/ng-template" id="admin/modals/task-template-item.html">
		@include('admin::templates.modals.task-template-item')
	</script>
@stop

@section('content')
	<div class="row" ng-controller="AdminTaskTemplatesCtrl" ng-cloak>
		<div class="col-sm-2">
			<span class="btn btn-block btn-primary" style="margin-top: 15px;" ng-click="showTemplateModal()"><i class="fa fa-plus"></i> Add a new template</span>
		</div>

		<div class="col-sm-10">
			<div class="widget widget-classic">
				<div class="widget-content">

					<div class="headline">
						<h4><i class="fa fa-check-square-o"></i> Task Templates</h4>
					</div>

					<p class="lead">From here you can create new templates for tasks and define items for each template.</p>

					<div ng-if="templates.length > 0">
						<table class="table table-condensed templates-list-table">
							<thead class="table-header">
								<th style="width: 30px;"></th>
								<th style="width: 40px;">ID</th>
								<th>Name</th>
								<th>Related Types</th>
								<th>Priority</th>
								<th width="10%"></th>
							</thead>
							<tbody ng-repeat="template in templates">
								<tr>
									<td><i class="fa-lg" ng-class="{'fa fa-plus-square-o': ! template.expanded, 'fa fa-minus-square-o': template.expanded}" ng-click="template.expanded = ! template.expanded"></i></td>
									<td>{[{ template.id }]}</td>
									<td><span editable-text="template.name" e-class="col-sm-10" onbeforesave="updateTemplate(template, $data)">{[{ template.name }]}</span></td>
									<td>
										<span ng-repeat="taskType in template.task_types" class="choice-option" > {[{ taskType.name}]} </span>
									</td>
									<td>{[{ template.priority }]}</td>
									<td>
										<a href="#" class="btn btn-default" ng-click="edit(template)" eat-click><i class="fa fa-pencil"></i></a>
										<a href="#" class="btn btn-danger" ng-confirm-click="Are you sure you want to delete this template?" confirmed-click="delete(template)" eat-click><i class="fa fa-trash-o"></i></a>
									</td>
								</tr>
								<tr ng-show="template.expanded">
									<td colspan="2"></td>
									<td>
										<div style="padding: 20px;">
											<div class="headline">
												<h4>Template items</h4>
											</div>
											<table class="table">
												<thead class="table-header">
													<th style="width: 30px;">ID</th>
													<th>Description</th>
													<th></th>
												</thead>
												<tr ng-repeat="item in template.items">
													<td>{[{ item.id }]}</td>
													<td><span editable-textarea="item.description" e-class="col-sm-10" onbeforesave="updateTemplateItem(item, $data)">{[{ item.description }]}</span></td>
													<td><a href="#" class="pull-right" ng-confirm-click="Are you sure you want to delete this item?" confirmed-click="deleteItem(template, item)" eat-click>Delete</a></td>
												</tr>
											</table>
											<span class="btn btn-success" ng-click="showTemplateItemModal(template)" style="margin-top: 10px;"><i class="fa fa-plus"></i> Add new item</span>
										</div>
									</td>
									<td></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
@stop