<div class="panel_center" data-bind="customScrollbar: {x: false}">
	<div class="scroll-inner">
		<div class="items_list">
			<div class="item canSelect" data-bind="visible: showAllContacts,
					css: {'selected': 'all' === selectedStorage()},
					click: $parent.gotoContactList">
				<a href="javascript: void(0);" class="title" data-bind="click: function () { changeGroupType('all'); }">
					<span class="name fadeout">
						<span class="icon"></span>
						<span class="text animGoal" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STORAGE_ALL'}"></span>
					</span>
				</a>
			</div>
			
			<div class="item canSelect" data-bind="visible: showPersonalContacts, 
					css: {'selected': 'personal' === selectedStorage()},
					click: $parent.gotoContactList">
				<a href="javascript: void(0);" class="title" id="selenium_contacts_personal_button" data-bind="
						css: {'recivedAnim': recivedAnimPersonal()},
						droppable: {valueFunc: function (oEvent, oUi) { $root.contactsDropToGroupType('personal', oEvent, oUi); }, switchObserv: disableDropToPersonal},
						click: function () { changeGroupType('personal'); }">
					<span class="name fadeout">
						<span class="icon type1"></span>
						<span class="text animGoal" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STORAGE_PERSONAL'}"></span>
					</span>
					<!-- ko if: $parent.shareAddressbookControlView -->
						<!-- ko with: {Id: 'personal', Shared: false} -->
							<!-- ko template: { name: $parent.shareAddressbookControlView.ViewTemplate, data: $parent.shareAddressbookControlView} --><!-- /ko -->
						<!-- /ko -->
					<!-- /ko -->
				</a>
			</div>

			<div class="item canSelect" data-bind="visible: showSharedToAllContacts, 
					css: {'selected': 'shared' === selectedStorage()},
					click: $parent.gotoContactList">
				<a href="javascript: void(0);" class="title" data-bind="
						css: {'recivedAnim': recivedAnimShared()},
						droppable: {valueFunc: function (oEvent, oUi) { $root.contactsDropToGroupType('shared', oEvent, oUi); }, switchObserv: isTeamStorageSelected},
						click: function () { changeGroupType('shared'); }">
					<span class="name fadeout">
						<span class="icon type3"></span>
						<span class="text animGoal" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STORAGE_SHARED'}"></span>
					</span>
				</a>
			</div>

			<div class="item canSelect" data-bind="visible: showTeamContacts, 
					css: {'selected': isTeamStorageSelected},
					click: $parent.gotoContactList">
				<a href="javascript: void(0);" class="title" data-bind="click: function () { changeGroupType('team'); }, css: {'recivedAnim': recivedAnimTeam()}">
					<span class="name fadeout">
						<span class="icon type2"></span>
						<span class="text animGoal" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STORAGE_TEAM'}"></span>
					</span>
				</a>
			</div>
			
			<!-- ko foreach: addressBooks -->
				<div class="item canSelect" data-bind="visible: Display, 
						css: {'selected': $parent.selectedStorage() === Id},
						click: $parents[0].gotoContactList">
					<a href="javascript: void(0);" class="title" data-bind="click: function () { $parent.changeGroupType(Id); }, css: {'recivedAnim': $parent.recivedAnimTeam()}">
						<span class="name fadeout">
							<span class="icon type1"></span>
							<span class="text animGoal" data-bind="text: DisplayName"></span>
						</span>
						<!-- ko if: $parent.shareAddressbookControlView -->
							<!-- ko template: { name: $parent.shareAddressbookControlView.ViewTemplate, data: $parent.shareAddressbookControlView} --><!-- /ko -->
						<!-- /ko -->
					</a>
				</div>
			<!-- /ko -->

			<div data-bind="visible: showPersonalContacts() && 0 < groupFullCollection().length">
				<div class="section_title fadeout" data-bind="i18n: {'key': '%MODULENAME%/HEADING_GROUPS'}"></div>
				<div class="items_section" data-bind="foreach: groupFullCollection">
					<div class="item canSelect" data-bind="css: {'selected': selected}">
						<a href="javascript: void(0);" class="title" data-bind="
							css: {'recivedAnim': recivedAnim()}, 
							droppable: {valueFunc: function (oEvent, oUi) { $root.contactsDrop($data, oEvent, oUi); }, switchObserv: selected},
							click: function () { $root.onViewGroupClick($data); }
						">
							<span class="name fadeout">
								<span class="icon type4"></span>
								<span class="text animGoal" data-bind="text: Name()"></span>
							</span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="panel_bottom">
	<div class="manage_folders" data-bind="visible: manageAddressBooksHash() !== '#'">
		<a href="javascript: void(0)" data-bind="i18n: {'key': '%MODULENAME%/ACTION_MANAGE_ADDRESSBOOKS'}, attr: {href: manageAddressBooksHash}"></a>
	</div>
</div>
