<div class="service-details">
    <div class="service-slices animate" ng-hide="vm.slices.length == 0">
        <div class="panel panel-info">
            <div class="panel-heading">
                Slices for service:
                <h3 class="panel-title">{{vm.selectedService.name}}</h3>
            </div>
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="slice in vm.slices" ng-click="vm.getInstances(slice)" ng-class="{active: slice.id === vm.selectedSlice.id}">
                    {{slice.humanReadableName}}
                </li>
            </ul>
        </div>
    </div>
    <div class="service-instances animate" ng-hide="vm.instances.length == 0">
        <div class="panel panel-warning">
            <div class="panel-heading">
                Instances:
            </div>
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="instance in vm.instances">
                    {{instance.humanReadableName}}
                </li>
            </ul>
        </div>
    </div>
</div>