<div class="tasks-board">
	<div class="tasks-board-scrollable">
		<clang-tasks-board-status-header status="ctrl.todoStatus"></clang-tasks-board-status-header>
		<div class="tasks-board-scrollable" as-sortable="ctrl.dragStatusListeners" ng-model="ctrl.orderableStatuses" is-disabled="{{!ctrl.HasStatusDragPerms()}}">
			<span class="tasks-board-draggable-heading" ng-repeat="status in ctrl.orderableStatuses" as-sortable-item="status">
				<clang-tasks-board-status-header status="status" task-count="status.taskCount" allow-drag="!ctrl.isMobile"></clang-tasks-board-status-header>
			</span>
		</div>
		<clang-tasks-board-status-header status="ctrl.doneStatus"></clang-tasks-board-status-header>
	</div>

	<div ng-if="ctrl.groupByList">
		<div as-sortable="ctrl.dragSectionListeners" ng-model="ctrl.tasks.lists" is-disabled="{{!ctrl.HasListDragPerms()}}" >
			<div ng-repeat="list in ctrl.tasks.lists" as-sortable-item="section">
				<clang-tasks-board-section list="list" allow-drag="!ctrl.isMobile">
					<div class="tasks-board-scrollable tasks-board-tasks">
						<clang-tasks-board-status status="status" list="list" ng-repeat="status in list.statuses">
							<div class="board-task-drop-container js-draggable" as-sortable="ctrl.dragTaskListeners" ng-model="status.tasks" is-disabled="{{!ctrl.HasTaskDragPerms()}}" data-list-id="{{list.list.id}}">
								<div ng-repeat="task in status.tasks" as-sortable-item="task">
									<project-task-item task="task" display="board" list="list" use-drag-and-drop="{{ctrl.perms.can_edit_any_task}}" task_delete="ctrl.taskDeletedCallback(task);" task_complete_toggled="ctrl.taskCompleteToggledCallback(task);" allow-drag="!ctrl.isMobile && ctrl.HasTaskDragPerms(task)"></project-task-item>
								</div>
							</div>
						</clang-tasks-board-status>
					</div>
				</clang-tasks-board-section>
			</div>
		</div>
	</div>

	<div ng-if="!ctrl.groupByList">
		<div class="tasks-board-scrollable tasks-board-tasks mt-2">
			<clang-tasks-board-status status="status" ng-repeat="status in ctrl.tasks.lists[0].statuses">
				<div class="js-draggable" as-sortable="ctrl.dragTaskListeners" ng-model="status.tasks" is-disabled="{{!ctrl.HasTaskDragPerms()}}">
					<div ng-repeat="task in status.tasks" as-sortable-item="task">
						<project-task-item task="task" display="board" list="list" use-drag-and-drop="{{ctrl.perms.can_edit_any_task == 1}}" task_delete="ctrl.taskDeletedCallback(task);" task_complete_toggled="ctrl.taskCompleteToggledCallback(task);" allow-drag="!ctrl.isMobile && ctrl.HasTaskDragPerms(task)"></project-task-item>
					</div>
				</div>
			</clang-tasks-board-status>
		</div>
	</div>

	<div class="tasks-board-saving text-center" ng-if="ctrl.tasksService.tasksUpdating">
		<b lmsg="projects.tasks.saving_changes">[Saving changes...]</b>
	</div>
</div>
