<!-- ko if: !bIsHidden -->
<div class="item file" data-test-id="files-item" data-bind="
	event: allowDrag() ? { 'dragstart': eventDragStart } : null,
	draggablePlace: allowDrag() ? function (file, ctrlOrCmdUsed) { return $parent.dragAndDropHelper(file, ctrlOrCmdUsed); } : null,
	draggableDragStartCallback: function() { if (allowDrag()) $root.dragover(true); },
	draggableDragStopCallback: function() { if (allowDrag()) $root.dragover(false); },
	css: cssClasses"
>
	<div class="item_content dragHandle">
		<div class="image" data-bind="customTooltip: getTooltip(iconAction()), click: function () { executeAction(iconAction()); },
				css: {'has_action': iconAction() !== ''}, clickBubble: iconAction() === ''">
			<!-- ko if: thumbnailSrc() !== '' -->
			<img data-bind="attr: {'src': thumbnailSrc()}" />
			<!-- /ko -->
			<!-- ko if: thumbnailSrc() === '' -->
			<span class="icon" data-bind="css: extension().toLowerCase()"></span>
			<!-- /ko -->
			<!-- ko if: sharedWithMe -->
			<span class="file_shared_with_me_icon" data-bind="customTooltip: sHeaderText"></span>
			<!-- /ko -->
		</div>
		<div class="name">
			<div data-bind="text: displayName"></div>
			<div class="data">
				<span data-bind="text: friendlySize"></span>
				|
				<span data-bind="text: sLastModified"></span>
			</div>
		</div>
		<div class="file_states">
			<!-- ko if: (bIsSecure()) -->
			<span class="file_encrypted_icon" data-bind="click: function (oItem) { $root.onSecureIconClick(oItem); }"></span>
			<!-- /ko -->
			<!-- ko if: (sharedWithOthers()) -->
			<span class="file_shared_icon" data-bind="click: function (oItem) { $root.onFileShareIconClick(oItem); }"></span>
			<!-- /ko -->
			<!-- ko if: (allowPublicLink() && published()) -->
			<span class="file_published_icon" data-bind="click: function (oItem) { $root.onShareIconClick(oItem); }"></span>
			<!-- /ko -->
			<!-- ko if: $root.bAllowFavorites && !$root.bPublic -->
			<span class="file_favorite_icon" data-bind="css: {'favorite_set': favorite }, click: function (oItem) { $root.onFavoriteClick(oItem); }"></span>
			<!-- /ko -->
		</div>
		<div class="spacer"></div>
		<span class="progress" data-bind="visible: visibleProgress()">
			<span data-bind="text: progressText"></span>
			<a href="javascript: void(0)" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_CANCEL'},
			   visible: visibleCancelButton,
			   click: function () { $parent.onFileRemove( uploadUid(), $data); }"></a>
		</span>
		<div class="actions">
			<span class="status_text" data-bind="text: statusText(), css: {'error': uploadError()}, customTooltip: statusTooltip, visible: statusText().length > 0"></span>
			<div data-bind="visible: allowActions() && uploaded() && !uploadError() && statusText().length === 0 && !downloading() && !visibleProgress()">
				<a href="javascript: void(0)" data-bind="visible: firstAction().length > 0,
						click: function () { executeAction(firstAction()); }, text: getActionText(firstAction()), clickBubble: false"></a>
				<a href="javascript: void(0)" data-bind="visible: secondAction().length > 0,
						click: function () { executeAction(secondAction()); }, text: getActionText(secondAction()), clickBubble: false"></a>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- /ko -->
