<div class="panel_top message_header" data-bind="visible: isSeparatedLayoutMode">
	<div class="header_content clearfix">
		<div class="header_row">
			<div class="toolbar">
				<span class="content">
					<span class="item back" data-bind="command: backCommand, customTooltip: 'COREWEBCLIENT/ACTION_BACK'">
						<span class="icon"></span>
						<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_BACK'}"></span>
					</span>
				</span>
			</div>
		</div>
	</div>
</div>

<div class="panel_center notes_container" data-bind="if: currentMessage() || createMode()">
	<div class="message_body_info" data-bind="visible: isLoading, i18n: {'key': 'COREWEBCLIENT/INFO_LOADING'}"></div>
		<textarea data-test-id="mail-note-body" data-bind="value: messageText, visible: !isLoading(), hasFocus: messageText.focused, 
			valueUpdate: 'keyup', i18n: {'key': '%MODULENAME%/PLACEHOLDER_EMPTY_NOTE', 'type': 'placeholder'}"
			class="note_edit"></textarea>
</div>
<div class="panel_bottom notes_container" data-bind="if: currentMessage() || createMode()">
	<div class="buttons" data-bind="visible: !isLoading()">
		<span class="button" data-test-id="mail-note-save" data-bind="text: saveButtonText, click: saveNote"></span>
		<span class="button contour_button" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_CANCEL'}, click: cancel"></span>
		<span class="text hint" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SAVE_HOTKEY'}"></span>
	</div>
</div>
