<div *ngIf="exercise">
<div class="modal fade" id="mdModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">README
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div *ngIf="exercise.description" class="row">
<p style="padding-bottom: 15px; text-align: justify;">{{exercise.description}}</p>
</div>
<div class="row">
<div class="col-6 col-md-4" style="margin-bottom: 15px;">
<p style="text-align: left;"><strong jhiTranslate="exercise.details.details"></strong>
</p>
<hr>
<!-- modal rating-->
<div *ngIf="exercise.rating"
style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
<div style="float: left;">
<p class="card-text" jhiTranslate="exercise.details.rating"></p>
</div>
<div class="star-container">
<span class="star" *ngFor="let starNumber of [1,2,3,4,5]" [ngClass]="{'star-marked': exercise.rating >= starNumber,
'star-unmarked': exercise.rating < starNumber}">
</span>
</div>
</div> <!-- modal rating end-->
<div *ngIf="exercise.rating"
style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
<div style="float: left;">
<div><fa-icon icon="eye"></fa-icon></div>
<!-- <div class="onhoverIconDisplay"><p class="card-text" jhiTranslate="exercise.details.views"></p></div> -->
</div>
<div class="star-container">
<span>
{{exercise.views}}
</span>
</div>
</div> <!-- modal views end-->
<div *ngIf="exercise.rating"
style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
<div style="float: left;">
<fa-icon icon="download"></fa-icon>
</div>
<div class="star-container">
<span>
{{exercise.downloads}}
</span>
</div>
</div> <!-- modal views end-->
</div>
<div class="col-12 col-md-8">
<p style="text-align: left;">
<strong jhiTranslate="exercise.metadata.metadata"></strong>
</p>
<hr>
<table class="metadata-table">
<ng-container *ngIf="exercise.creators">
<tr *ngIf="exercise.creators.length > 0">
<td *ngIf="exercise.creators.length === 1"
jhiTranslate="exercise.metadata.creatorSingular"
class="metadata-table-description">
</td>
<td *ngIf="exercise.creators.length > 1"
jhiTranslate="exercise.metadata.creatorsPlural"
class="metadata-table-description">
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.contributor">
<tr *ngIf="exercise.contributor.length > 0">
<td *ngIf="exercise.contributor.length === 1"
jhiTranslate="exercise.metadata.contributorSingular"
class="metadata-table-description">
</td>
<td *ngIf="exercise.contributor.length > 1"
jhiTranslate="exercise.metadata.contributorsPlural"
class="metadata-table-description">
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.publisher">
<tr *ngIf="exercise.publisher.length > 0">
<td *ngIf="exercise.publisher.length === 1"
jhiTranslate="exercise.metadata.publisherSingular"
class="metadata-table-description">
</td>
<td *ngIf="exercise.publisher.length > 1"
jhiTranslate="exercise.metadata.publisherPlural"
class="metadata-table-description">
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.keyword">
<tr *ngIf="exercise.keyword.length > 0">
<td jhiTranslate="exercise.metadata.keywords"
class="metadata-table-description">
</td>
<td class="metadata-table-value"
[innerHTML]="arrayToString(exercise.keyword)">
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.format">
<tr *ngIf="exercise.format.length > 0">
<td jhiTranslate="exercise.metadata.format"
class="metadata-table-description">
</td>
<td class="metadata-table-value"
[innerHTML]="arrayToString(exercise.format)">
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.programmingLanguages">
<tr *ngIf="exercise.programmingLanguages.length > 0">
<td *ngIf="exercise.programmingLanguages.length === 1"
jhiTranslate="exercise.metadata.programmingLanguageSingular"
class="metadata-table-description">
</td>
<td *ngIf="exercise.programmingLanguages.length > 1"
jhiTranslate="exercise.metadata.programmingLanguagesPlural"
class="metadata-table-description">
</td>
<td class="metadata-table-value"
[innerHTML]="arrayToString(exercise.programmingLanguages)">
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.requires">
<tr *ngIf="exercise.requires.length > 0">
<td jhiTranslate="exercise.metadata.requires"
class="metadata-table-description">
</td>
<td class="metadata-table-value"
[innerHTML]="arrayToString(exercise.requires)">
</td>
</tr>
</ng-container>
<tr *ngIf="exercise.license.length > 0">
<td jhiTranslate="exercise.metadata.license" class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.license}}
</td>
</tr>
<tr *ngIf="exercise.difficulty">
<td jhiTranslate="exercise.metadata.difficulty"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{'exercise.metadata.' + exercise.difficulty | translate }}
</td>
</tr>
<tr *ngIf="exercise.timeRequired">
<td jhiTranslate="exercise.metadata.timeRequired"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.timeRequired}}
</td>
</tr>
<tr *ngIf="exercise.educationLevel">
<td jhiTranslate="exercise.metadata.educationLevel"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.educationLevel}}
</td>
</tr>
<tr *ngIf="exercise.type">
<td jhiTranslate="exercise.metadata.type" class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{'exercise.metadata.' + exercise.type | translate }}
</td>
</tr>
<tr *ngIf="exercise.structure">
<td jhiTranslate="exercise.metadata.structure" class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{'exercise.metadata.' + exercise.structure | translate }}
</td>
</tr>
<tr *ngIf="exercise.status">
<td jhiTranslate="exercise.metadata.status" class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{'exercise.metadata.' + exercise.status | translate }}
</td>
</tr>
<tr *ngIf="exercise.deprecated">
<td jhiTranslate="exercise.metadata.deprecated"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.deprecated}}
</td>
</tr>
<ng-container *ngIf="exercise.lastUpdate">
<tr *ngIf="exercise.lastUpdate">
<td jhiTranslate="exercise.metadata.lastUpdate"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.lastUpdate.toLocaleString()}}
</td>
</tr>
</ng-container>
<ng-container *ngIf="exercise.version">
<tr>
<td jhiTranslate="exercise.metadata.version"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.version}}
</td>
</tr>
</ng-container>
<!-- <ng-container *ngIf="exercise.version">
<tr>
<td jhiTranslate="exercise.metadata.metadataVersion"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{exercise.metadataVersion}}
</td>
</tr>
</ng-container> -->
</table>
</div>
<div class="col-6 col-md-4"></div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
jhiTranslate="exercise.close"></button>
</div>
</div>
</div>
</div>
</div>