<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>