<div class="bootstrap-wrapper wt-webpart-projectspace-metadata">

	<!-- actions -->
	<div class="row">
		<div class="col-xs-12 add-bottom-padding">
			<div class="pull-right" ng-if="canEditMetadata">
				<!-- edit -->
				<span class="glyphicon glyphicon-pencil" ng-click="Edit();"></span>
				<span class="wt-linkText hidden-xs" ng-click="Edit();">
					{{'Edit' | translate}}
				</span>
			</div>
		</div>
	</div>
	<!-- view -->
	<table class="table" ng-if="metadataReady" ng-init="setSiteNameTitle('Title',true)">
		<tbody>
			<tr ng-repeat="(key, metadata) in metadata | filter:filterMeta track by key">
				<td>
					{{metaHelper.getDisplayName(metadata.metadataDefinition)}}
				</td>
				<td ng-switch on="metadata.metadataDefinition.type">
					<div ng-switch-when="user">
						<span ng-repeat="user in metadata.value">
							{{user.displayName}}
							<span ng-show="!$last"> ,</span>
						</span>
					</div>
					<div ng-switch-when="datetime">
						<div ng-if="metadata.metadataDefinition.definition.properties && metadata.metadataDefinition.definition.properties.dateonly">
							{{metadata.value | date:'shortDate'}}
						</div>
						<div ng-if="!metadata.metadataDefinition.definition.properties || !metadata.metadataDefinition.definition.properties.dateonly">
							{{metadata.value | date:'short'}}
						</div>
					</div>
					<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="email">
						<a href="mailto:{{metadata.value}}">{{metadata.value}}</a>
					</div>
					<div ng-switch-when="select">
						{{metadata.value.name}}
					</div>
					<div ng-switch-when="taxonomy">
						<span ng-repeat="termset in metadata.value">
							{{termset.label}}{{$last ? '' : ', '}}
						</span>
					</div>
					<div ng-switch-when="textarea">
						<div class="fr-view" ng-bind-html="metadata.valueHtml | wizdom365TrustHtml"></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-default>
						{{metadata.value}}
					</div>
				</td>
			</tr>
		</tbody>

	</table>

</div>