<div class="panels" data-bind="splitter: {name: 'groups', sizeLeft: 200, minLeft: 20, minRight: 40, resizeToWidth: true}">
	<div class="panel groups" data-splitter="groups">
		<div class="resize_handler"></div>
		<div class="panel_content">
			<div class="toolbar"><span class="content"></span></div>
			<div class="middle_bar" data-bind="">
				<!-- ko template: { name: 'Contacts_GroupList', data: $data} --><!-- /ko -->
			</div>
		</div>
	</div>
	<div class="panel_helper" data-bind="splitter: {name: 'contacts', sizeLeft: 400, minLeft: 20, minRight: 10}">
		<div class="panel contacts">
			<div class="resize_handler"></div>
			<div class="panel_content">
				<div class="toolbar" data-bind="template: { name: 'Contacts_Toolbar'}"></div>
				<div class="middle_bar" data-bind="template: {name: 'Contacts_ContactList'}"></div>
			</div>
		</div>
		<div class="panel item_viewer contact_viewer">
			<div class="panel_content">
				<!--<div data-bind="visible: loadingViewPane">loading ...</div>-->
				<div class="middle_bar contact" data-bind="visible: selectedContact() && !selectedContact().edited(), with: selectedContact">
					<!-- ko template: { name: 'Contacts_ViewContactViewModel', data: $data} --><!-- /ko -->
				</div>

				<div class="middle_bar edit_contact" data-bind="visible: selectedContact() && selectedContact().edited(), with: selectedContact">
					<!-- ko template: { name: 'Contacts_EditContactViewModel', data: $data } --><!-- /ko -->
				</div>

				<div class="middle_bar group" data-bind="visible: selectedGroup() && !selectedGroup().edited(), with: selectedGroup">
					<!-- ko template: { name: 'Contacts_ViewGroupViewModel', data: $data } --><!-- /ko -->
				</div>

				<div class="middle_bar edit_group" data-bind="visible: selectedGroup() && selectedGroup().edited(), with: selectedGroup">
					<!-- ko template: { name: 'Contacts_EditGroupViewModel', data: $data } --><!-- /ko -->
				</div>

				<div class="middle_bar import" data-bind="visible: oContactImportViewModel.visibility()">
					<!-- ko template: { name: 'Contacts_ContactsImportViewModel', data: oContactImportViewModel } --><!-- /ko -->
				</div>
			</div>
		</div>
	</div>
</div>