<div class="lt-module-page" ng-controller="Wizdom365PersonalLinkConfigurationController">

	<div class="lt-module-page__top lt-module-page-top">
		<div class="lt-module-page-top__title">
			<h1>{{'Quick Links' | translate}}</h1>
		</div>
		<div class="lt-module-page-top__actions">
			<button type="button" class="btn btn-primary" ng-click="createCategory()">{{'Create Link Category' | translate}}</button>
		</div>
	</div>

	<div class="panel panel-default lt-module-page__content-panel">
		<div class="panel-heading">{{'Administration' | translate}}</div>
		<ul class="list-group lt-tree" ng-repeat="category in categories">
			<li class="list-group-item lt-tree__item">
				<div class="lt-tree-item__title">{{category.name}}</div>
				<div class="lt-tree-item__actions" ng-if="!category.isSystemCategory">
					<span class="streamline icon-hyperlink-2" aria-hidden="true" title="{{'Create Link' | translate}}" ng-click="createLink(category)"></span>
					<span class="streamline icon-pencil-1" aria-hidden="true" ng-click="editCategory(category)"></span>
					<span class="streamline icon-bin-1" aria-hidden="true" ng-click="removeCategory(category)"></span>
				</div>
			</li>
			<ul class="list-group lt-tree lt-tree__child lt-tree__child-noMargin">
				<li class="list-group-item lt-tree__item" ng-repeat="link in category.links">
					<div class="lt-tree-item__title">
						<i class="streamline icon-hyperlink-2"></i><span>{{link.name}}</span>
					</div>
					<div class="lt-tree-item__actions">
						<span class="streamline icon-pencil-1" aria-hidden="true" ng-click="editLink(link)"></span>
						<span ng-if="!link.isSystemLink" class="streamline icon-bin-1" aria-hidden="true" ng-click="removeLink(link)"></span>
					</div>
				</li>
			</ul>
		</ul>

	</div>


	<div class="link-collection-content" ng-repeat="category in categories" ng-if>
		<div class="link-category">
			<div class="float-wrapper">
				<div class="pull-left" ng-click="category.collapsed = !category.collapsed">
					<a>
						<i class="glyphicon" ng-class="category.collapsed ? 'glyphicon-folder-close' : 'glyphicon-folder-open'"></i>
						<span>{{category.name}}</span>
					</a>
				</div>
			</div>

			<div class="float-wrapper" ng-if="!category.isSystemCategory">
				<div class="pull-right">
					<button type="button" class="btn btn-default" ng-click="createLink(category)"><i class="glyphicon glyphicon-link"></i> {{'Create Link' | translate}}</button>
					<a><i class="glyphicon glyphicon-pencil" ng-click="editCategory(category)"></i></a>
					<a><i class="glyphicon glyphicon-trash" ng-click="removeCategory(category)"></i></a>
				</div>
			</div>
		</div>

		<div class="link-container" ng-hide="category.collapsed" ng-repeat="link in category.links">
			<div class="link">
				<div class="float-wrapper">
					<div class="pull-left">
						<i class="glyphicon glyphicon-link"></i>
						<span ng-bind="link.name"></span>
					</div>
				</div>

				<div class="float-wrapper">
					<div class="pull-right">
						<a><i class="glyphicon glyphicon-pencil" ng-click="editLink(link)"></i></a>
						<a ng-if="!link.isSystemLink"><i class="glyphicon glyphicon-trash" ng-click="removeLink(link)"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
