<div class="panels">
	<div class="panel compose">
		<div class="panel_content">
			<div class="toolbar">
				<span class="content">
					<!-- ko template: {name: sPopupButtonsViewTemplate} --><!-- /ko -->
					
					<!-- ko foreach: toolbarControllers -->
						<!-- ko template: { name: $data.ViewTemplate, data: $data} --><!-- /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>
									<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">
												<select class="input" tabindex="1" data-bind="foreach: senderList, value: selectedSender">
													<option data-bind="text: fullEmail, value: id"></option>
												</select>
											</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>
									</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>