

<div ng-if="ctrl.isDraggable()" as-sortable-item-handle="">
	<div class="board-status-column board-status-header" ng-attr-no-drag="{{ ctrl.editMode ? '' : undefined }}">
		<div class="media board-status-media">
			<div class="mr-3">
				<span ng-if="ctrl.status.id < 0 && ctrl.status.id === -2">
					<ion-icon class="text-muted" name="checkmark-done-circle-outline"></ion-icon>
				</span>
				<span ng-if="ctrl.status.id < 0 && ctrl.status.id === -1">
					<ion-icon class="text-muted" name="list-circle-outline"></ion-icon>
				</span>
			</div>
			<div class="media-body align-middle">
				<div ng-if="!ctrl.editMode">
					<span ng-bind="ctrl.status.localized_name">[List name]</span>
				</div>
				<div ng-if="ctrl.editMode" class="form-inline">
					<input type="text" class="form-control board-status-input" id="status_header_{{ctrl.status.id}}" ng-model="ctrl.editName" />
					<a href="#0" class="btn btn-link btn-sm btn-board-status" title="Save" ng-click="ctrl.rename($event)">
						<ion-icon name="checkmark-circle-outline"></ion-icon>
					</a>
					<a href="#0" class="btn btn-link btn-sm btn-board-status" title="Cancel" ng-click="ctrl.cancelRename($event)">
						<ion-icon name="close-circle-outline"></ion-icon>
					</a>
				</div>
			</div>
			<div class="ml-2">
				<cla-menu slot="menu" close-on-select ng-if="ctrl.hasEditPerms" ng-attr-no-drag="{{ ctrl.editMode ? '' : undefined }}">
					<a class="dropdown-item" lmsg="projects:project:unpin_project" ng-href="#" ng-if="ctrl.status.id !== -1" ng-click="ctrl.addStatusBefore($event)">
						<ion-icon class="align-bottom" name="arrow-back-outline"></ion-icon>
						<lmsg src="projects.tasks.board.add_status_before">[Add status before]</lmsg>
					</a>
					<a class="dropdown-item" lmsg="projects:project:unpin_project" ng-href="#" ng-if="ctrl.status.id !== -2" ng-click="ctrl.addStatusAfter($event)">
						<ion-icon class="align-bottom" name="arrow-forward-outline"></ion-icon>
						<lmsg src="projects.tasks.board.add_status_after">[Add status after]</lmsg>
					</a>
					<a class="dropdown-item" ng-href="#" ng-click="ctrl.startRename($event)">
						<ion-icon class="align-bottom" name="text-outline"></ion-icon>
						<lmsg src="projects.tasks.board.rename_status">[Rename status]</lmsg>
					</a>
					<a class="dropdown-item" lmsg="projects:project:pin_project" ng-href="#" ng-if="ctrl.status.id > 0" ng-click="ctrl.delete($event)">
						<ion-icon class="align-bottom" name="trash-outline"></ion-icon>
						<lmsg src="projects.tasks.board.delete_status">[Delete status]</lmsg>
					</a>
				</cla-menu>
			</div>
		</div>
	</div>
</div>

<div class="board-status-column board-status-header" ng-if="!ctrl.isDraggable()">
	<div class="media board-status-media">
		<div class="mr-3">
			<span ng-if="ctrl.status.id < 0 && ctrl.status.id === -2">
				<ion-icon class="text-muted" name="checkmark-done-circle-outline"></ion-icon>
			</span>
			<span ng-if="ctrl.status.id < 0 && ctrl.status.id === -1">
				<ion-icon class="text-muted" name="list-circle-outline"></ion-icon>
			</span>
		</div>
		<div class="media-body align-middle">
			<div ng-if="!ctrl.editMode">
				<span ng-bind="ctrl.status.localized_name">[List name]</span>
			</div>
			<div ng-if="ctrl.editMode" class="form-inline"å>
				<input type="text" id="status_header_{{ctrl.status.id}}" class="form-control board-status-input" ng-model="ctrl.editName" />
				<a href="#0" class="btn btn-link btn-sm btn-board-status" title="Save" ng-click="ctrl.rename($event)">
					<ion-icon name="checkmark-circle-outline"></ion-icon>
				</a>
				<a href="#0" class="btn btn-link btn-sm btn-board-status" title="Cancel" ng-click="ctrl.cancelRename($event)">
					<ion-icon name="close-circle-outline"></ion-icon>
				</a>
			</div>
		</div>
		<div class="ml-2">
			<cla-menu slot="menu" close-on-select ng-if="ctrl.hasEditPerms">
				<a class="dropdown-item" lmsg="projects:project:unpin_project" ng-href="#0" ng-if="ctrl.status.id !== -1" ng-click="ctrl.addStatusBefore($event)">
					<ion-icon class="align-bottom" name="arrow-back-outline"></ion-icon>
					<lmsg src="projects.tasks.board.add_status_before">[Add status before]</lmsg>
				</a>
				<a class="dropdown-item" lmsg="projects:project:unpin_project" ng-href="#0" ng-if="ctrl.status.id !== -2" ng-click="ctrl.addStatusAfter($event)">
					<ion-icon class="align-bottom" name="arrow-forward-outline"></ion-icon>
					<lmsg src="projects.tasks.board.add_status_after">[Add status after]</lmsg>
				</a>
				<a class="dropdown-item" ng-href="#0" ng-click="ctrl.startRename($event)">
					<ion-icon class="align-bottom" name="text-outline"></ion-icon>
					<lmsg src="projects.tasks.board.rename_status">[Rename status]</lmsg>
				</a>
				<a class="dropdown-item" lmsg="projects:project:pin_project" ng-href="#0" ng-if="ctrl.status.id > 0" ng-click="ctrl.delete($event)">
					<ion-icon class="align-bottom" name="trash-outline"></ion-icon>
					<lmsg src="projects.tasks.board.delete_status">[Delete status]</lmsg>
				</a>
			</cla-menu>
		</div>
	</div>
</div>
