<script type="text/ng-template" id="bookings/modals/related_tasks.html">
	<div class="modal-header">
		<h3 class="modal-title">Link a new task</h3>
	</div>
	<div class="modal-body">
		<input type="text" class="form-control search-query" placeholder="Search by task id" ng-model="search.query">

		<div style="height: 200px; overflow-y: scroll; margin-top: 10px; margin-bottom: 10px;">
			<p class="text-center" ng-show="loading">Loading...</p>
			<p class="text-center" ng-show="tasks.length === 0">No results</p>
			<table class="table table-condensed" ng-hide="loading || tasks.length === 0">
				<thead class="table-header">
					<th>ID</th>
					<th>Name</th>
					<th></th>
					<th></th>
				</thead>
				<tbody>
					<tr ng-repeat="task in tasks">
						<td>{[{ task.id }]}</td>
						<td>{[{ task.title }]}</td>
						<td>{[{ task.status.name }]}</td>
						<td><span class="btn btn-default btn-xs pull-right" ng-disabled="exists(task)" ng-click="select(task)">Select</span></td>
					</tr>
				</tbody>
			</table>
		</div>

		{{-- Bottom area --}}
		<div class="headline">
			<h4><i class="fa fa-user"></i> Tasks to link</h4>
		</div>

		<p class="text-center" ng-show="data.length === 0">Nothing attached</p>
		<table class="table table-condensed">
			<tbody>
				<tr ng-repeat="task in data">
					<td>{[{ task.id }]}</td>
					<td>{[{ task.title }]}</td>
					<td>{[{ task.status.name }]}</td>
					<td><span class="btn btn-default btn-xs pull-right" ng-click="remove(task)">Remove</span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<button class="btn btn-default" ng-click="cancel()">Cancel</button>
		<button class="btn btn-primary" ng-disabled="data.length === 0" ng-click="link()">Link Tasks</button>
	</div>
</script>