<div *ngIf="exercise" style="height: 100%;">
    <div class="card">
        <div class="card-body" style="display: flex; flex-direction: column;">
            <img class="card-img-top" src="{{exercise.imageURL}}" (error)="correctImageURL($event)" alt="exercise image"
                 style="width: auto; max-width: 100%; max-height: 70px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 5px; box-shadow: 3px;">
            <h5 class="card-title">{{exercise.title}}</h5>
            <p class="card-text" style="text-align: left;">{{exercise.description}}</p>

            <div style="margin-top: auto; width: 100%; padding-left: 30px; padding-right: 30px;">
                <!-- card rating-->
                <div style="margin-bottom: 20px;">
                    <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> <!-- card rating end-->

                <!-- card bookmark-->
                <div style="float: left; width: 100%;">
                    <div style="float: left;">
                        <p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
                    </div>
                        <ng-template #helpBookmark> {{ 'exercise.comingSoon' | translate}}</ng-template>
                    <div class="form-check" style="float: right; padding-right: 10px;" [ngbTooltip]="helpBookmark">
                        <input class="form-check-input" type="checkbox" value="" id="card-defaultCheck1" disabled>
                        <label class="form-check-label" for="card-defaultCheck1"></label>
                    </div>
                </div> <!-- card bookmark end-->

                <!-- Button to Open the Modal -->
                <button type="button"
                        class="btn btn-outline-secondary"
                        style="margin-top: 20px;"
                        data-toggle="modal"
                        data-target="#myModal"
                        (click)="selectExercise()"
                        jhiTranslate="exercise.more">
                </button>
            </div>
        </div>
    </div>
</div>