Nasa_video_search_engine/src/app/pages/search/searchresults/searchresults.html

32 lines
1.5 KiB
HTML

@if(searchResults()!==null && searchResults()!.collection.items.length==0){
<div class="resultsContainer">
<p>No results for this search</p>
</div>
}
@if(searchResults()!==null && searchResults()!.collection.items.length!==0){
<div class="resultsContainer">
<ul class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>
@for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
<li class="list-row">
<!-- 2 for small image -->
<div><a><img class="size-25 rounded-box" src="{{el.links[1].href}}"/></a></div>
<div>
<div>{{el.data[0].title}}</div>
<div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
<p class="list-col-wrap text-xs">
{{el.data[0].description}}
</p>
</div>
<button class="btn btn-square btn-ghost" (click)="onClick(el.data[0].nasa_id)">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
}
</ul>
</div>
}
</div>