<div ng-if="vm.webpart.categories.length == 1"
     class="link-collection-content"
     ng-repeat="category in vm.webpart.categories">

    <div class="text-center">
        <a class="webpart-link imaged-link text-center"
           ng-repeat="link in category.links | filter:q as results"
           href="{{link.smarturl}}"
           title="{{link.description}}"
           target="{{link.openInNewWindow ? '_blank' : '_self'}}">
            <div ng-if="link.iconName.icon.length > 1 && link.imageUrl.length < 1">
                <i class="img-thumbnail">
                    <i class={{link.iconName.icon}}></i>
                </i>
                <span class="text-muted" style="white-space: pre-line;">
                    {{link.description}}
                </span>
            </div>
            <div ng-if="link.imageUrl.length > 1">
                <i class="img-thumbnail">
                    <img ng-src="{{link.imageUrl}}" />
                </i>
                <span class="text-muted" style="white-space: pre-line;">
                    {{link.description}}
                </span>
            </div>
        </a>
    </div>
</div>

<div ng-if="vm.webpart.categories.length !== 1 && category.links.length > 0"
     class="link-collection-content"
     ng-repeat="category in vm.webpart.categories">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span ng-if="category.name == 'Uncategorized'">
                    {{category.name | translate}}
                </span>
                <span ng-if="category.name != 'Uncategorized'">
                    {{category.name}}
                </span>
            </h3>
        </div>
        <div class="wizdom-personallink-imagelist-container">
            <a class="webpart-link imaged-link text-center"
               ng-repeat="link in category.links | filter:q as results"
               href="{{link.smarturl}}"
               title="{{link.description}}"
               target="{{link.openInNewWindow ? '_blank' : '_self'}}">
                <div ng-if="link.iconName.icon.length > 1 && link.imageUrl.length < 1">
                    <i class="img-thumbnail">
                        <i class={{link.iconName.icon}}></i>
                    </i>
                    <span class="text-muted" style="white-space: pre-line;">
                        {{link.description}}
                    </span>
                </div>
                <div ng-if="link.imageUrl.length > 1">
                    <i class="img-thumbnail">
                        <img ng-src="{{link.imageUrl}}" />
                    </i>
                    <span class="text-muted" style="white-space: pre-line;">
                        {{link.description}}
                    </span>
                </div>
            </a>
        </div>
    </div>
</div>