<div class="row">
<div class="card-container col-md-6 col-lg-4 col-xl-3" *ngFor="let result of mockResults">
<!-- cards -->
<div class="card">
<img class="card-img-top" src="{{result.imageURL}}" alt="result image"
style="width: 100px; height: auto; margin-left: auto; margin-right: auto; padding-top: 15px; box-shadow: 3px;">
<div class="card-body">
<h5 class="card-title">{{result.title}}</h5>
<p class="card-text" style="text-align: left;">{{result.description}}</p>
</div>
<div class="card-body" style="display: flex;">
<div style="margin-top: auto; width: 100%;">
<!-- card rating-->
<div style="width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<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"
data-toggle="modal"
data-target="#myModal"
(click)="selectedResult = result"
jhiTranslate="searchResult.open">
</button>
</div>
</div>
</div>
</div> <!-- card end--> <!-- col-sm-3 end -->
</div>
<!-- The Modal -->
<div *ngIf="selectedResult">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<img class="card-img-top col-md-3" src="{{selectedResult.imageURL}}" alt="result image"
style="height: auto; float: left;">
<h4 class="modal-title">{{selectedResult.title}}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<p style="padding-bottom: 15px; text-align: justify;">{{selectedResult.description}}</p>
</div>
<div class="row">
<div class="col-6 col-md-4" style="margin-bottom: 15px;">
<p style="text-align: left;"><strong
jhiTranslate="searchResult.details.details"></strong></p>
<hr>
<!-- modal rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<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': selectedResult.rating >= starNumber,
'star-unmarked': selectedResult.rating < starNumber}">
</span>
</div>
<!--<div class="rate">
<input type="radio" id="modal-star5" name="rate" value="5" />
<label for="modal-star5" title="text">5 stars</label>
<input type="radio" id="modal-star4" name="rate" value="4" />
<label for="modal-star4" title="text">4 stars</label>
<input type="radio" id="modal-star3" name="rate" value="3" />
<label for="modal-star3" title="text">3 stars</label>
<input type="radio" id="modal-star2" name="rate" value="2" />
<label for="modal-star2" title="text">2 stars</label>
<input type="radio" id="modal-star1" name="rate" value="1" />
<label for="modal-star1" title="text">1 star</label>
</div>-->
</div> <!-- modal rating end-->
<!-- modal bookmark-->
<div style="float: left; width: 100%; margin-bottom: 25px;">
<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="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="searchResult.details.hitDetails">
</button>
<button type="button" class="btn btn-outline-secondary"
style="display: block; margin-bottom: 5px;"
jhiTranslate="searchResult.details.allExercises">
</button>
<button type="button" class="btn btn-outline-secondary"
style="display: block;">
Git
</button>
</div>
<div class="col-12 col-md-8">
<p style="text-align: left;">
<strong jhiTranslate="searchResult.metadata.metadata"></strong></p>
<hr>
<table class="metadata-table">
<tr *ngIf="selectedResult.programmingLanguages.length > 0">
<td *ngIf="selectedResult.programmingLanguages.length === 1"
jhiTranslate="searchResult.metadata.programmingLanguageSingular"
class="metadata-table-description">
</td>
<td *ngIf="selectedResult.programmingLanguages.length > 1"
jhiTranslate="searchResult.metadata.programmingLanguagesPlural"
class="metadata-table-description">
</td>
<td class="metadata-table-value"
[innerHTML]="arrayToString(selectedResult.programmingLanguages)">
</td>
</tr>
<tr *ngIf="selectedResult.creators.length > 0">
<td *ngIf="selectedResult.creators.length === 1"
jhiTranslate="searchResult.metadata.creatorSingular"
class="metadata-table-description">
</td>
<td *ngIf="selectedResult.creators.length > 1"
jhiTranslate="searchResult.metadata.creatorsPlural"
class="metadata-table-description">
</td>
<td class="metadata-table-value"
[innerHTML]="arrayToString(selectedResult.creators.map(getPersonName))">
</td>
</tr>
<tr *ngIf="selectedResult.lastUpdate.length > 0">
<td jhiTranslate="searchResult.metadata.lastUpdate"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{selectedResult.lastUpdate}}
</td>
</tr>
<tr *ngIf="selectedResult.license.length > 0">
<td jhiTranslate="searchResult.metadata.license"
class="metadata-table-description">
</td>
<td class="metadata-table-value">
{{selectedResult.license}}
</td>
</tr>
</table>
</div>
<div class="col-6 col-md-4"></div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong jhiTranslate="searchResult.export.export"></strong>
</p>
<hr>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true"
style="float: left; margin-right: 5px; margin-top: 5px;"
jhiTranslate="searchResult.export.artemis"></a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true"
style="float: left; margin-right: 5px; margin-top: 5px;"
jhiTranslate="searchResult.export.latex"></a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true"
style="float: left; margin-right: 5px; margin-top: 5px;"
jhiTranslate="searchResult.export.download"></a>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
jhiTranslate="searchResult.close"></button>
</div>
</div>
</div>
</div> <!-- Modal end-->
</div>