<div class="panels" data-bind="splitter: {name: 'folders', sizeLeft: 200, minLeft: 20, minRight: 40, resizeToWidth: true}">
	<div class="panel folders">
		<div class="resize_handler"></div>
		<div class="panel_content">
			<div class="toolbar">
				<span class="content">
					<a href="javascript: void(0)" class="item compose" data-bind="attr: {href: composeLink}, visible: bVisibleComposeMessage">
						<span data-bind="i18n: 'text'" data-i18n="MAILBOX/TOOL_NEW_MESSAGE"></span>
					</a>
				</span>
			</div>
			<div class="middle_bar" data-bind="template: {name: 'Mail_FolderListViewModel', data: oFolderList}, css: {'quota_visible': -1 < oFolderList.quotaProc()}"></div>
		</div>
	</div>
	<div class="panel_helper" data-bind="splitter: {name: 'messages', sizeLeft: 400, minLeft: 20, minRight: 10}">
		<div class="panel messages">
			<div class="resize_handler"></div>
			<div class="panel_content">
				<!-- ko template: { name: 'Mail_LayoutSidePane_Toolbar'} --><!-- /ko -->
				
				<div class="middle_bar" data-bind="template: {name: 'Mail_MessageListViewModel', data: oMessageList}"></div>
			</div>
		</div>
		<div class="panel message_viewer">
			<div class="panel_content">
				<div class="middle_bar" data-bind="template: {name: 'Mail_LayoutSidePane_MessagePaneViewModel', data: oMessagePane}"></div>
			</div>
		</div>
	</div>
</div>