<div class="panels settings">
	<div class="panel navigation">
		<div class="panel_content">
			<div class="middle_bar">
				<div class="item common" data-bind="css: {'selected': (tab() == Enums.SettingsTab.Common)},
					 visible: bAllowUsersChangeInterfaceSettings">
					<span class="icon"></span>
					<span class="link" data-i18n="SETTINGS/TAB_COMMON" data-bind="i18n: 'text', click: function () {showTab(Enums.SettingsTab.Common);}"></span>
				</div>
				<div class="item accounts" data-bind="css: {'selected': (tab() == Enums.SettingsTab.EmailAccounts)}">
					<span class="icon"></span>
					<span class="link" data-i18n="SETTINGS/TAB_EMAIL_ACCOUNTS" data-bind="i18n: 'text', click: function () {showTab(Enums.SettingsTab.EmailAccounts);}"></span>
				</div>
				<div class="item calendar" data-bind="css: {'selected': (tab() == Enums.SettingsTab.Calendar)},
					 visible: bAllowCalendar">
					<span class="icon"></span>
					<span class="link" data-i18n="SETTINGS/TAB_CALENDAR" data-bind="i18n: 'text', click: function () {showTab(Enums.SettingsTab.Calendar);}"></span>
				</div>
				<div class="item mobile_sync" data-bind="css: {'selected': (tab() == Enums.SettingsTab.MobileSync)},
					 visible: bAllowMobileSync">
					<span class="icon"></span>
					<span class="link" data-i18n="SETTINGS/TAB_MOBILE_SYNC" data-bind="i18n: 'text', click: function () {showTab(Enums.SettingsTab.MobileSync);}"></span>
				</div>
				<div class="item outlook_sync" data-bind="css: {'selected': (tab() == Enums.SettingsTab.OutLookSync)},
					 visible: bAllowOutlookSync">
					<span class="icon"></span>
					<span class="link" data-i18n="SETTINGS/TAB_OUTLOOK_SYNC" data-bind="i18n: 'text', click: function () {showTab(Enums.SettingsTab.OutLookSync);}"></span>
				</div>
			</div>
		</div>
	</div>
	<div class="panel">
		<div class="panel_content">
			<div class="middle_bar coomon" data-bind="template: {name: 'Settings_CommonSettingsViewModel', data: oCommon}, 
				 visible: tab() === Enums.SettingsTab.Common"></div>
			<div class="middle_bar accounts" data-bind="template: {name: 'Settings_EmailAccountsSettingsViewModel', data: oEmailAccounts}, 
				 visible: tab() === Enums.SettingsTab.EmailAccounts"></div>
			<div class="middle_bar calendar" data-bind="template: {name: 'Settings_CalendarSettingsViewModel', data: oCalendar}, 
				 visible: tab() === Enums.SettingsTab.Calendar"></div>
			<div class="middle_bar mobile_sync" data-bind="template: {name: 'Settings_MobileSyncSettingsViewModel', data: oMobileSync}, 
				 visible: tab() === Enums.SettingsTab.MobileSync"></div>
			<div class="middle_bar outlook_sync" data-bind="template: {name: 'Settings_OutLookSyncSettingsViewModel', data: oOutLookSync}, 
				 visible: tab() === Enums.SettingsTab.OutLookSync"></div>
		</div>
	</div>
</div>