<div class="row">
    <jhi-search></jhi-search>
    <div class="card-container col-md-6 col-lg-4 col-xl-3" *ngFor="let result of mockResults">
        <!-- cards -->
        <div class="card">
            <div class="card-body" style="display: flex; flex-direction: column;">
                <img class="card-img-top" src="{{result.imageURL}}" alt="result image"
                     style="width: auto; max-height: 70px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 5px; box-shadow: 3px;">
                <h5 class="card-title">{{result.title}}</h5>
                <p class="card-text" style="text-align: left;">{{result.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="searchResult.details.rating"></p>
                        </div>
                        <div class="star-container">
                            <span class="star"
                                  *ngFor="let starNumber of [1,2,3,4,5]"
                                  [ngClass]="{'star-marked': result.rating >= starNumber,
                                              'star-unmarked': result.rating < starNumber}">
                            </span>
                        </div>
                        <!--<div class="rate">
                            <input type="radio" id="card-star5" name="rate" value="5" />
                            <label for="card-star5" title="text">5 stars</label>
                            <input type="radio" id="card-star4" name="rate" value="4" />
                            <label for="card-star4" title="text">4 stars</label>
                            <input type="radio" id="card-star3" name="rate" value="3" />
                            <label for="card-star3" title="text">3 stars</label>
                            <input type="radio" id="card-star2" name="rate" value="2" />
                            <label for="card-star2" title="text">2 stars</label>
                            <input type="radio" id="card-star1" name="rate" value="1" />
                            <label for="card-star1" title="text">1 star</label>
                        </div>-->
                    </div> <!-- card rating end-->

                    <!-- card bookmark-->
                    <div style="float: left; width: 100%;">
                        <div style="float: left;">
                            <p class="card-text" jhiTranslate="searchResult.details.bookmark"></p>
                        </div>
                        <div class="form-check" style="float: right; padding-right: 10px;">
                            <input class="form-check-input" type="checkbox" value="" id="card-defaultCheck1">
                            <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)="selectedResult = result"
                            jhiTranslate="searchResult.open">
                    </button>
                </div>
            </div>
        </div>
    </div> <!-- card end--> <!-- col-sm-3 end -->
</div>

<jhi-exercise-details [selectedResult]="selectedResult"></jhi-exercise-details>