<div class="bootstrap-wrapper w365cm wt-webpart-metadata">
	<div ng-class="cssTheme">
		<!-- 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('Course name',true);"></span>
					<span class="wt-linkText hidden-xs" ng-click="Edit('Course name',true);">
						{{'Edit' | translate}}
					</span>
				</div>
			</div>
		</div>

		<!-- view -->
		<div class="metaTableHeading">{{'Practical information' |  translate}}</div>
		<table class="table metadata-table" ng-if="metadataReady" ng-init="metadata.addr = cmMetadata.getAddress(metadata);">
			<tbody>
				<tr>
					<td><span class="ms-Icon ms-Icon--POI" title="{{'Location' |  translate}}"></span></td>
					<td ng-if="metadata.addr.length > 0">
						{{metadata.addr}}
					</td>
					<td ng-if="metadata.addr.length == 0">
						{{cmMetadata.getLocation(metadata)}}
					</td>
				</tr>
				<tr>
					<td><span class="ms-Icon ms-Icon--CalendarAgenda" title="{{'Start and end time' |  translate}}"></span></td>
					<td>
						{{cmMetadata.getStartDate(metadata) | date:'short' }} -
						{{cmMetadata.getEndDate(metadata) | date: 'short' }}
					</td>
				</tr>
				<tr>
					<td><span class="ms-Icon ms-Icon--AlarmClock" title="{{'Registration deadline' |  translate}}"></span></td>
					<td>
						{{cmMetadata.getDeadline(metadata) | date:'short' }}
					</td>
				</tr>
				<tr>
					<td><span class="ms-Icon ms-Icon--Contact" title="{{'Teacher' | translate}}"></span></td>
					<td>
						<span ng-repeat="principal in teachers.principals | filter:isUser | orderBy:'displayName'">
							<a ng-href="{{principal.publicUrl}}">{{principal.displayName}}</a>
							<span ng-show="!$last"> ,</span>
						</span>
					</td>
				</tr>
                <tr ng-if="canDownloadCalendar">
                    <td><span role="button" ng-click="downloadCalInvite()" class="ms-Icon ms-Icon--CloudDownload" title="{{'Download calendar invite' |  translate}}"></span></td>
                    <td>
                        <a href ng-click="downloadCalInvite()">{{'Download calendar invite' |  translate}}</a>
                    </td>
                </tr>

				<tr ng-show="cmMetadata.isDraft(metadata)">
					<td><span class="ms-Icon ms-Icon--Preview" title="{{'Draft' |  translate}}"></span></td>
					<td class="draftText">
						{{'Draft' |  translate}}
					</td>
				</tr>


				<tr ng-repeat="(key, metadata) in metadata | filter:isCustomMetadata track by key">
					<td>
						{{cmMetadata.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="textarea">
                            <div class="fr-view" ng-bind-html="metadata.valueHtml"></div>
                        </div>
                        <div ng-switch-when="taxonomy">
                            <span ng-repeat="termset in metadata.value">
                                {{termset.label}}{{$last ? '' : ', '}}
                            </span>
                        </div>
                        <div ng-switch-default>
                            {{metadata.value}}
                        </div>
                    </td>
				</tr>
			</tbody>

		</table>
	</div>
</div>