<div class="btn-toolbar">
	<!-- ko if: isMobile() -->
	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
	<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
		<i class="icon-paper-plane"></i>
	</a>
	<!-- /ko -->
	<a class="btn" data-bind="click: reload, visible: mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
		<i class="icon-spinner not-animated"></i>
	</a>
	<!-- ko if: !newMoveToFolder -->
	<div class="btn-group dropdown hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
		<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
			<i class="icon-copy visible-on-ctrl-btn"></i>
			<i class="fontastic hidden-on-ctrl-btn">📁</i>
			<span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
			<li role="presentation" data-bind="css: { 'disabled': disabled }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
				<a href="#" tabindex="-1" data-bind="text: name"></a>
			</li>
		</ul>
	</div>
	<!-- /ko -->
	<!-- ko if: newMoveToFolder -->
	<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
		<a id="move-dropdown-id" href="#" tabindex="-1" class="btn buttonMove" data-bind="command: moveNewCommand" data-i18n="[title]GLOBAL/MOVE_TO">
			<i class="icon-copy visible-on-ctrl-btn"></i>
			<i class="fontastic hidden-on-ctrl-btn">📁</i>
		</a>
	</div>
	<!-- /ko -->
	<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
		<a class="btn fontastic" data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
		<a class="btn fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
		<a class="btn" data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
			<i class="icon-check-mark-circle-two"></i>
		</a>
		<a class="btn fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
	</div>
	<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
		<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
			<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
				<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></a>
			</li>
			<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
				<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></a>
			</li>
			<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
				<a href="#" tabindex="-1" data-icon="★" data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></a>
			</li>
			<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
				<a href="#" tabindex="-1" data-icon="☆" data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></a>
			</li>
			<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
				<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></a>
			</li>
			<li class="dividerbar" role="presentation" data-bind="command: multyForwardCommand">
				<a href="#" tabindex="-1" data-icon="↞" data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></a>
			</li>
			<li class="dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
				<a href="#" tabindex="-1" data-icon="🗑" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></a>
			</li>
			<li role="presentation" data-bind="visible: allowDangerousActions, click: clear">
				<a href="#" tabindex="-1" data-icon="🔥" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></a>
			</li>
		</ul>
	</div>
	<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported() && mobileCheckedStateHide(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
		<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText">⬇</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
			<li role="presentation" data-sort="" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="📅⬇" data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></a>
			</li>
			<li role="presentation" data-sort="DATE" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="📅⬆" data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></a>
			</li>
			<li class="dividerbar" role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="✉⬇" data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></a>
			</li>
			<li role="presentation" data-sort="SIZE" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="✉⬆" data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></a>
			</li>
			<li class="dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="𝐒⬇" data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></a>
			</li>
			<li role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="𝐒⬆" data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></a>
			</li>
			<li class="dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="@⬇" data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></a>
			</li>
			<li role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
				<a href="#" tabindex="-1" data-icon="@⬆" data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></a>
			</li>
		</ul>
	</div>
</div>

<div class="messageList g-ui-user-select-none" data-bind="css: {'hideMessageListCheckbox': !useCheckboxesInList() }">
	<div class="second-toolbar thm-message-list-top-toolbar">
		<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
		<!-- ko if: allowSearch -->
		<div class="search-input-wrp">
			<input type="search" class="inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="textInput: inputProxyMessageListSearch, hasfocus: inputMessageListSearchFocus">
			<a class="closeSearch" data-bind="click: cancelSearch, visible: messageListSearchDesc()">×</a>
		</div>
		<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">▼</a>
		<!-- /ko -->
	</div>
	<div class="b-content" data-bind="initDom: dragOverBodyArea">
		<div class="listThreadUidDesc" data-bind="visible: messageListThreadUid(), click: cancelThreadUid"
			data-icon="⬅" data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></div>
		<div class="listSearchDesc" data-bind="visible: messageListSearchDesc(), text: messageListSearchDesc"></div>
		<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && !messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea"
			data-icon="⬇" data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></div>
		<div class="listClear" data-bind="visible: clearListIsVisible()">
			<a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="click: clear"></a>
		</div>
		<div class="listError error" data-bind="visible: !dragOver() && messageListError(), text: messageListError"></div>
		<div class="listEmptyMessage" data-bind="visible: listEmptyMessage(), text: listEmptyMessage()"></div>
		<div class="listLoading" data-bind="visible: !dragOver() && !messageList().length &&
			messageListIsLoading() && !messageListError()">
			<i class="icon-spinner"></i>
			<span data-i18n="GLOBAL/LOADING"></span>
		</div>
		<div data-bind="dragmessages: getDragData">
			<div class="messageListPlace" data-bind="foreach: messageList">

				<div class="messageListItem" data-bind="css: lineAsCss()">
					<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>

					<div class="flagParent fontastic"></div>

					<div class="senderParent actionHandle" data-bind="attr: {'title': senderClearEmailsString}, text: senderEmailsString"></div>

					<div class="attachmentParent actionHandle">
						<i data-bind="css: attachmentIconClass"></i>
					</div>

					<div class="subjectParent actionHandle">
						<!-- ko if: isImportant --><b class="importantMark">!</b><!-- /ko -->
						<!-- ko text: subject || $root.emptySubjectValue --><!-- /ko -->
					</div>

					<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>

					<div class="threads-len" data-bind="visible: 1 < threadsLen()">
						<span>
							<!-- ko text: threadsLen --><!-- /ko -->
							›
						</span>
					</div>

					<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
				</div>

			</div>
		</div>
		<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
	</div>
	<div class="b-footer thm-message-list-bottom-toolbar">
		<!-- ko if: userUsageProc() -->
		<span data-bind="attr: { title: quotaTooltip() }" class="e-quota">
			<!-- ko text: userUsageProc --><!-- /ko -->%
		</span>
		<!-- /ko -->
		<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->
	</div>
</div>
