<block id="page_body">
	<div class="container-center">
	<script>
		requirejs(['/intranet/projects/js/built/projects.task.js', 'jquery', 'cla_select2', 'domReady'], function (app, $, s2, domReady) {
			domReady(function ()
			{
				var preloadModule = angular.module('historyPreloadModule', []);
				preloadModule.factory('historyPreloadFactory', function(){
					return {
						statuses: ${task_statuses.json},
						lists: ${task_lists.json}
					}
				});

				angular.bootstrap(angular.element('#taskDetailApp'), ['taskDetailApp', 'historyPreloadModule', 'cla.projects_history']);
			});
		});
	</script>

	<include file="../../interface_default/common/user_picker_templater_includes.html">

		<div class="main-panel" id="taskDetailApp">
			<div ng-controller="taskDetailCtrl">
				<div class="row">
					<div class="col-md-9 order-2 order-md-1">
						<include file="task/detail.html">

							<div role="tabpanel" ng-cloak="">
								<!-- Nav tabs -->
								<ul class="nav nav-pills flex-column d-md-inline-flex flex-sm-row mb-3" role="tablist" id="nav-tabs">
									<li class="nav-item" role="presentation" ng-show="task.perms.can_view_discussion" ng-class="{active: tab==='discussion'}"  ng-click="onTabClick('discussionTab')">
										<a class="nav-link active" href="#discussionTab" aria-controls="discussionTab" role="tab" data-toggle="tab">
											<ion-icon name="chatbox-outline"></ion-icon>
											<span name="projects:project:discussion">[Discussion]</span>
											<span ng-show="tabs.discussionCount != 0" class="badge badge-light">{{tabs.discussionCount}}</span>
										</a>
									</li>
									<li class="nav-item" role="presentation" name="files_tab" ng-class="{active: tab==='files'}"  ng-click="onTabClick('filesTab')">
										<a class="nav-link" href="#filesTab" aria-controls="filesTab" role="tab" data-toggle="tab">
											<ion-icon name="document-outline"></ion-icon>
											<span name="projects:project:files">[Files]</span>
											<span ng-show="tabs.fileCount != 0" class="badge badge-light">{{tabs.fileCount}}</span>
										</a>
									</li>
									<li class="nav-item" role="presentation" ng-class="{active: tab==='history'}"  ng-click="onTabClick('historyTab')">
										<a class="nav-link" href="#historyTab" aria-controls="historyTab" role="tab" data-toggle="tab">
											<ion-icon name="time-outline"></ion-icon>
											<span name="projects:project:history">[History]</span>
										</a>
									</li>
								</ul>

								<!-- Tab panes -->
								<div class="tab-content">
									<div role="tabpanel" class="tab-pane" id="discussionTab" ng-show="task.perms.can_view_discussion" ng-class="{active: tab==='discussion', fade: tab!=='discussion'}">
										<include file="task/discussion.html">
										</div>

										<div role="tabpanel" class="tab-pane" id="filesTab" ng-class="{active: tab==='files', fade: tab!=='files'}">
											<include file="task/file.html">
											</div>

											<div role="tabpanel" class="tab-pane" id="historyTab" ng-class="{active: tab==='history', fade: tab!=='history'}">
												<include file="includes/history.html">
												</div>
											</div>
										</div>
							</div>
							<div class="col-md-3 order-1 order-md-2 mb-3 mb-md-0" ng-cloak="">

								<div class="mb-3 media" ng-show="isTaskCompletable(task)">
									<div class="media-body">
										<select
										ng-options="+(status.id) as status.name for status in task.status_list"
										ng-model="task.status_id"
										ng-change="setStatus($event)" aria-label="Task status" class="form-control"></select>
									</div>
									<div class="ml-2 mt-1">
										<cla-menu>
											<project-task-edit-button task="task" ng-click="startTaskEdit($event)" ng-show="isTaskEditable(task);"></project-task-edit-button>
											<a class="dropdown-item" id="follow-button" href="#0" ng-if="task.followed" ng-click="toggleFollow();$event.preventDefault();">
												<txt name="projects:project:unfollow">[Unfollow]</txt>
											</a>
											<a class="dropdown-item" id="follow-button" href="#0" ng-if="!task.followed" ng-click="toggleFollow();$event.preventDefault();">
												<txt name="projects:project:follow">[Follow]</txt>
											</a>
										</cla-menu>
									</div>
								</div>

								<!-- project name  -->
								<div class="mb-3" ng-if="project_id != 0">
									<span class="d-block font-weight-bold">
										<txt name="projects:task:source:project">[Project]</txt>:
									</span>
									<a href="/projects/{{project_id}}">{{project_name}}</a>
								</div>

								<!-- assigned to  -->
								<div class="mb-3">
									<span ng-if="task.assignees.length > 0" class="d-block text-muted small mb-2">
										<span lmsg="projects.task.assigned_to">[Assigned to]</span>:
									</span>

									<span ng-repeat="assigned in task.assignees">
										<a ng-if="assigned.profile_url !== null && assigned.name != ''" href="{{ assigned.profile_url }}" class="tasks-profile-single" rel="tooltip" title="{{assigned.name}}">
											<img class="profile-img tasks-profile-img" ng-src="{{assigned.profile_img || '/intranet/people/images/no_photo.jpg'}}">
										</a>

										<a ng-if="assigned.profile_url === null && assigned.name != ''" href="javascript:void(0)" class="tasks-profile-single cursor-default" rel="tooltip" title="{{assigned.name}}">
											<img class="profile-img tasks-profile-img" ng-src="{{assigned.profile_img || '/intranet/people/images/no_photo.jpg'}}">
										</a>
									</span>
								</div>

								<!-- created by  -->
								<div ng-if="task.created_by.name && task.created_by.name != ''" class="mb-3">
									<span class="d-block font-weight-bold">
										<span lmsg="projects.task.created_by">[Created by]</span>:
									</span>

									<a ng-if="task.created_by.profile_url !== null" href="{{task.created_by.profile_url}}" class="tasks-profile-single" rel="tooltip" title="{{task.created_by.name}}">
										<img class="profile-img tasks-profile-img" ng-src="{{task.created_by.profile_img || '/intranet/people/images/no_photo.jpg'}}">
									</a>

									<a ng-if="task.created_by.profile_url === null" href="javascript:void(0)" class="tasks-profile-single cursor-default" rel="tooltip" title="{{task.created_by.name}}">
										<img class="profile-img tasks-profile-img" ng-src="{{task.created_by.profile_img || '/intranet/people/images/no_photo.jpg'}}">
									</a>
								</div>

								<!-- due on -->
								<div ng-show="task.due_date!=0" class="mb-3">
									<span class="d-block font-weight-bold">
										<txt name="projects:task:due_on">[Due on]</txt>:
									</span>
									<span>{{task.due_date_formatted}}</span>
								</div>

								<div ng-if="task.duration > 0">
									<span class="d-block font-weight-bold">
										<txt name="projects:task:duration">[Duration]</txt>:
									</span>
									{{task.duration}}<span ng-if="project_id != 0"> {{task.duration_units}}</span>
								</div>


							</div>

						</div>
						</div>
						</div>

						<script type="text/javascript">
							var project_id=${project_id};
							var project_name =${project_name.json};
							var project_perms =${project_perms.json};
							var task = ${task.json};
							var due_date_formatted = ${due_date_formatted.json};
						</script>

					</div></block>

					<include file="layout/project_page.html" />
