<!-- Board -->
<div class="kanban-board">
	<!-- Error message -->
	<alert type="danger" close="closeAlert()" ng-if="showAlert">{{'Error connecting to server' | translate}}</alert>
	<!-- 'Edit Swimlanes'-button -->
	<button ng-if="board" ng-click="editSwimlanes()" type="button" class="btn btn-link btn-xs kanban-edit-swimlanes-btn">
		<span class="glyphicon glyphicon glyphicon-align-left" aria-hidden="true"></span>
	</button>
	<!-- Swimlanes -->
	<div ng-repeat="swimlane in board.swimlanes" kanban-swimlane="{{swimlane}}" kanban-sortable>
		<h4>{{swimlane}} <span ng-show="filteredCards.length > 0" class="badge">{{filteredCards.length}}</span></h4>
		<!-- Cards -->
		<div ng-repeat="card in filteredCards = (board.cards | filter:{status:swimlane}:true | orderBy:cardOrder)"
			 kanban-card="{{card.$$hashKey}}"
             card="{{card}}"
			 class="panel panel-default">
			<div class="kanban-card-header">
				<h5 ng-click="openCardDetails(card)">{{card.name}}</h5>
				<div>
					<span ng-if="card.assignedTo.length <= 2" ng-repeat="member in card.assignedTo" class="kanban-member">
						<!-- <img ng-src="{{member.pictureUrl}}" alt="{{member.displayName}}" />  -->
						<div wizdom365-presence-picture
							 size="AVATAR"
							 email=""
							 accountname="member.loginName"
							 name="member.displayName"
							 url="member.pictureUrl"
							 image="memeber.pictureUrl"></div>
					</span>
					<span ng-if="card.assignedTo.length > 2" class="kanban-member">
						<svg>
							<text x="8px" y="15px" font-weight="600">
								{{card.assignedTo.length}}
							</text>
						</svg>
					</span>
				</div>
			</div>
			<div class="kanban-card-footer">
				<div>
					<span ng-if="card.tags.length" tooltip="{{getTagsNameArray(card.tags)}}" tooltip-trigger="mouseenter">
						<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>&thinsp;
						{{card.tags.length}}
					</span>
					<span ng-if="card.estimatedHours" tooltip="{{'Hours' | translate}}" tooltip-trigger="mouseenter">
						<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
						{{card.estimatedHours}}
					</span>
					<span ng-if="card.priority" tooltip="{{'Priority' | translate}}" tooltip-trigger="mouseenter">
						<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
						{{card.priority}}
					</span>
					<span ng-if="card.attachments.length" tooltip="{{'Attachments' | translate}}" tooltip-trigger="mouseenter">
						<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
						{{card.attachments.length}}
					</span>
				</div>
				<div>
					<span ng-if="card.dueDate" tooltip="{{'Due date' | translate}}" tooltip-trigger="mouseenter">
						<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
						{{card.dueDate | wizdom365FormatDate | date:'dd. MMM'}}
					</span>
				</div>
			</div>
		</div>
		<!-- 'Add card'-button -->
		<button ng-click="createNewCard(swimlane)" type="button" class="btn btn-link kanban-add-card">{{'Add card' | translate}}</button>
	</div>
</div>
