<div ng-if="::(!vm.isEmpty)">
    <ul ng-if="category.links.length > 0 || (vm.servicemenuContainsZeroLinks && vm.personalizationAllowed && $first)" ng-repeat="category in vm.serviceMenu.categories" ng-init="outerIndex=$index" class='wtsite-service-list'>
        <li ng-repeat="item in category.links" class="wtsite-service-listitem">
            <a style="cursor: pointer;" href="{{item.smarturl}}" class="tile-styling" ng-style="vm.renderIconOrImage(item)" title="{{::item.description}}" target="{{::(item.openInNewWindow)?'_blank':'_self'}}">
                <div>
                    
                    <div ng-if="!item.useIcon">
                        <img ng-if="!item.isRound" style="height: 110px; width: 110px" ng-src="{{item.imageUrl}}">
                        <img ng-if="item.isRound" class="round-image" ng-src="{{item.imageUrl}}">
                    </div>
                    <div ng-if="item.useIcon" class="icon-styling" style="font-size: 50px" ng-class="item.iconName.split(',')[0]"></div>
                </div>
                <div class="link-text">
                    {{item.name}}
                </div>
            </a>
        </li>
        <li ng-if="::vm.personalizationAllowed" class="personalizationPen">
            <a>
                <i class="glyphicon glyphicon-pencil" style="color:lightgray;cursor:pointer"
                   ng-click="vm.editServiceMenu()">
                </i>
            </a>
        </li>       
    </ul>
</div>