<div *ngIf="exercise" style="height: 100%">
  <div class="card {{ hasChildren() ? 'cardForCollection' : '' }}">
    <jhi-review-badge *ngIf="exercise.searchStatistics?.badgeRewarded"></jhi-review-badge>
    <div class="card-body" style="display: flex; flex-direction: column">
      <img
        class="card-img-top"
        src="{{ exercise.metadata.image }}"
        (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.metadata.title }}</h5>
      <p class="card-text">{{ exercise.metadata.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 *ngIf="hasChildren()" class="collection-info" jhiTranslate="exercise.collection">Collection</div>
          <div class="star-container">
            <span
              class="star"
              *ngFor="let starNumber of [1, 2, 3, 4, 5]"
              [ngClass]="{ 'star-marked': exercise.ranking5 >= starNumber, 'star-unmarked': exercise.ranking5 < starNumber }"
            >
            </span>
          </div>
        </div>
        <!-- card rating end-->

        <!-- card bookmark-->
        <jhi-bookmark-toggle [exercise]="exercise"></jhi-bookmark-toggle>
        <!-- card bookmark end-->

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