<div ng-controller="TypesController as vm">
    <div ng-if="!vm.selectedItemType">
        <h2>
            {{'Types' | translate}}
        </h2>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="itemType in vm.itemTypes">
                <div>
                    <a href="" ng-click="vm.select(itemType)">{{itemType.name || '[No name]'}}</a>
                    <a ng-if="itemType.itemCount == 0" href="" ng-click="vm.delete(itemType)" class="pull-right"><i class="glyphicon glyphicon-trash"></i> Delete</a>
                    <i ng-if="itemType.itemCount > 0" class="pull-right">{{'Used by' | translate}} {{itemType.itemCount}} {{' items' | translate}}</i>
                </div>                
            </li>
        </ul>
        <button ng-hide="saving" type="button" ng-click="vm.create();" class="btn btn-default">{{'Create new' | translate}}</button>
    </div>
    <div ng-if="vm.selectedItemType" type-directive itemtype="vm.selectedItemType"></div>
</div>