<div class="servicemenu-classic" ng-if="::(!vm.isEmpty)">
    <div ng-if="vm.showEditLinksIcon()" class="wtsite-service-actions" style="text-align: right; margin: 15px 15px 0 15px;">
        <a>
            <i class="glyphicon glyphicon-pencil" style="color:lightgray;cursor:pointer"
               ng-click="vm.editServiceMenu()">
            </i>
        </a>
    </div>
    <ul ng-repeat="category in vm.serviceMenu.categories" ng-init="outerIndex=$index" class="v2 wtsite-service-list" ng-if="category.links.length">
        <li>
            <h1>{{::category.name}}</h1>
            <ul class="clearfix items">
                <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.icon"></div>
                        </div>
                        <div class="link-text">
                            {{item.name}}
                        </div>
                    </a>
                </li>
            </ul>
        </li>

        <li ng-if="::($index==0 && vm.serviceMenu.categories.length==1)" style="margin-top:10px;">
            <h1>{{'My Tools' | translate}}</h1>
            <ul class="clearfix items">
                <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.icon"></div>
                        </div>
                        <div class="link-text">
                            {{item.name}}
                        </div>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
