<div class="link-collection-dropdown"
     ng-if="category.links.length > 0"
     ng-repeat="category in vm.webpart.categories"
     ng-init="categoryIcon = category.id == 0 ? 'glyphicon-list-alt'
                                 : 'glyphicon-folder-close';
              categoryColor = category.id == 0 ? 'bg-success'
                                 : 'bg-info'">

    <div dropdown class="btn-group">
        <button type="button"
                id="category-{{category.id}}"
                class="btn btn-primary dropdown-toggle"
                data-toggle="dropdown" 
                aria-haspopup="true"
                aria-expanded="false">
            <span ng-if="category.name == 'Uncategorized'">
                {{category.name | translate}}
            </span>
            <span ng-if="category.name != 'Uncategorized'">
                {{category.name}}
            </span>            
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu"
            role="menu"
            aria-labelledby="category-{{category.id}}">
            <li role="menuitem"
                ng-repeat="link in category.links | filter:q as results">

                <a class="webpart-link"
                   href="{{link.smarturl}}"
                   target="{{link.openInNewWindow?'_blank':'_self'}}"
                   title="{{link.description}}">
                    {{link.smartname}}
                </a>

            </li>
        </ul>
    </div>
</div>