<div class="screen ContactsLayout" style="display: none;">
	<div class="panel panel-left panel-reveal" data-bind="style: {'display': selectedPanel() === Enums.MobilePanel.Groups ? 'block' : ''}">
		<div class="content-block">
			<!-- ko template: { name: '%ModuleName%_GroupsView', data: $data} --><!-- /ko -->
		</div>
	</div>
				
	<!-- Views -->
    <div class="views">
		<!-- Your main view, should have "view-main" class -->
		<div class="view contacts-view">
			<div class="pages navbar-fixed">
				
				<div class="page contacts-list">
					<div class="navbar">
						<div class="navbar-inner">
							<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
							<div class="left">
								<a href="javascript:void(0)" class="link icon-only open-panel" data-bind="click: togleGroupList, visible: !isCheckedOrSelected()"><i class="icon icon-bars"></i></a>

								<a href="javascript:void(0)" class="link icon-only" data-bind="click: function () { checkAll(false); }, visible: isCheckedOrSelected()"><i class="icon icon-close"></i></a>
							</div>
							<div class="center sliding" data-bind="visible: !isCheckedOrSelected(), i18n: {'key': '%MODULENAME%/HEADING_BROWSER_TAB'}"></div>
							<div class="center sliding" data-bind="visible: isCheckedOrSelected(), text: selector.listCheckedOrSelected().length"></div>

							<div class="right" data-bind="visible: !isCheckedOrSelected()">
								<a href="javascript:void(0)" class="link icon-only aurora-icons edit" data-bind="click: gotoViewPane, visible: selectedGroup"><i class="icon"></i></a>
								<a href="javascript:void(0)" class="link icon-only aurora-icons settings" data-bind="click: function () { showApps(!showApps()); }"><i class="icon"></i></a>
							</div>

							<div class="right" data-bind="visible: isCheckedOrSelected()">
								<!-- ko template: {name: '%ModuleName%_ToolbarContactsView'} --><!-- /ko -->
							</div>
						</div>
					</div>

					<div class="toolbar toolbar-bottom" data-bind="visible: oPageSwitcher.pages().length > 0, with: oPageSwitcher">
						<div class="toolbar-inner" data-bind="template: {name: ViewTemplate}"></div>
					</div>

					<!-- ko template: {name: '%ModuleName%_ContactsView'} --><!-- /ko -->
					
					<div class="speed-dial">
						<!-- FAB inside will open Speed Dial actions -->
						<a href="#" class="floating-button">
							<!-- First icon is visible when Speed Dial actions are closed -->
							<i class="icon icon-plus"></i>
							<!-- Second icon is visible when Speed Dial actions are opened -->
							<i class="icon icon-close"></i>
						</a>
						<!-- Speed Dial Actions -->
						<div class="speed-dial-buttons">
							<a href="#" class="aurora-icons new_group" data-bind="visible: showPersonalContacts, command: newGroupCommand">
								<i class="icon"></i>
								<!--<span class="text" data-bind="i18n: {'key': '%MODULENAME%/ACTION_NEW_GROUP'}"></span>-->
							</a>
							<a href="#" class="aurora-icons new_contact" data-bind="visible: showPersonalContacts, command: newContactCommand">
								<i class="icon"></i>
								<!--<span class="text" data-bind="i18n: {'key': '%MODULENAME%/ACTION_NEW_GROUP'}"></span>-->
							</a>
						</div>
					</div>
				</div>
				
				<div class="page import" data-bind="visible: oImportView.visibility()">
					<!-- ko template: { name: oImportView.ViewTemplate, data: oImportView } --><!-- /ko -->
				</div>
				
				<div class="page contact" data-bind="visible: selectedPanel() === Enums.MobilePanel.View && selectedContact() && !selectedContact().edited(), with: selectedContact">
					<!-- ko template: { name: '%ModuleName%_ContactView' } --><!-- /ko -->
				</div>
				
				<div class="page edit_contact" data-bind="visible: selectedPanel() === Enums.MobilePanel.View && selectedContact() && selectedContact().edited(), with: selectedContact">
					<!-- ko template: { name: '%ModuleName%_EditContactView' } --><!-- /ko -->
				</div>
				
				<div class="page group" data-bind="visible: selectedPanel() === Enums.MobilePanel.View && selectedGroup() && !selectedGroup().edited(), with: selectedGroup">
					<!-- ko template: { name: '%ModuleName%_GroupView', data: $data } --><!-- /ko -->
				</div>
				
				<div class="page edit_group" data-bind="visible: selectedPanel() === Enums.MobilePanel.View && selectedGroup() && selectedGroup().edited(), with: selectedGroup">
					<!-- ko template: { name: '%ModuleName%_EditGroupView' } --><!-- /ko -->
				</div>
			</div>
		</div>
    </div>
</div>
