<div id="rl-sub-left">
	<div class="messageList g-ui-user-select-none"
		data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused(), 'loading': messageListCompleteLoadingThrottle, 'hideMessageListCheckbox': !useCheckboxesInList() }">
		<div class="toolbar">
			<div class="btn-toolbar">
				<!-- ko if:  allowFolders && mobile -->
				<div class="btn-group" data-bind="visible: leftPanelDisabled()">
					<a class="btn btn-thin-2 single" data-bind="click: showLeft">
						<i class="icon-right-middle"></i>
					</a>
				</div>
				<div class="btn-group" data-bind="visible: !leftPanelDisabled()">
					<a class="btn btn-thin-2 single" data-bind="click: hideLeft">
						<i class="icon-left-middle"></i>
					</a>
				</div>
				<div class="btn-group">&nbsp;</div>
				<!-- /ko -->
				<div class="btn-group" data-bind="visible: mobile && allowComposer && mobileCheckedStateHide()">
					<a class="btn single buttonCompose" data-tooltip-join="top" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
						<i class="icon-paper-plane"></i>
					</a>
				</div>
				<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">
					<a class="btn single btn-dark-disabled-border buttonReload" data-tooltip-join="top" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
						<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottleForAnimation}"></i>
					</a>
				</div>
				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
				<!-- ko if: !newMoveToFolder() -->
				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-join="top" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
						<i class="icon-copy visible-on-ctrl-btn"></i>
						<i class="icon-folder hidden-on-ctrl-btn"></i>
						&nbsp;&nbsp;
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
						<!-- ko if: seporator -->
							<li class="divider" role="presentation" data-bind="visible: seporator"></li>
						<!-- /ko -->
						<!-- ko if: !seporator -->
							<li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
								<a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a>
							</li>
						<!-- /ko -->
					</ul>
				</div>
				<!-- /ko -->
				<!-- ko if: newMoveToFolder() -->
				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border buttonMove" data-tooltip-join="top" data-bind="command: moveNewCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
						<i class="icon-copy visible-on-ctrl-btn"></i>
						<i class="icon-folder hidden-on-ctrl-btn"></i>
					</a>
				</div>
				<!-- /ko -->
				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div>
				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top"
						data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
						<i class="icon-archive"></i>
					</a>
					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top"
						data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM',
							css: {'first': !isArchiveVisible()}">
						<i class="icon-warning"></i>
					</a>
					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-join="top"
						data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'MESSAGE_LIST/BUTTON_NOT_SPAM',
							css: {'first': !isArchiveVisible()}">
						<i class="icon-check-mark-circle-two"></i>
					</a>
					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top"
						data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE',
							css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
						<i class="icon-trash"></i>
						<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
					</a>
				</div>
				<div class="btn-group hide-on-mobile" data-bind="visible: allowMessageListActions">&nbsp;</div>
				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
						<i class="icon-list animate-this-icon-on-open"></i>
					</a>
					<ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
						<div data-bind="visible: allowMessageListActions">
							<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
								<a class="e-link menuitem" href="#" tabindex="-1">
									<i class="icon-none"></i>
									&nbsp;&nbsp;
									<span class="i18n" data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
								</a>
							</li>
							<li class="e-item" role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
								<a class="e-link menuitem" href="#" tabindex="-1">
									<i class="icon-none"></i>
									&nbsp;&nbsp;
									<span class="i18n" data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></span>
								</a>
							</li>
							<li class="e-item" role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
								<a class="e-link menuitem" href="#" tabindex="-1">
									<i class="icon-none"></i>
									&nbsp;&nbsp;
									<span class="i18n" data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
								</a>
							</li>
							<li class="e-item" role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
								<a class="e-link menuitem" href="#" tabindex="-1">
									<i class="icon-none"></i>
									&nbsp;&nbsp;
									<span class="i18n" data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
								</a>
							</li>
							<li class="e-item" role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
								<a class="e-link menuitem" href="#" tabindex="-1">
									<i class="icon-none"></i>
									&nbsp;&nbsp;
									<span class="i18n" data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
								</a>
							</li>
						</div>
						<li class="divider" role="presentation" data-bind="visible: allowComposer && allowMessageListActions"></li>
						<li class="e-item" role="presentation" data-bind="visible: allowComposer, command: multyForwardCommand">
							<a class="e-link menuitem" href="#" tabindex="-1">
								<i class="icon-reply-all"></i>
								&nbsp;&nbsp;
								<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
							</a>
						</li>
						<li class="divider" role="presentation" data-bind="visible: allowDangerousActions"></li>
						<li class="e-item" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
							<a class="e-link menuitem" href="#" tabindex="-1">
								<i class="icon-trash"></i>
								&nbsp;&nbsp;
								<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
							</a>
						</li>
						<li class="e-item" role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
							<a class="e-link menuitem" href="#" tabindex="-1">
								<i class="icon-fire"></i>
								&nbsp;&nbsp;
								<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="b-message-list-wrapper">
			<div class="second-toolbar thm-message-list-top-toolbar">
				<div class="form-inline">
					<div class="input-append pull-right" data-bind="visible: allowSearch">
						<div class="close-input-wrp">
							<a class="close" data-bind="click: cancelSearch, visible: '' !== messageListSearchDesc()">&times;</a>
							<input type="text" class="i18n span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]SEARCH/MAIN_INPUT_PLACEHOLDER" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
						</div>
						<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">
							<span class="caret"></span>
						</a>
					</div>
					<i class="checkboxCkeckAll" data-bind="css: checkAll() ? (isIncompleteChecked() ? 'icon-checkbox-partial' : 'icon-checkbox-checked') : 'icon-checkbox-unchecked'"></i>
				</div>
			</div>
			<div class="line-loading e-strip-animation" data-bind="visible: messageListCompleteLoadingThrottle"></div>
			<div class="mainDelimiter toolbarDelimiter"></div>
			<div class="b-content" data-bind="nano: true, scrollerShadows: true, initDom: dragOverBodyArea">
				<div class="content g-scrollbox" data-scroller-shadows-content>
					<div class="content-wrapper">
						<div class="listThreadUidDesc" data-bind="visible: '' !== messageListEndThreadUid(), click: cancelThreadUid">
							<i class="icon-left" data-bind="click: cancelThreadUid"></i>
							&nbsp;&nbsp;
							<span class="i18n" data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
						</div>
						<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc()">
							<span data-bind="text: messageListSearchDesc"></span>
						</div>
						<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
							<i class="icon-down e-icon"></i>
							&nbsp;&nbsp;
							<span class="i18n" data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
						</div>
						<div class="listClear" data-bind="visible: clearListIsVisible()">
							<span class="g-ui-link i18n" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></span>
						</div>
						<div class="listError" data-bind="visible: !dragOver() && '' !== messageListError()">
							<span class="error" data-bind="text: messageListError"></span>
						</div>
						<div class="listEmptyList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' === messageListSearch()">
							<span class="i18n" data-i18n="MESSAGE_LIST/EMPTY_LIST"></span>
						</div>
						<div class="listEmptyListLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
							messageListCompleteLoadingThrottle() && '' === messageListError()">
							<span class="i18n" data-i18n="MESSAGE_LIST/LIST_LOADING"></span><span class="textLoadingAnimationD1">.</span><span class="textLoadingAnimationD2">.</span><span class="textLoadingAnimationD3">.</span>
						</div>
						<div class="listEmptySearchList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' !== messageListSearch()">
							<span class="i18n" data-i18n="MESSAGE_LIST/EMPTY_SEARCH_LIST"></span>
						</div>
						<div data-bind="draggable: dragAndDronHelper, droppableSelector: '.b-folders .content.g-scrollbox'">
							<div class="messageListPlace" data-bind="template: { name: messageListItemTemplate(), foreach: messageList }"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="mainDelimiter footerDelimiter"></div>
			<div class="b-footer thm-message-list-bottom-toolbar">
				<span data-tooltip-i18n="off" data-tooltip-mobile="on" data-bind="visible: 0 < userUsageProc(), tooltip: quotaTooltip" class="e-quota">
					<span data-bind="text: userUsageProc"></span>%
				</span>
				<div class="pull-right">
					<!-- ko template: { name: 'Pagenator', data: messageListPagenator } --><!-- /ko -->
				</div>
			</div>
		</div>
	</div>
</div>