54 lines
2.5 KiB
HTML
54 lines
2.5 KiB
HTML
{#if entries.isEmpty()}
|
|
<div class="bg-base-100 shadow-xl rounded-box p-10 text-center border border-base-300">
|
|
<svg class="icon-lg" style="margin:0 auto 0.75rem;color:var(--bc);opacity:0.15" 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 style="font-size:1.125rem;font-weight:500;color:var(--bc);opacity:0.6">No releases found</p>
|
|
<p style="font-size:0.875rem;color:var(--bc);opacity:0.4;margin-top:0.25rem">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 style="background:color-mix(in srgb, var(--b2) 80%, transparent)">
|
|
<th style="width:5rem">Cover</th>
|
|
<th>Artist</th>
|
|
<th>Release</th>
|
|
<th>Type</th>
|
|
<th style="width:7rem">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#for entry in entries}
|
|
<tr style="transition:background 0.15s" onmouseover="this.style.background='color-mix(in srgb, var(--b2) 50%, transparent)'" onmouseout="this.style.background=''">
|
|
<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" class="cover-img" loading="lazy" onerror="this.style.display='none'">
|
|
</a>
|
|
</td>
|
|
<td><span style="font-weight:500">{entry.artistName}</span></td>
|
|
<td>
|
|
<a href="https://musicbrainz.org/release-group/{entry.mbid}" target="_blank" rel="noopener noreferrer" class="link link-hover" style="font-weight:500">
|
|
{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 style="font-size:0.875rem;color:var(--bc);opacity:0.5">{entry.firstReleaseDate}</td>
|
|
</tr>
|
|
{/for}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|