<div class="task-board-list">
	<div class="task-list-header mb-1" as-sortable-item-handle="">
		<div ng-attr-data-no-drag="{{ctrl.noDrag()}}">
			<span class="btn btn-link" ng-if="ctrl.list.list.expanded" ng-click="ctrl.collapseList(ctrl.list.list.id)">
				<ion-icon name="chevron-down-outline"></ion-icon>
			</span>
			<span class="btn btn-link" ng-if="!ctrl.list.list.expanded" ng-click="ctrl.expandList(ctrl.list.list.id)">
				<ion-icon name="chevron-up-outline"></ion-icon>
			</span>
			<span class="mt-1 mb-1 d-inline-block align-middle mr-3">
				<span class="status-dot" style="background: {{ctrl.list.list.colour}};"></span>
			</span>


		<span ng-if="!ctrl.editMode" ng-bind="ctrl.list.listName"></span>
		<span class="d-inline-block">
		<div ng-if="ctrl.editMode" class="form-inline" no-drag>
			<input class="form-control mr-2" type="text" ng-attr-id="list_{{ctrl.list.listId}}" ng-model="ctrl.editName" />
			<cla-colour-picker class="task-section-edit-colour mr-2" ng-model="ctrl.editColour"></cla-colour-picker>
			<a href="#0" class="btn btn-link" ng-click="ctrl.edit($event)">
				<ion-icon name="checkmark-circle-outline"></ion-icon>
			</a>
			<a href="#0" class="btn btn-link" ng-click="ctrl.cancelEdit($event)">
				<ion-icon name="close-circle-outline"></ion-icon>
			</a>
		</div>
		</span>

		<span class="d-inline-block align-middle ml-10">
			<cla-menu ng-if="ctrl.hasEditPerms" ng-attr-no-drag="{{ ctrl.editMode ? '' : undefined }}">
				<a class="dropdown-item" lmsg="projects:project:pin_project" ng-href="#0" ng-click="ctrl.startEdit($event)">
					<lmsg src="projects.tasks.board.edit_list">[Edit list]</lmsg>
				</a>
				<a class="dropdown-item" lmsg="projects:project:pin_project" ng-href="#0" ng-click="ctrl.delete($event)">
					<lmsg src="projects.tasks.board.delete_list">[Delete list]</lmsg>
				</a>
			</cla-menu>
		</span>
		</div>
	</div>

	<ng-transclude ng-if="ctrl.list.list.expanded"></ng-transclude>
</div>
