{#each books as book (book.id)} {@const selected = selectionState.isSelected(book.id)} {@const state = readState(book)}
handleCardClick(event, book)} class="group flex gap-3.5 rounded-lg border bg-card p-3 transition-colors {selected ? 'border-primary bg-accent' : 'border-border/60 hover:border-border'} {selectionState.selectionModeActive ? 'cursor-pointer' : ''}" >
{book.title}
{authors(book)}
selectionState.toggleSelection(book)} class="grid size-4 shrink-0 place-items-center rounded-sm border transition-opacity {selected ? 'border-primary bg-primary text-primary-foreground opacity-100' : 'border-muted-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100'}" > {#if selected}
{/if}
{#if year(book)}
{year(book)}
{/if} {#if book.files.length > 0}
{formats(book)}
{/if} {#each book.tags.slice(0, TAG_LIMIT) as tag (tag.id)}
{tag.name}
{/each} {#if book.tags.length > TAG_LIMIT}
+{book.tags.length - TAG_LIMIT}
{/if}
{#if book.files.length > 0}
openInReader(book, book.files[0])} >
Read
bookOps.downloadBookFile(book.id, book.files[0].id, book.files[0].filename)} >
Download
{/if}
{#if state.text}
{state.text}
{/if}
{/each}