<div class="panel panel-default" ng-class="vm.panelClass">
	<div class="panel-body">
		<div class="link-sortable link-collection-content">
			<div class="link-collection-content"
				 ng-repeat="(catIdx, category) in vm.categoryDatasource"
				 ng-init="categoryIcon = category.id == 0 ? 'icon-navigation-menu-4'
                                 : 'icon-folder'">
				<div class="category-header">
					<div class="category-header-content">
						<div class="pull-left">
							<a>
								<i class="streamline"
								   ng-class="categoryIcon">
								</i>
								<span ng-if="category.name == 'Uncategorized'">
									{{category.name | translate}}
								</span>
								<span ng-if="category.name != 'Uncategorized'">
									{{category.name}}
								</span>
							</a>
						</div>
					</div>
					<div>
						<div class="pull-right" style="padding: 5px 0 5px 5px; margin-right: 8px;">							
							<span ng-show="vm.accessOptions.isAdmin || vm.accessOptions.allowSortLinkCategories"
								  class="link-move-container"
								  style="font-size: 12px">
								<a title="{{'Move up' | translate}}">
									<i class="streamline icon-arrow-up" ng-class="{'disabled': catIdx == 0}"
									   ng-click="vm.moveCategory(catIdx, -1)">
									</i>
								</a>
								<a title="{{'Move down' | translate}}">
									<i class="streamline icon-arrow-down" ng-class="{'disabled': catIdx >= vm.categoryDatasource.length - 1}"
									   ng-click="vm.moveCategory(catIdx, 1)">
									</i>
								</a>
							</span>
							<span ng-if="vm.accessOptions.isAdmin || vm.accessOptions.allowPersonalLinks"
								  class="link-move-container">
								<a ng-click="vm.accessOptions.isAdmin ? vm.addPredefinedLink(category)
                                                                      : vm.addPersonalLink(category)">
									<i class="streamline icon-add-circle"></i>
									<span class="wt-linkText ng-binding"
										  title="{{(vm.accessOptions.isAdmin ? 'Add predefined link' : 'Add personal link') | translate}}">
										{{(vm.accessOptions.isAdmin ? 'Add predefined link' : 'Add personal link') | translate}}
									</span>
								</a>
							</span>
							<a ng-if="category.name !== 'Uncategorized' && vm.accessOptions.isAdmin">
								<i class="streamline icon-pencil-1"
								   ng-click="vm.editCategory(category)">
								</i>
							</a>
							<a ng-if="category.name !== 'Uncategorized' && vm.accessOptions.isAdmin">
								<i class="streamline icon-bin-1"
								   ng-click="vm.removeCategory(category)">
								</i>
							</a>
						</div>
					</div>
				</div>

				<div ui-sortable="vm.sortableOptions"
					 class="categorylinks-container"
					 ng-model="category.links">

					<div class="link-container"
						 ng-repeat="link in category.links"
						 ng-class="link.type === 3 || vm.accessOptions.isAdmin
                      || vm.accessOptions.allowSortLinks ? 'sortable' : 'not-sortable'">

						<div class="link">
							<div class="float-wrapper">
								<div class="pull-left">
									<span ng-if="link.type == 1"
										  class="label label-primary">
										Corp
									</span>
									<i class="streamline icon-hyperlink-2"></i>
									<span ng-bind="link.name"></span>
								</div>
							</div>

							<div ng-if="vm.accessOptions.isAdmin" class="float-wrapper">
								<div class="pull-right">
									<span class="link-move-container">
										<a>
											<i class="streamline icon-arrow-up" ng-class="{'disabled': $index == 0}"
											   ng-click="vm.moveLink(link, $index, catIdx, -1)">
											</i>
										</a>
										<a>
											<i class="streamline icon-arrow-down" ng-class="{'disabled': $index >= category.links.length - 1}"
											   ng-click="vm.moveLink(link, $index, catIdx, 1)">
											</i>
										</a>
									</span>
									<a>
										<i class="streamline icon-pencil-1"
										   ng-class="{'icon-hidden': link.type === 1}"
										   ng-click="vm.editPredefinedLink(category.id, $index, link)">
										</i>
									</a>
									<a>
										<i class="streamline icon-bin-1"
										   ng-click="vm.removeLinkAdmin($index, link)">
										</i>
									</a>
								</div>
							</div>

							<div ng-if="!vm.accessOptions.isAdmin" class="float-wrapper">
								<div class="pull-right">
									<span ng-if="vm.accessOptions.allowSortLinks || link.type === 3"
										  class="link-move-container">
										<a>
											<i class="streamline icon-arrow-up" ng-class="{'disabled': $index == 0 || (!vm.accessOptions.allowSortLinks && category.links[$index - 1] && category.links[$index - 1].type !== 3)}"
											   ng-click="vm.moveLink(link, $index, catIdx, -1)">
											</i>
										</a>
										<a>
											<i class="streamline icon-arrow-down" ng-class="{'disabled': $index >= category.links.length - 1}"
											   ng-click="vm.moveLink(link, $index, catIdx, 1)">
											</i>
										</a>
									</span>
									<a ng-if="link.type === 3">
										<i class="streamline icon-pencil-1"
										   ng-click="vm.editPredefinedLink(category.id, $index, link)">
										</i>
									</a>
									<a ng-if="vm.accessOptions.allowDeleteLinks || link.type === 3">
										<i class="streamline icon-bin-1"
										   ng-click="vm.removeLinkUser($index, link)">
										</i>
									</a>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="panel-heading text-right" style="padding: 10px 25px;" ng-if="vm.accessOptions.isAdmin">
		<button class="btn btn-primary"
				ng-click="vm.addCorporateLinks();">
			{{'Add corporate link' | translate}}
		</button>
		<button type="button"
				class="btn btn-primary"
				ng-click="vm.createCategory()">
			{{'Create Category' | translate}}
		</button>
	</div>
</div>

