{#if entries.isEmpty()}
<div class="card bg-base-200 shadow-xl text-center" style="padding:3rem">
  <p class="text-lg text-base-content/60">No releases found</p>
  <p class="text-sm text-base-content/40 mt-2">Add artists to your collection to see their releases here</p>
</div>
{#else}
{#for entry in entries}
<a href="https://musicbrainz.org/release-group/{entry.mbid}" target="_blank" rel="noopener noreferrer"
   class="card card-side bg-base-200 border border-base-300 hover:bg-base-300 card-shadow overflow-hidden">
  <figure class="w-64">
    <img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
         alt="{entry.title}" class="object-cover w-full h-full"
         loading="lazy"
         onerror="this.parentElement.innerHTML='<div class=\'flex items-center justify-center h-full text-base-content/20\'>No Cover</div>'">
  </figure>
  <div class="card-body">
    <h3 style="font-size:1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--fallback-bc,oklch(var(--bc)/0.6))">{entry.artistName}</h3>
    <h2 style="font-size:2rem;font-weight:700">{entry.title}</h2>
    <div style="margin-top:0.75rem">
      {#if entry.firstReleaseDate}
        <div style="font-size:1.5rem;color:var(--fallback-bc,oklch(var(--bc)/0.4))">{entry.firstReleaseDate}</div>
      {/if}
      <div style="margin-top:0.4rem">
        {#if entry.primaryType == 'Album'}
          <span class="badge badge-primary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Album</span>
        {#else if entry.primaryType == 'Single'}
          <span class="badge badge-secondary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Single</span>
        {#else if entry.primaryType == 'EP'}
          <span class="badge badge-accent" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">EP</span>
        {#else}
          <span class="badge badge-ghost" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">{entry.primaryType}</span>
        {/if}
      </div>
    </div>
  </div>
</a>
{/for}
{#if hasMore}
<div style="display:flex;justify-content:center;padding:1rem 0">
  <button class="btn btn-primary btn-sm"
          hx-get="/api/artists/feed-table?page={nextPage}"
          hx-target="closest div"
          hx-swap="outerHTML">Load more</button>
</div>
{/if}
{/if}