<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">&times;</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.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-->


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

                                <!-- <button type="button" class="btn btn-outline-secondary"
                                    style="display: block; margin-bottom: 5px;"
                                    jhiTranslate="exercise.details.hitDetails">
                                </button> -->
                                <div [ngbTooltip]="helpComingSoon" placement="bottom">
                                <button *ngIf="exercise.type == exerciseType.COLLECTION" type="button" class="btn btn-outline-secondary"
                                    style="display: block; margin-bottom: 5px;"
                                    jhiTranslate="exercise.details.allExercises"
                                    disabled>
                                    >
                                </button></div>

                                <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="exercise.type == exerciseType.COLLECTION" 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>