- <div id="video-description" class="row">
- <div class="col-md-12">
- <div id="description-label">Description</div>
- {{ video.description }}
+ <div class="row video-details">
+ <div class="video-details-date-description col-xs-8 col-md-9">
+ <div class="video-details-date">
+ Published on {{ video.createdAt | date:'short' }}
+ </div>
+
+ <div class="video-details-description">
+ {{ video.description }}
+ </div>
+ </div>
+
+ <div class="video-details-attributes col-xs-4 col-md-3">
+ <div class="video-details-attribute">
+ <span class="video-details-attribute-label">
+ Category:
+ </span>
+ <span class="video-details-attribute-value">
+ {{ video.categoryLabel }}
+ </span>
+ </div>
+
+ <div class="video-details-attribute">
+ <span class="video-details-attribute-label">
+ Licence:
+ </span>
+ <span class="video-details-attribute-value">
+ {{ video.licenceLabel }}
+ </span>
+ </div>
+
+ <div class="video-details-attribute">
+ <span class="video-details-attribute-label">
+ Language:
+ </span>
+ <span class="video-details-attribute-value">
+ {{ video.languageLabel }}
+ </span>
+ </div>
+
+ <div class="video-details-attribute">
+ <span class="video-details-attribute-label">
+ Tags:
+ </span>
+
+ <div class="video-details-tags">
+ <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
+ {{ tag }}
+ </a>
+ </div>
+ </div>
+