@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>
  }