<!--- START View Task -->
<div ng-if="item.display !== 'board'">
	<div class="task-item list-task">
		<div as-sortable-item-handle="">
			<!-- start bootstrap grid -->
			<div class="list-draggable-area" ng-attr-data-no-drag="{{item.noDrag()}}">
				<div class="media">
					<div class="mr-1">
						<clang-checkbox name="checkbox_{{item.task.id}}" large="1" ng-model="item.task.is_complete" ng-change="item.completeToggled($event)" ng-show="item.task.perms.can_update"></clang-checkbox>
					</div>
					<div class="media-body">
						<div class="row">
							<div class="col-12">
								<div class="media">
									<div class="media-body">
										<span ng-class="{'task-item-complete': item.task.is_complete}">
											<a ng-if="item.task.title !== item.task.title_truncated" ng-href="/projects/task/{{item.task.id}}" rel="tooltip" data-original-title="{{item.task.title}}">{{item.task.title_truncated}}</a>
											<a ng-if="item.task.title === item.task.title_truncated" ng-href="/projects/task/{{item.task.id}}">{{item.task.title}}</a>
											<a ng-href="{{item.task.source.link}}" ng-show="(item.showSource) && (item.task.source) && (item.task.source.name !== '')"><span class="text-muted">({{item.task.source.name}})</span></a>
										</span>
									</div>

									<div class="ml-2">
										<!--- edit -->
										<span ng-if="item.showEdit" >
											<button class="js-task_edit_button_{{item.task.id}} btn btn-link btn-sm" rel="tooltip" lmsg="title:common.edit" name="projects:task:edit" ng-click="item.startTaskEdit($event, item.task.id)" ng-if="item.task.perms.can_edit">
												<ion-icon name="create-outline"></ion-icon>
											</button>
										</span>
									</div>
								</div>
							</div>
						</div>


						<div class="row">
							<div class="col-12 align-self-center">
								<!--- due date -->
								<span ng-if="item.showDate">
									<span class="py-1 pl-0 pr-2 pl-0 mr-2 float-left align-middle" ng-if="item.task.due_date_formatted != ''">
										<span ng-class="{'text-danger': item.task.due_date_type=='overdue', 'text-info': item.task.due_date_type=='today'}">
											<ion-icon class="task-item-icon task-item-icon-gray" name="calendar-outline"></ion-icon>
											<span class="align-middle small" ng-if="item.task.due_date_type!='today' && item.task.due_date_type!='tomorrow'">{{item.task.due_date_formatted}}</span>
											<span class="align-middle small" ng-if="item.task.due_date_type=='today'" rel="tooltip" data-original-title="{{item.task.due_date_formatted}}">Today</span>
											<span class="align-middle small task-item-text" ng-if="item.task.due_date_type=='tomorrow'" rel="tooltip" data-original-title="{{item.task.due_date_formatted}}">Tomorrow</span>
										</span>
									</span>
								</span>

								<!--- Status indicator -->
								<span ng-if="item.task.priority !== 0" ng-switch="item.task.priority" class="py-1 pl-0 pr-2 pl-0 mr-2 float-left align-middle">
									<span class="priority-low text-success" ng-switch-when="1">
										<ion-icon class="task-item-icon" name="arrow-down-outline"></ion-icon>
									</span>
									<span class="priority-medium text-warning" ng-switch-when="2">
										<ion-icon class="task-item-icon" name="arrow-up-outline"></ion-icon>
									</span>
									<span class="priority-high text-danger" ng-switch-when="3">
										<ion-icon class="task-item-icon" name="arrow-up-outline"></ion-icon>
									</span>
								</span>

								<!--- private note -->
								<span ng-if="item.showPrivate" class="float-left align-middle">
									<span class="py-1 pl-0 pr-2 pl-0 mr-2 float-left" ng-if="item.task.is_private">
										<ion-icon class="task-item-icon task-item-icon-gray" name="lock-closed-outline"></ion-icon>
									</span>
								</span>

								<!--- comments -->
								<span class="float-left align-middle">
									<a href="/projects/task/{{item.task.id}}" class="py-1 pl-0 pr-2 pl-0 mr-2 float-left text-reset" ng-if="item.task.comments_count>0">
										<ion-icon class="task-item-icon task-item-icon-gray" name="chatbox-outline"></ion-icon>
										<span class="small task-item-text">{{item.task.comments_count}}</span>
									</a>
								</span>

								<!--- files -->
								<span ng-if="item.showFiles" class="float-left align-middle">
									<a href="/projects/task/{{item.task.id}}#/filesTab" ng-if="item.task.has_file_storage" class="py-1 pl-0 pr-2 pl-0 mr-2 d-inline-block text-reset">
										<ion-icon class="task-item-icon task-item-icon-gray" name="attach-outline"></ion-icon>
									</a>
								</span>

								<!-- Status -->
								<span class="float-left align-middle py-1 pl-0 pr-2 pl-0 mr-2">
									<cla-badge styleclass="badge badge-pill badge-secondary">{{(item.task.status_list | filter : {id: item.task.status_id})[0].name }}</cla-badge>
								</span>

								<!--- assigned to -->
								<div ng-if="item.showAssignees && item.task.assignees.length !== 0" class="py-1 pl-0 pr-2 pl-0 float-left align-middle">
									<clang-user-list class="users d-inline-block mr-2" style="width: 130px;" plusnumber="{{item.task.assignees.length - 3}}" on-plus-clicked="item.additionalAssigneesClick()">
										<a ng-href="{{user.profile_url}}" ng-repeat="assignee in item.task.assignees | limitTo: 3">
											<clang-user-list-item img="{{assignee.profile_img }}" name="{{assignee.name}}" profile="{{assignee.profile_url}}"></clang-user-list-item>
										</a>
									</clang-user-list>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div ng-if="item.display === 'board'">

	<div class="task-item form-inline board-task" as-sortable-item-handle="">
		<div class="list-draggable-area card rounded-corners d-block w-100" ng-attr-data-no-drag="{{item.noDrag()}}">
			<span class="card-status-border" ng-style="{'background-color': item.list.list.colour}"></span>
			<div class="card-body">
				<div class="row">
					<div class="col-md-12">
						<div class="text-break board-task-title">
							<a ng-if="item.task.title !== item.task.title_truncated" ng-href="/projects/task/{{item.task.id}}" rel="tooltip" data-original-title="{{item.task.title}}">{{item.task.title_truncated}}</a>
							<a ng-if="item.task.title === item.task.title_truncated" ng-href="/projects/task/{{item.task.id}}">{{item.task.title}}</a>
							<a ng-href="{{item.task.source.link}}" ng-show="(item.showSource) && (item.task.source) && (item.task.source.name !== '')">
								<span class="text-muted">({{item.task.source.name}})</span>
							</a>
						</div>

						<!--- due date -->
						<div class="mt-1" ng-if="item.showDate">
							<span ng-if="item.task.due_date_formatted != ''">
								<span ng-class="{'text-danger': item.task.due_date_type=='overdue'}">
									<span>Due: </span> {{item.task.due_date_formatted}}
								</span>
							</span>
						</div>
					</div>
				</div>
				<div class="row mt-2">
					<div class="col-7">
						<!--- assigned to -->
						<div ng-if="item.showAssignees" class="mt-1">
							<clang-user-list class="users d-inline-block mr-2" style="width:145px;" plusnumber="{{item.task.assignees.length - 3}}" on-plus-clicked="item.additionalAssigneesClick()">
								<a ng-href="{{user.profile_url}}" ng-repeat="assignee in item.task.assignees | limitTo: 3">
									<clang-user-list-item img="{{assignee.profile_img }}" name="{{assignee.name}}" profile="{{assignee.profile_url}}"></clang-user-list-item>
								</a>
							</clang-user-list>
						</div>
					</div>
					<div class="col-5">
						<!--- Status indicator -->
						<span class="float-right mt-1" ng-switch="item.task.priority">
							<cla-status-indicator color="#5cb85c" badgestyle="true" size="x-small" ng-switch-when="1"><small>Low</small></cla-status-indicator>
							<cla-status-indicator color="#f0ad4e" badgestyle="true" size="x-small" ng-switch-when="2"><small>Medium</small></cla-status-indicator>
							<cla-status-indicator color="#d9534f" badgestyle="true" size="x-small" ng-switch-when="3"><small>High</small></cla-status-indicator>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
<!--- END View Task -->
