<div class="panels">
	<div class="panel compose" data-bind="css: {'compose-auto-encrypt': autoEncryptSignMessage}">
		<div class="panel_content">
			<div class="toolbar">
				<span class="content">
					<!-- ko template: {name: sPopupButtonsViewTemplate} --><!-- /ko -->

					<!-- ko foreach: toolbarControllers -->
						<!-- ko if: !bSendButton -->
							<!-- ko template: { name: $data.ViewTemplate, data: $data} --><!-- /ko -->
						<!-- /ko -->
					<!-- /ko -->
				</span>
			</div>
			<div class="middle_bar">
				<div class="panels" data-bind="splitterFlex: {name: 'compose_attachments', sizes: [80, 20]}, initDom: splitterDom">
					<div class="panel message_panel">
						<div class="panel_content">
							<div class="middle_bar">
								<div class="panel_top" data-bind="initDom: messageFields">
									<span class="table-compressor" data-bind="click: changeHeadersCompressed, css: { 'compressed': headersCompressed }">
										<span class="arrow"></span>
									</span>

									<div class="notice" data-bind="visible: bDemo, i18n: {'key': '%MODULENAME%/INFO_SEND_EMAIL_TO_DEMO_ONLY'}"></div>
									<div class="notice notice-auto-encrypt" data-bind="visible: allowAtoEncryptSignMessage">
										<div class="notice-auto-encrypt-icon"></div>
										<div>
											<label class="custom_checkbox" data-bind="css: {'checked': autoEncryptSignMessage}">
												<span class="icon"></span>
												<input type="checkbox" id="autoEncryptSignMessage" data-bind="checked: autoEncryptSignMessage" />
											</label>
											<label for="autoEncryptSignMessage" data-bind="i18n: {'key': '%MODULENAME%/INFO_AUTO_ENCRYPT_SIGN_MESSAGE'}"></label>
										</div>
										<div class="notice-auto-encrypt-info" data-bind="i18n: {'key': '%MODULENAME%/INFO_MESSAGE_WILL_BE_CONVERTED_TO_PLAIN'}"></div>
									</div>
									<table class="fields">
										<tr class="from" data-bind="visible: visibleFrom() && !headersCompressed()">
											<td class="label">
												<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_FROM'}"></span>:
											</td>
											<td class="value">
												<div style="position: relative">
													<div class="disable_mask" data-bind="visible: senderList().length > 1 && disableFromEdit()"></div>
													<select class="input" tabindex="1" data-bind="visible: senderList().length > 1, foreach: senderList, value: selectedSender, disable: disableFromEdit">
														<option data-bind="text: fullEmail, value: id"></option>
													</select>
													<span class="not_editable" data-bind="visible: senderList().length === 1, text: senderList()[0] ? senderList()[0].fullEmail : ''"></span>
												</div>
											</td>
										</tr>
										<tr class="to">
											<td class="label">
												<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_TO'}"></span>:
											</td>
											<td class="value">
												<table>
													<tr>
														<td class="value" style="width: 100%;" id="selenium_compose_toaddr">
															<div class="input inputosaurus">
																<div class="disable_mask" data-bind="visible: disableHeadersEdit"></div>
																<div data-bind="customScrollbar: {x: false}">
																	<div class="scroll-inner">
																		<input type="text" spellcheck="false" tabindex="2" data-bind="initDom: toAddrDom" />
																	</div>
																</div>
															</div>
														</td>
														<td class="value">
															<!-- ko template: {name: '%ModuleName%_Compose_CcBccSwitchersView'} --><!-- /ko -->
														</td>
													</tr>
												</table>
											</td>
										</tr>
										<tr class="cc" data-bind="visible: visibleCc() && !headersCompressed()">
											<td class="label">
												<span data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_CC'}"></span>:
											</td>
											<td class="value">
												<div class="input inputosaurus">
													<div class="disable_mask" data-bind="visible: disableHeadersEdit"></div>
													<div data-bind="customScrollbar: {x: false}">
														<div class="scroll-inner">
															<input type="text" spellcheck="false" tabindex="3" data-bind="initDom: ccAddrDom" />
														</div>
													</div>
												</div>
											</td>
										</tr>
										<tr class="bcc" data-bind="visible: visibleBcc() && !headersCompressed()">
											<td class="label">
												<span data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_BCC'}"></span>:
											</td>
											<td class="value">
												<div class="input inputosaurus">
													<div class="disable_mask" data-bind="visible: disableHeadersEdit"></div>
													<div data-bind="customScrollbar: {x: false}">
														<div class="scroll-inner">
															<input type="text" spellcheck="false" tabindex="4" data-bind="initDom: bccAddrDom" />
														</div>
													</div>
												</div>
											</td>
										</tr>
										<tr class="subject" data-bind="visible: !headersCompressed()">
											<td class="label">
												<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_SUBJECT'}"></span>:
											</td>
											<td class="value">
												<input type="text" class="input" maxlength="1000" tabindex="5" id="selenium_compose_subject"
													   data-bind="value: subject, hasfocus: subjectFocused, valueUpdate: 'afterkeydown'"/>
											</td>
										</tr>
										<!-- ko if: !headersCompressed() -->
											<!-- ko foreach: messageRowControllers -->
												<!-- ko template: { name: $data.ViewTemplate, data: $data} --><!-- /ko -->
											<!-- /ko -->
										<!-- /ko -->
									</table>
								</div>
								<div class="panel_center">
									<!-- ko template: { name: oHtmlEditor.ViewTemplate, data: oHtmlEditor} --><!-- /ko -->
								</div>
								<!-- ko template: { name: sHotkeysHintsViewTemplate} --><!-- /ko -->
							</div>
						</div>
					</div>
					<!-- ko template: {name: '%ModuleName%_Compose_AttachmentsView'} --><!-- /ko -->
				</div>
			</div>
		</div>
	</div>
</div>
