{#if entries.isEmpty()}
<div class="card bg-base-100 shadow-xl p-10 text-center">
  <svg class="w-12 h-12 mx-auto text-base-content/20 mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
    <path d="M9 18V5l12-2v13"/><path d="M9 9l12-2"/>
  </svg>
  <p class="text-lg font-medium text-base-content/60">No releases found</p>
  <p class="text-sm text-base-content/40 mt-1">Add artists to your collection to see their releases here</p>
</div>
{#else}
<div class="overflow-x-auto rounded-box border border-base-300">
  <table class="table table-pin-rows">
    <thead>
      <tr class="bg-base-200/80">
        <th class="w-20">Cover</th>
        <th>Artist</th>
        <th>Release</th>
        <th>Type</th>
        <th class="w-28">Date</th>
      </tr>
    </thead>
    <tbody>
      {#for entry in entries}
      <tr class="hover:bg-base-200/50 transition-colors">
        <td>
          <a href="https://musicbrainz.org/release-group/{entry.mbid}"
             target="_blank" rel="noopener noreferrer">
            <img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
                 alt="Cover"
                 width="64" height="64"
                 style="width:64px;height:64px;object-fit:cover;border-radius:8px"
                 loading="lazy"
                 onerror="this.style.display='none'">
          </a>
        </td>
        <td>
          <span class="font-medium">{entry.artistName}</span>
        </td>
        <td>
          <a href="https://musicbrainz.org/release-group/{entry.mbid}"
             target="_blank" rel="noopener noreferrer"
             class="link link-hover font-medium">
            {entry.title}
          </a>
        </td>
        <td>
          {#if entry.primaryType == 'Album'}
            <span class="badge badge-primary badge-sm">Album</span>
          {#else if entry.primaryType == 'Single'}
            <span class="badge badge-secondary badge-sm">Single</span>
          {#else if entry.primaryType == 'EP'}
            <span class="badge badge-accent badge-sm">EP</span>
          {#else}
            <span class="badge badge-ghost badge-sm">{entry.primaryType}</span>
          {/if}
        </td>
        <td class="text-sm text-base-content/50">{entry.firstReleaseDate}</td>
      </tr>
      {/for}
    </tbody>
  </table>
</div>
{/if}