<div class="list-block">
	<ul>
		<li data-bind="visible: showAllContacts, css: {'selected': 'all' === selectedStorage()}, click: $parent.gotoContactList">
			<div class="item-content" data-bind="click: function () { changeGroupType('all'); }">
				<div class="item-media aurora-icons">
					<i class="icon"></i>
				</div>
				<div class="item-inner">
					<div class="item-title" data-bind="text: getStorageDisplayName('all')"></div>
				</div>
			</div>
		</li>

		<li data-bind="visible: showPersonalContacts, css: {'selected': 'personal' === selectedStorage()}, click: $parent.gotoContactList">
			<div class="item-content" data-bind="click: function () { changeGroupType('personal'); }">
				<div class="item-media aurora-icons type1">
					<i class="icon"></i>
				</div>
				<div class="item-inner">
					<div class="item-title" data-bind="text: getStorageDisplayName('personal')"></div>
				</div>
			</div>
		</li>
		
		<li data-bind="visible: showSharedToAllContacts, css: {'selected': 'shared' === selectedStorage()}, click: $parent.gotoContactList">
			<div class="item-content" data-bind="click: function () { changeGroupType('shared'); }">
				<div class="item-media aurora-icons type3">
					<i class="icon"></i>
				</div>
				<div class="item-inner">
					<div class="item-title" data-bind="text: getStorageDisplayName('shared')"></div>
				</div>
			</div>
		</li>
		
		<li data-bind="visible: showTeamContacts, css: {'selected': isTeamStorageSelected}, click: $parent.gotoContactList">
			<div class="item-content" data-bind="click: function () { changeGroupType('team'); }">
				<div class="item-media aurora-icons type2">
					<i class="icon"></i>
				</div>
				<div class="item-inner">
					<div class="item-title" data-bind="text: getStorageDisplayName('team')"></div>
				</div>
			</div>
		</li>
	</ul>
</div>

<div class="content-block-title" data-bind="i18n: {'key': '%MODULENAME%/HEADING_GROUPS'}, visible: showPersonalContacts() && 0 < groupFullCollection().length"></div>

<div class="list-block" data-bind="visible: showPersonalContacts() && 0 < groupFullCollection().length">
	<ul data-bind="foreach: groupFullCollection">
		<li data-bind="css: {'selected': selected}">
			<div class="item-content" data-bind="click: function () { $root.onViewGroupClick($data); }">
				<div class="item-media aurora-icons type4">
					<i class="icon"></i>
				</div>
				<div class="item-inner">
					<div class="item-title" data-bind="text: Name()"></div>
				</div>
			</div>
		</li>
	</ul>
</div>
