<div ng-if="!metadata.metadataDefinition">
    <ul class="list-unstyled">
        <li ng-repeat="principal in metadata.principals">
            {{principal.displayName}}
        </li>
    </ul>
</div>
<div ng-if="metadata.metadataDefinition"ng-switch="metadata.metadataDefinition.name">
    <!--Example:
        <div ng-switch-when="Deadline">
        <div ng-bind-html="metadata.value | wizdom365FormatDate"></div>
    </div>-->
    <div ng-switch-default>
        <div ng-switch on="metadata.metadataDefinition.type">
            <div ng-switch-when="checkbox">
                <span ng-show="metadata.value">{{"Yes" | translate}}</span>
                <span ng-show="!metadata.value">{{"No" | translate}}</span>
            </div>
            <div ng-switch-when="datetime">
                <div ng-if="metadata.metadataDefinition.definition.properties && metadata.metadataDefinition.definition.properties.dateonly">
                    <div ng-bind-html="metadata.value | date:'shortDate'"></div>
                </div>
                <div ng-if="!metadata.metadataDefinition.definition.properties || !metadata.metadataDefinition.definition.properties.dateonly">
                    <div ng-bind-html="metadata.value | date:'short'"></div>
                </div>
            </div>
            <div ng-switch-when="number">
                <div ng-bind-html="metadata.value | number:0"></div>
            </div>
            <div ng-switch-when="email">
                <a href="mailto:{{metadata.value}}"><div ng-bind-html="metadata.value"></div></a>
            </div>
            <div ng-switch-when="select">
                <div ng-bind-html="metadata.value.name"></div>
            </div>
            <div ng-switch-when="textarea">
                <div class="fr-view" ng-bind-html="metadata.value"></div>
            </div>
            <div ng-switch-when="imagepicker">
                <a ng-if="metadata.value" href="{{metadata.value}}">
                    <img ng-if="metadata.value" ng-src="{{metadata.value}}" class="image-picker-presentation" />
                </a>
            </div>
            <div ng-switch-when="taxonomy">
                <span ng-repeat="termset in metadata.value" >
                    <span ng-bind-html="termset.label"></span>{{$last ? '' : ', '}}
                </span>
            </div>
            <div ng-switch-default>
                <div class="fr-view" ng-bind-html="metadata.value"></div>
            </div>
        </div>
    </div>
</div>
