{#if artists.isEmpty()}
<div class="card bg-base-100 shadow-xl p-8 text-center">
  <p class="text-lg text-base-content/60">No artists tracked yet</p>
  <p class="text-sm text-base-content/40 mt-2">Search for artists using the search bar above and click "+ Add"</p>
</div>
{#else}
<div class="overflow-x-auto">
  <table class="table table-zebra">
    <thead>
      <tr>
        <th>Artist</th>
        <th>Since</th>
        <th>Release Types</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {#for artist in artists}
      <tr>
        <td>
          <div class="font-medium">{artist.name}</div>
          {#if artist.disambiguation}
            <div class="text-xs text-base-content/60">{artist.disambiguation}</div>
          {/if}
        </td>
        <td class="text-sm text-base-content/60">{artist.createdAt}</td>
        <td>
          <div class="flex flex-wrap gap-1">
            <label class="label cursor-pointer gap-1">
              <input type="checkbox" class="checkbox checkbox-xs checkbox-primary"
                     {#if artist.albumMonitored}checked{/if}
                     hx-patch="/api/artists/{artist.mbid}/monitor?type=album"
                     hx-target="#artist-list" hx-swap="innerHTML">
              <span class="label-text text-xs">Album</span>
            </label>
            <label class="label cursor-pointer gap-1">
              <input type="checkbox" class="checkbox checkbox-xs"
                     {#if artist.singleMonitored}checked{/if}
                     hx-patch="/api/artists/{artist.mbid}/monitor?type=single"
                     hx-target="#artist-list" hx-swap="innerHTML">
              <span class="label-text text-xs">Single</span>
            </label>
            <label class="label cursor-pointer gap-1">
              <input type="checkbox" class="checkbox checkbox-xs"
                     {#if artist.epMonitored}checked{/if}
                     hx-patch="/api/artists/{artist.mbid}/monitor?type=ep"
                     hx-target="#artist-list" hx-swap="innerHTML">
              <span class="label-text text-xs">EP</span>
            </label>
            <label class="label cursor-pointer gap-1">
              <input type="checkbox" class="checkbox checkbox-xs"
                     {#if artist.broadcastMonitored}checked{/if}
                     hx-patch="/api/artists/{artist.mbid}/monitor?type=broadcast"
                     hx-target="#artist-list" hx-swap="innerHTML">
              <span class="label-text text-xs">Broadcast</span>
            </label>
            <label class="label cursor-pointer gap-1">
              <input type="checkbox" class="checkbox checkbox-xs"
                     {#if artist.otherMonitored}checked{/if}
                     hx-patch="/api/artists/{artist.mbid}/monitor?type=other"
                     hx-target="#artist-list" hx-swap="innerHTML">
              <span class="label-text text-xs">Other</span>
            </label>
          </div>
        </td>
        <td>
          <button class="btn btn-error btn-xs"
                  hx-delete="/api/artists/{artist.mbid}"
                  hx-target="#artist-list"
                  hx-swap="innerHTML"
                  onclick="return confirm('Remove {artist.name}?')">
            Remove
          </button>
        </td>
      </tr>
      {/for}
    </tbody>
  </table>
</div>
{/if}