<div class="panel_top">
	<div class="additional_bar">
		<label class="custom_checkbox" data-bind="css: {'checked': checkAll, 'incomplete': checkAllIncomplite}">
			<span class="icon"></span>
			<input type="checkbox" data-bind="checked: checkAll" />
		</label>
		<span class="search_block custom_select" data-bind="dropdown: {passClick: false, callback: fillAdvancedSearch, close: bAdvancedSearch}">
			<span class="button" data-i18n="MAILBOX/BUTTON_SEARCH" data-bind="i18n: 'text', click: onSearchClick"></span>
			<input type="text" data-bind="value: searchInput, onEnter: onSearchClick, hasfocus: isFocused" />
			<span class="control">
				<span class="icon"></span>
			</span>
			<span class="dropdown">
				<span class="dropdown_helper">
					<span class="dropdown_arrow"><span></span></span>
					<span class="dropdown_content">
						<span class="fields">
							<!--<span class="row">
								<span class="label">In folder</span>
								<select class="value input" data-bind="">
									<option>Inbox</option>
									<option>Drafts</option>
								</select>
							</span>-->
							<span class="row">
								<span class="label" data-i18n="MAILBOX/SEARCH_FIELD_FROM" data-bind="i18n: 'text'"></span>
								<input class="value input" type="text" data-bind="value: searchInputFrom, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
							</span>
							<span class="row">
								<span class="label" data-i18n="MAILBOX/SEARCH_FIELD_TO" data-bind="i18n: 'text'"></span>
								<input class="value input" type="text" data-bind="value: searchInputTo, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
							</span>
							<span class="row">
								<span class="label" data-i18n="MAILBOX/SEARCH_FIELD_SUBJECT" data-bind="i18n: 'text'"></span>
								<input class="value input" type="text" data-bind="value: searchInputSubject, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
							</span>
							<span class="row">
								<span class="label" data-i18n="MAILBOX/SEARCH_FIELD_TEXT" data-bind="i18n: 'text'"></span>
								<input class="value input" type="text" data-bind="value: searchInputText, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
							</span>
							<span class="buttons">
								<span class="button" data-bind="click: onSearchClick">
									<span data-i18n="MAILBOX/BUTTON_SEARCH" data-bind="i18n: 'text'"></span>
								</span>
							</span>
						</span>
					</span>
				</span>
			</span>
		</span>
	</div>
</div>
<div class="panel_center unselectable">
	<div class="items_list message_list" data-bind="initDom: messagesContainer, customScrollbar: {'reset': listChangedThrottle(), x: false}">
		<div class="scroll-inner">
			<span class="list_notification" data-bind="visible: visibleInfoSearchLoading">
				<span class="link" data-i18n="MAILBOX/LINK_STOP_SEARCH" data-bind="i18n: 'text', click: onStopSearchClick"></span>
				<span data-bind="text: searchText"></span>
			</span>

			<span class="list_notification search_results" data-bind="visible: visibleInfoSearchList">
				<span class="link" data-i18n="MAILBOX/LINK_CLEAR_SEARCH" data-bind="i18n: 'text', click: onClearSearchClick"></span>
				<span data-bind="text: searchText"></span>
			</span>

			<span class="list_notification" data-bind="visible: visibleInfoSearchEmpty">
				<span class="link" data-i18n="MAILBOX/LINK_CLEAR_SEARCH" data-bind="i18n: 'text', click: onClearSearchClick"></span>
				<span data-i18n="MAILBOX/INFO_SEARCH_EMPTY" data-bind="i18n: 'text'"></span>
			</span>
			
			<span class="list_notification" data-bind="visible: visibleInfoSearchError">
				<span class="link" data-i18n="MAILBOX/LINK_RETRY" data-bind="i18n: 'text', click: onRetryClick"></span>
				<span class="link" data-i18n="MAILBOX/LINK_SWITCH_TO_MESSAGE_LIST" data-bind="i18n: 'text', click: onClearSearchClick"></span>
				<span data-i18n="MAILBOX/INFO_SEARCH_ERROR" data-bind="i18n: 'text'"></span>
			</span>
			
			<span class="list_notification" data-bind="visible: visibleInfoMessageListEmpty">
				<span data-i18n="MAILBOX/INFO_MESSAGE_LIST_EMPTY" data-bind="i18n: 'text'"></span>
			</span>

			<span class="list_notification" data-bind="visible: visibleInfoMessageListError">
				<span class="link" data-i18n="MAILBOX/LINK_RETRY" data-bind="i18n: 'text', click: onRetryClick"></span>
				<span data-i18n="MAILBOX/INFO_MESSAGE_LIST_ERROR" data-bind="i18n: 'text'"></span>
			</span>

			<div class="items_sub_list message_sub_list" data-bind="foreach: collection, draggablePlace: function (oMessage) { return $root.dragAndDronHelper(oMessage); }">
				<div class="item dragHandle" data-bind="css: {
						'unseen': !seen(), 'selected': selected(), 'checked': checked(),
						'forwarded': forwarded(), 'answered': answered(), 'deleted': deleted(),
						'nosubject': emptySubject()
					}">
					<div class="item_content">
						<span class="controls">
							<label class="custom_checkbox" data-bind="css: {'checked': checked()}">
								<span class="icon"></span>
								<input type="checkbox" data-bind="checked: checked" />
							</label>
							<span class="separator"></span>
							<span class="flag" data-bind="css: {'flagged': flagged()}"></span>
						</span>
						<span class="data">
							<span class="size" data-bind="text: friendlySize()"></span>
							<span class="date" data-bind="text: oDateModel.getShortDate()"></span>
							<span class="attachments" data-bind="css: {'has_attachments': hasAttachments()}"></span>
							<span class="marker"></span>
							<span class="from" data-bind="text: fromOrToText()"></span>
							<span class="separator"></span>
							<span class="subject" data-bind="text: subjectForDisplay()"></span>
							<!--<span class="text"></span>-->
						</span>
						<div class="separator"></div>
					</div>
				</div>
			</div>
			
			<span class="list_notification" data-i18n="MAILBOX/INFO_LOADING_MESSAGE_LIST" 
				  data-bind="visible: visibleInfoLoading(), i18n: 'text'"></span>
			<span class="list_notification" data-i18n="MAILBOX/INFO_SEARCHING_FOR_MESSAGES" 
				  data-bind="visible: visibleInfoSearchLoading(), i18n: 'text'"></span>
		</div>
	</div>
</div>

<div class="panel_bottom" data-bind="template: {name: 'Common_PageSwitcherViewModel', data: oPageSwitcher}"></div>