<div class="panel_center" data-bind="heightAdjust: {'elements': [domMessageHeader, domQuickReply], 'triggers': [detailsVisible(), currentMessage(), replyPaneVisible(), replyTextFocusThrottled()]}">
	<div class="message_header" data-bind="initDom: domMessageHeader, visible: isCurrentMessage">
		<span class="resizer_top" data-bind="event: { 'dblclick': resizeDblClick}, visible: fakeHeader"></span>
		<span class="resizer_bottom" data-bind="event: { 'dblclick': resizeDblClick}"></span>
		<div class="notice" data-bind="visible: visiblePicturesControl">
			<span class="item">
				<span data-i18n="MESSAGE/INFO_MESSAGE_BLOCKED" data-bind="i18n: 'text'"></span>
				<span class="link" data-i18n="MESSAGE/ACTION_SHOW_PICTURES" 
				   data-bind="i18n: 'text', click: showPictures, visible: visibleShowPicturesLink"></span>
			</span>
			<span class="item">
				<span class="link" data-i18n="MESSAGE/ACTION_ALWAYS_SHOW_PICTURE_THIS_SENDER" 
				   data-bind="i18n: 'text', click: alwaysShowPictures"></span>
			</span>
		</div>

		<div class="notice" data-bind="visible: visibleConfirmationControl">
			<span data-i18n="MESSAGE/INFO_SENDER_ASKED_NOTIFY" data-bind="i18n: 'text'"></span>
			<span class="link" data-i18n="MESSAGE/ACTION_NOTIFY_SENDER" data-bind="i18n: 'text', click: notifySender"></span>
		</div>

		<div class="notice" data-bind="visible: sensitivityText() !== ''">
			<span data-bind="text: sensitivityText"></span>
		</div>

		<div class="header_content clearfix">
			<div class="header_row">
				<div class="toolbar">
					<span class="content">
						<!--<span class="item" data-bind="command: prevMessageCommand, visible: singleMode">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_PREV_MESSAGE"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_PREV_MESSAGE"></span>
						</span>
						<span class="item" data-bind="command: nextMessageCommand, visible: singleMode">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_NEXT_MESSAGE"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_NEXT_MESSAGE"></span>
						</span>-->
						<span class="item reply" data-bind="command: replyCommand, visible: isVisibleReplyTool">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_REPLY"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_REPLY"></span>
						</span>
						<span class="item replyall" data-bind="command: replyAllCommand, visible: isVisibleReplyTool">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_REPLY_TO_ALL"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_REPLY_TO_ALL"></span>
						</span>
						<!--<span class="item resend" data-bind="command: resendCommand, visible: isVisibleResendTool">-->
							<!--<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_RESEND"></span>-->
							<!--<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_RESEND"></span>-->
						<!--</span>-->
						<span class="item forward" data-bind="command: forwardCommand, visible: isVisibleForwardTool">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_FORWARD"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_FORWARD"></span>
						</span>
						<span class="item print" data-bind="command: printCommand">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_PRINT"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_PRINT"></span>
						</span>
						<span class="item save" data-bind="command: saveCommand">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MAILBOX/TOOL_SAVE"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_SAVE"></span>
						</span>
						<a class="item new_window" href="javascript: void(0);" 
						   data-bind="click: openInNewWindow, visible: !singleMode()">
							<span class="icon" data-bind="i18n: 'title'" data-i18n="MESSAGE/ACTION_OPEN_IN_NEW_WINDOW"></span>
							<span class="text" data-bind="i18n: 'text'" data-i18n="MESSAGE/ACTION_OPEN_IN_NEW_WINDOW"></span>
						</a>
						<!--<span class="item save control" data-bind="css: {'expand': visibleAddMenu()}, click: changeAddMenuVisibility">
							<span class="arrow"></span>
							<span class="dropdown">
								<span class="dropdown_helper">
									<span class="arrow"><span></span></span>
									<span class="dropdown_content">
										<span class="item" data-bind="i18n: 'text', command: saveCommand" data-i18n="MAILBOX/TOOL_SAVE"></span>
									</span>
								</span>
							</span>
						</span>-->
					</span>
				</div>
				
				<span class="link details_show" data-i18n="MESSAGE/ACTION_SHOW_DETAILS" 
					data-bind="i18n: 'title', click: showDetails, visible: !detailsVisible()"></span>
				<span class="link details_hide" data-i18n="MESSAGE/ACTION_HIDE_DETAILS"
					data-bind="i18n: 'title', click: hideDetails, visible: detailsVisible()"></span>
				
				<div class="message_info" data-bind="contactcard: {'trigger': hasFromContact, 'controlWidth': contactCardWidth}, visible: !detailsVisible()">
					<div class="message_info_line">
						<span class="from control" data-bind="text: shortFromToDisplay, css: {'founded': hasFromContact}"></span>
						<span class="add_contact" data-i18n="MESSAGE/ACTION_ADD_TO_CONTACTS" 
							  data-bind="i18n: 'title', click: addToContacts, visible: visibleAddToContacts"></span>
						<span data-i18n="MESSAGE/SHORT_LINE_TO" data-bind="i18n: 'text', visible: allRecipients() !== ''"></span>
						<span data-bind="text: allRecipients"></span>
					</div>
					<span class="dropdown control contact_card" data-bind="visible: hasFromContact">
						<span class="dropdown_helper">
							<span class="dropdown_arrow"><span></span></span>
							<span class="dropdown_content" data-bind="template: {name: 'Common_ContactCard', data: fromContact}, style: {'width': contactCardWidth()+'px'}">
							</span>
						</span>
					</span>
				</div>
				
				<div class="message_info message_detail_info" data-bind="contactcard: {'trigger': hasFromContact, 'controlWidth': contactCardWidth}, visible: detailsVisible()">
					<div class="message_info_line">
						<span class="title" data-i18n="MESSAGE/HEADER_FROM" data-bind="i18n: 'text'"></span>: 
						<span class="from control" data-bind="text: fullFrom, css: {'founded': hasFromContact}"></span>
						<span class="add_contact" data-i18n="MESSAGE/ACTION_ADD_TO_CONTACTS" 
							  data-bind="i18n: 'title', click: addToContacts, visible: visibleAddToContacts"></span>
					</div>
					<div style="position: relative;">
						<span class="dropdown control contact_card" data-bind="visible: hasFromContact">
							<span class="dropdown_helper">
								<span class="dropdown_arrow"><span></span></span>
								<span class="dropdown_content" data-bind="template: {name: 'Common_ContactCard', data: fromContact}, style: {'width': contactCardWidth()+'px'}"></span>
							</span>
						</span>
					</div>
				
					<div class="message_info_line" data-bind="visible: to().length > 0">
						<span class="title" data-i18n="MESSAGE/HEADER_TO" data-bind="i18n: 'text'"></span>: 
						<span data-bind="text: to"></span>
					</div>
					<div class="message_info_line" data-bind="visible: cc().length > 0">
						<span class="title" data-i18n="MESSAGE/HEADER_CC" data-bind="i18n: 'text'"></span>: 
						<span data-bind="text: cc"></span>
					</div>
					<div class="message_info_line" data-bind="visible: bcc().length > 0">
						<span class="title" data-i18n="MESSAGE/HEADER_BCC" data-bind="i18n: 'text'"></span>: 
						<span data-bind="text: bcc"></span>
					</div>
					<div class="message_info_line">
						<span class="title" data-i18n="MESSAGE/HEADER_DATE" data-bind="i18n: 'text'"></span>: 
						<span data-bind="text: fullDate"></span>
					</div>
				</div>
			</div>

			<div class="header_row">
				<span class="date" data-bind="text: midDate, visible: !detailsVisible()"></span>
				<span class="icon importance"></span>
				<span class="icon attachments" data-bind="visible: hasNotInlineAttachments, click: function() { scrollToAttachment.valueHasMutated(); }"></span>
				<h2 class="subject" data-bind="text: subject"></h2>
			</div>
		</div>
	</div>
	
	<div class="panels" data-bind="css: {'has_attachments': hasNotInlineAttachments}">
		<div class="panel right_panel" data-bind="visible: hasNotInlineAttachments, customScrollbar: {x: false, 'reset': currentMessage()}">
			<div class="scroll-inner">
				<div class="attachments large">
					<div class="download_menu" data-bind="css: {'expand': downloadMenuExpanded}">
						<span class="control" data-bind="click: toggleDownloadMenu"></span>
						<span class="link all" data-bind="click: downloadAllAttachments, visible: visibleDownloadAllAttachments">
							<span class="icon"></span>
							<span class="text" data-i18n="MESSAGE/ATTACHMENT_DOWNLOAD_ALL" data-bind="i18n: 'text'"></span>
						</span>
						
						<div class="content">
							<span class="link separately"
							   data-bind="click: downloadAllAttachmentsSeparately, visible: visibleDownloadAllAttachmentsSeparately">
								<span class="icon"></span>
								<span class="text" data-bind="text: 'Download all separately'"></span>
							</span>
							<span class="link to_filestorage" data-bind="click: saveAttachmentsToFiles, visible: visibleSaveAttachmentsToFiles">
								<span class="icon"></span>
								<span class="text" data-i18n="MESSAGE/ATTACHMENT_SAVE_TO_FILES" data-bind="i18n: 'text'"></span>
							</span>
						</div>
					</div>
					<div data-bind="template: {name: 'Common_FileViewModel', foreach: notInlineAttachments}"></div>
				</div>
			</div>
		</div>
		<div class="panel left_panel">
			<div class="message" data-bind="customScrollbar: {'reset': currentMessage(), scrollTo: scrollToAttachment}, css: {'has_bodytext': hasBodyText, 'has_attachments': hasNotInlineAttachments}">
				<div class="message_content scroll-inner" data-bind="hasfocus: contentHasFocus">

					<!-- ko if: visibleAppointmentInfo -->
						<div class="appointment" data-bind="template: {name: 'Mail_AppointmentViewModel', data: ical}"></div>
					<!-- /ko -->

					<!-- ko if: visibleVcardInfo -->
						<div class="appointment" data-bind="template: {name: 'Mail_VcardAttachmentViewModel', data: vcard}"></div>
					<!-- /ko -->

					<div class="message_body_info" data-bind="visible: visibleNoMessageSelectedText">
						<div data-i18n="MESSAGE/INFO_NO_MESSAGE_SELECTED" 
							 data-bind="i18n: 'text'"></div>
						<div class="message_body_secondary_info" data-i18n="MESSAGE/INFO_SINGLE_DOUBLE_CLICK" 
							 data-bind="i18n: 'text'"></div>
					</div>
					<div class="message_body_info" data-i18n="MESSAGE/INFO_LOADING" 
						 data-bind="visible: isLoading, i18n: 'text'"></div>
					<div class="message_body html" data-bind="initDom: domTextBody, attr: {'dir': rtlMessage() ? 'rtl' : 'ltr'}"></div>
					<!--<div class="bodyparts_separator"></div>-->
				</div>
			</div>
		</div>
	</div>
	
	<div class="quick_reply fields" data-bind="initDom: domQuickReply, 
		quickReplyAnim: {
			'sendAction': replySendingStarted(), 
			'saveAction': replySavingStarted(), 
			'activeAction': isQuickReplyActive()
		},
		visible: replyPaneVisible() && isVisibleReplyTool()">
		<div class="status">
			<div class="text" data-bind="text: replyLoadingText"></div>
		</div>
		<div class="row" data-bind="css: {'focused': replyTextFocus(),
			 'filled': replyText().length > 0}">
			<label for="reply_text" class="title placeholder" 
				   data-i18n="COMPOSE/QUICK_REPLY_PLACEHOLDER" data-bind="i18n: 'text'"></label>
			<textarea id="reply_text" class="input" data-bind="value: replyText, 
				hasfocus: replyTextFocus, onCtrlEnter: sendReplyMessage, valueUpdate: 'afterkeydown'"></textarea>
		</div>
		<div class="buttons">
			<span class="button send" data-bind="i18n: 'text', click: sendReplyMessage" data-i18n="COMPOSE/TOOL_SEND"></span>
			<span class="button save" data-bind="i18n: 'text', click: saveReplyMessage" data-i18n="COMPOSE/TOOL_SAVE"></span>
			<span class="text hint" data-i18n="COMPOSE/QUICK_REPLY_HOTKEY" data-bind="i18n: 'text'"></span>
			<a class="link full_form" href="javascript: void(0);" 
			   data-bind="i18n: 'text', command: replyAllCommand" 
			   data-i18n="COMPOSE/QUICK_REPLY_OPEN_FULL"></a>
		</div>
	</div>
</div>

<!-- ko template: {name: 'Mail_PrintMessageViewModel'} --><!-- /ko -->
