<div ng-controller="MetadatasController as vm">
    <div ng-if="!vm.selectedMetadata">
        <h2>
            {{'Metadata' | translate}}
        </h2>      
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="metadata in vm.metadatas">
                <div class="row">
                    <div class="col-xs-3">
                        <a href="" ng-click="vm.select(metadata)">{{metadata.schema.label || '[No label]' || '[No name]'}}</a>
                    </div>
                    <div class="col-xs-2">
                        {{metadata.schema.type}}
                    </div>
                    <div class="col-xs-2">
                        InternalName: {{metadata.internalName}}
                    </div>
                    <div class="col-xs-5">
                        <a href="" ng-click="vm.delete(metadata)" class="pull-right"><i class="glyphicon glyphicon-trash"></i> Delete</a>
                    </div>
                </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.selectedMetadata" metadata-directive metadata="vm.selectedMetadata"></div>
</div>