<div class="modal-header">
	<!-- Name -->
	<h3 bs-popover
		template="kanbanNamePopover.html"
		placement="bottom"
		auto-close="true"
		class="modal-title kanban-clickable-title">
		{{card.name}}
		<span class="glyphicon glyphicon-pencil"></span>
	</h3>
	<script type="text/ng-template" id="kanbanNamePopover.html">
		<div class="popover">
			<div class="popover-content">
				<div class="form-group">
					<input type="text" ng-model="editable.name" class="form-control" wizdom365-set-focus="true" />
				</div>
				<div class="form-actions pull-right">
					<button ng-click="saveFieldChanges('name', $hide)" type="submit" class="btn btn-primary">
						{{'OK' | translate}}
					</button>
					<button ng-click="discardFieldChanges('name', $hide)" type="button" class="btn btn-default">
						{{'Cancel' | translate}}
					</button>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</script>
</div>
<div class="modal-body">
	<div class="col-sm-8">
		<!-- Description -->
		<div>
			<h5>{{'Description' | translate}}</h5>
			<p bs-popover
			   template="kanbanDescriptionPopover.html"
			   placement="bottom"
			   auto-close="true"
			   class="kanban-description kanban-clickable-field"
			   tabindex="0"
			   ng-bind-html="card.description || ('No description' | translate)  | wizdom365TrustHtml">
			</p>
			<script type="text/ng-template" id="kanbanDescriptionPopover.html">
				<div class="popover">
					<div class="popover-content">
						<div class="form-group">
							<textarea ng-model="editable.description"
									  rows="3"
									  class="form-control"
									  wizdom365-set-focus="true">
                            </textarea>
						</div>
						<div class="form-actions pull-right">
							<button ng-click="saveFieldChanges('description', $hide)" type="submit" class="btn btn-primary">
								{{'OK' | translate}}
							</button>
							<button ng-click="discardFieldChanges('description', $hide)" type="button" class="btn btn-default">
								{{'Cancel' | translate}}
							</button>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</script>
		</div>
		<!-- Tags -->
		<div>
			<h5>{{'Tags' | translate}}</h5>
			<div dropdown>
				<div dropdown-toggle class="kanban-clickable-field" tabindex="0">
					<span ng-if="card.tags.length === 0">{{'No tags' | translate}}</span>
					<span ng-repeat="tag in card.tags">
						<span class="label label-primary">{{tag.value}}</span>
					</span>
				</div>
				<ul ng-click="$event.stopPropagation()" class="dropdown-menu">
					<li ng-repeat="tag in boardProperties.tags">
						<a ng-click="toggleTag(tag)"
						   ng-class="{'kanban-selected-tag': getTagIndex(tag) !== -1}"
						   href="">{{tag.value}}</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- Attachments -->
		<div>
			<h5>{{'Attachments' | translate}}</h5>
			<div ng-repeat="attachment in originalCard.attachments" class="kanban-attachment">
				<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
				<a ng-href="{{attachment.value}}">{{attachment.key}}</a>
				<button ng-click="removeAttachment(attachment.key)" type="button" class="btn btn-xs">
					<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
				</button>
			</div>
			<label for="kanban-filepicker" class="btn btn-default btn-xs">
				<input id="kanban-filepicker"
					   type="file"
                       kanban-fileread="newFile"
                       card="originalCard"
					   class="ng-hide"
					   multiple />                
				<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&ensp;{{'Browse...' | translate}}
			</label>
		</div>
		<!-- Comments -->
		<div ng-if="card.comments">
			<h5>{{'Comments' | translate}}</h5>
			<div wizdom365-comments-panel itemid="card.id" itemtype="kanban" template-url="socialCommentsTemplate" allowedlevel="allowedCommentsLevel"></div>
		</div>
	</div>
	<div class="col-sm-4">
		<!-- Assigned to -->
		<div>
			<h5>{{'Assigned to' | translate}}</h5>
			<div>
				<div ng-repeat="member in card.assignedTo" class="media kanban-member">
					<div class="media-left media-middle">
						<img ng-src="{{member.pictureUrl}}" alt="{{member.displayName}}" class="media-object" />
					</div>
					<div class="media-body media-middle">
						<span>{{member.displayName}}</span>
					</div>
					<div class="media-right media-bottom">
						<button ng-click="removeMember(member)" type="button" class="btn btn-xs">
							<span class="glyphicon glyphicon-minus"></span>
						</button>
					</div>
				</div>
				<button bs-popover
						template="kanbanAssignToPopover.html"
						placement="bottom-right"
						auto-close="true"
						type="button"
						class="btn btn-xs btn-block">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
				</button>
				<script type="text/ng-template" id="kanbanAssignToPopover.html">
					<div class="popover">
						<div class="popover-content">
							<div class="form-group">
								<div wizdom365-principalpicker principals="card.members" mode="users" class="principal-picker" wizdom365-set-focus="true"></div>
							</div>
							<div class="form-actions pull-right">
								<button ng-click="addMembers($hide)" type="submit" class="btn btn-primary">
									{{'OK' | translate}}
								</button>
								<button ng-click="clearMembers($hide)" type="button" class="btn btn-default">
									{{'Cancel' | translate}}
								</button>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</script>
			</div>
		</div>
		<!-- Status -->
		<div class="kanban-inline clearfix">
			<h5>{{'Status' | translate}}</h5>
			<div dropdown class="pull-right">
				<button type="button" class="btn" dropdown-toggle>{{card.status}}</button>
				<ul class="dropdown-menu">
					<li ng-repeat="swimlane in boardProperties.swimlanes">
						<a ng-click="changeSelectField('status', swimlane)" href="">{{swimlane}}</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- Due date -->
		<div class="kanban-inline clearfix">
			<h5>{{'Due date' | translate}}</h5>
			<div class="pull-right">
				<!--<p class="input-group kanban-datepicker">
					<input ng-model="card.dueDate"
						   type="text"
						   datepicker-popup="dd-MM-yyyy"
						   datepicker-options="datepicker.options"
						   is-open="datepicker.opened"
						   class="form-control ng-hide" />
					<button ng-click="datepicker.toggleDatepicker()" type="button" class="btn">
						{{card.dueDate || '&#8210;' | wizdom365FormatDate | date:'dd-MM-yyyy'}}
					</button>
				</p>-->
				<div wizdom365-datetime-picker=""
					 disable-previously-dates="true"
					 date="card.dueDate"
					 disable-weekends="false"
					 show-date-picker="true"
					 show-time-picker="false"></div>
			</div>
		</div>
		<!-- Priority -->
		<div class="kanban-inline clearfix">
			<h5>{{'Priority' | translate}}</h5>
			<div dropdown class="pull-right">
				<button type="button" class="btn" dropdown-toggle>{{card.priority || '&#8210;'}}</button>
				<ul class="dropdown-menu">
					<li><a ng-click="changeSelectField('priority', null)" href="">&#8210;</a></li>
					<li ng-repeat="priority in boardProperties.priorities">
						<a ng-click="changeSelectField('priority', priority)" href="">{{priority}}</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- Estimated hours -->
		<div class="kanban-inline clearfix">
			<h5>{{'Estimated hours' | translate}}</h5>
			<div class="pull-right">
				<button bs-popover
						template="kanbanEstimatedHoursPopover.html"
						placement="bottom-right"
						auto-close="true"
						type="button"
						class="btn">
					{{card.estimatedHours || '&#8210;'}}
				</button>
			</div>
			<script type="text/ng-template" id="kanbanEstimatedHoursPopover.html">
				<div class="popover">
					<div class="popover-content">
						<div class="form-group">
							<input type="number" min="0" ng-model="editable.estimatedHours" ng-blur="roundEstimatedHours()" class="form-control" wizdom365-set-focus="true" />
						</div>
						<div class="form-actions pull-right">
							<button ng-click="saveFieldChanges('estimatedHours', $hide)" ng-disabled="!(editable.estimatedHours>=0)" type="submit" class="btn btn-primary">
								{{'OK' | translate}}
							</button>
							<button ng-click="discardFieldChanges('estimatedHours', $hide)" type="button" class="btn btn-default">
								{{'Cancel' | translate}}
							</button>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</script>
		</div>
	</div>
	<div class="clearfix"></div>
</div>
<div class="modal-footer">
	<button ng-click="remove()" type="button" class="btn btn-danger pull-left wiz-btn-padding">{{'Remove' | translate}}</button>
	<button ng-if="cardChanged()" ng-click="save()" type="button" class="btn btn-primary wiz-btn-padding">{{'Save' | translate}}</button>
	<button ng-click="close()" type="button" class="btn btn-default wiz-btn-padding">{{cardChanged() ? 'Cancel' : 'Close' | translate}}</button>
</div>
<wizdom365-spinner style="position: absolute;bottom: 100px; left: 50%;" loading="(working)"></wizdom365-spinner>