<span class="title" data-bind="css: {'cannotDrag': $parent.subfolders && $parent.subfolders().length === 1}">
	<span class="controls">
		<span class="button subscribe" data-bind="customTooltip: subscribeButtonHint(), css: {'subscribed': subscribed(), 'disabled': !canSubscribe()}, click: function(oFolder) { $root.onSubscribeFolderClick(oFolder); }"></span>
		<span class="button disabled" data-bind="customTooltip: deleteButtonHint(), css: {'delete': !isSystem() && selectable(), 'disabled': !canDelete()}, click: function(oFolder) { $root.onDeleteFolderClick(oFolder, $parent); }"></span>
	</span>
	<span class="count" data-bind="text: messageCount"></span>
	<span class="name">
		<span class="icon" data-bind="css: 'type' + type()"></span>
		<span class="text" data-bind="css: {'link': canRename}, text: name, visible: !edited(), click: function(){if (canRename()) edited(true);}"></span>
		<input type="text" spellcheck="false" class="input" maxlength="30" data-bind="value: nameForEdit, visible: edited, hasfocus: edited, onEnter: function (oFolder) { $root.folderEditOnEnter(oFolder); }, onEsc: function (oFolder) { $root.folderEditOnEsc(oFolder); }">
		<span class="text" data-bind="text: usedAs()"></span>
	</span>
</span>

<!-- ko if: subfolders().length > 0 -->
<div class="children" data-bind="sortable: {data: subfolders, connectClass: fullNameHash(), 
	 afterMove: $root.afterSortableFolderMoveBinded, options: {axis: 'y', revert: true}}">
	<div class="item canSelect canDrag" data-bind="visible: !virtual(), template: { name: 'Settings_AccountFolderItemMovedWithMouse'},
		 css: {'canSubscribe': canSubscribe, 'canRename': canRename, 'canDelete': canDelete}"></div>
</div>
<!-- /ko -->
