<div *ngIf="exercise">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<ng-template #helpComingSoon> {{ 'exercise.comingSoon' | translate}}</ng-template>
<!-- Modal Header -->
<div class="modal-header">
<img class="card-img-top col-3" src="{{exercise.imageURL}}" alt="exercise image"
(error)="correctImageURL($event)" style="height: auto; float: left;">
<h4 class="modal-title">{{exercise.title}}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</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.userHasLiked"
style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
<div style="float: left;">
<div>
<button [ngbTooltip]="helpForLike" style="padding: 0%; font-size: 1.2;"
*ngIf="isAuthenticated()" type="button" class="btn"
(click)="likeAction()" [disabled]="!isAuthenticated()">
<fa-icon [icon]="['far', 'heart']"></fa-icon>
</button>
<span [ngbTooltip]="helpForLikeNotLoggedIn">
<button style="padding: 0%; font-size: 1.2;" *ngIf="!isAuthenticated()"
type="button" class="btn" (click)="likeAction()" [disabled]="true">
<fa-icon [icon]="['far', 'heart']"></fa-icon>
</button>
</span>
</div>
</div>
<div class="star-container">
<span>
{{exercise.numberOfLikes}}
</span>
</div>
<ng-template #helpForLike> {{ 'exercise.details.like' | translate}}</ng-template>
<ng-template #helpForLikeNotLoggedIn> {{ 'exercise.details.likeLogin' | translate}}
</ng-template>
</div> <!-- modal views end-->
<div *ngIf="exercise.userHasLiked"
style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
<div style="float: left;">
<div>
<button [ngbTooltip]="helpForUnLike" style="padding: 0%; font-size: 1.2;"
*ngIf="exercise.userHasLiked" type="button" class="btn"
(click)="unlikeAction()" [disabled]="!isAuthenticated()">
<fa-icon class="rediconcolor" icon='heart'></fa-icon>
</button>
</div>
</div>
<div class="star-container">
<span>
{{exercise.numberOfLikes}}
</span>
</div>
<ng-template #helpForUnLike> {{ 'exercise.details.unlike' | translate}}
</ng-template>
</div>
<div *ngIf="exercise.views"
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.downloads >= 0"
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 *ngIf="exercise.numberOfWatchlistEntries >= 0"
style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
<div style="float: left;">
<fa-icon icon="star"></fa-icon>
</div>
<div class="star-container">
<span>
{{exercise.numberOfWatchlistEntries}}
</span>
</div>
</div>
<!-- modal bookmark-->
<div style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px;">
<div style="float: left;">
<p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;"
placement="right">
<input class="form-check-input" type="checkbox"
[checked]="isOnCurrentWatchlist(exercise)"
(change)="handleForCurrentWatchlist(exercise)" value=""
id="modal-defaultCheck1">
<label class="form-check-label" for="modal-defaultCheck1"></label>
</div>
</div> <!-- modal bookmark end-->
<div *ngIf="exercise.originalResult.file.parentId"
style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px;">
<ng-template #helpToParent data-container="body"> {{ 'exercise.help.toParent' |
translate}}</ng-template>
<fa-icon style="padding: 5px 0px 0px 5px;float:left;" [ngbTooltip]="helpToParent"
container="body" [icon]="treeIcon"
(click)="toParent(exercise.originalResult.file.parentId)"></fa-icon>
</div>
<button *ngIf="hasChildren()" type="button"
class="btn btn-outline-secondary"
(click)="searchChildren(exercise.originalResult.exerciseId)" data-dismiss="modal"
style="display: block; margin-bottom: 5px;"
jhiTranslate="exercise.details.allExercises">
</button>
<button type="button" class="btn btn-outline-secondary" style="display: block;"
(click)="openLink(exercise.gitlabURL)"
jhiTranslate="exercise.details.git">
</button>
<button type="button"
class="btn btn-outline-secondary"
style="margin-top: 20px;"
data-toggle="modal"
data-target="#mdModal"
(click)="selectREADME()"
>README
</button>
</div>
<jhi-exercise-metadata class="col-12 col-md-8" [exercise]="exercise">
</jhi-exercise-metadata>
<div class="col-6 col-md-4"></div>
<div class="col-12 col-md-8">
<p style="text-align: left; margin-top: 20px;"><strong
jhiTranslate="exercise.export.export"></strong>
</p>
<hr>
<a *ngFor="let action of exercise.originalResult.supportedActions"
class="btn btn-outline-secondary" role="button" aria-pressed="true"
style="float: left; margin-right: 5px; margin-top: 5px;"
(click)="startAction(action, exercise)">{{action.commandName}}</a>
<div [ngbTooltip]="helpComingSoon" placement="bottom">
<button *ngIf="hasChildren()" type="button"
class="btn btn-outline-secondary"
style="float: left; margin-right: 5px; margin-top: 5px;"
jhiTranslate="exercise.export.latex"
title="{{ 'exercise.comingSoon' | translate}}" disabled>
</button>
</div>
<a class="btn btn-outline-secondary" role="button" aria-pressed="true"
style="float: left; margin-right: 5px; margin-top: 5px;" (click)="download()"
jhiTranslate="exercise.export.download"></a>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
jhiTranslate="exercise.close"></button>
</div>
</div>
</div>
</div>
<jhi-markdown-viewer [exercise]="exercise"></jhi-markdown-viewer>
</div>