<.link :for={artist <- @record.artists} class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" navigate={~p"/artists/#{artist.musicbrainz_id}"} > {artist.name}

{@record.title}

{Records.Record.format_release(@record.release)} · {Records.Record.format_long_label( @record.format )} · {Records.Record.type_long_label(@record.type)}

<.link patch={~p"/collection/#{@record}/show/edit"} phx-click={JS.push_focus()}> <.button type="button" class="relative inline-flex items-center rounded-r-none"> {gettext("Edit")} <.link phx-click={JS.push("refresh_cover", value: %{id: @record.id})}> <.button type="button" class="relative -ml-px inline-flex items-center rounded-none"> <.icon name="hero-arrow-path" class="h-4 w-4 mr-1 phx-click-loading:animate-spin" aria-hidden="true" data-slot="icon" /> {gettext("Cover")} <.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}> <.button type="button" class="relative -ml-px inline-flex items-center rounded-none"> <.icon name="hero-arrow-path" class="h-4 w-4 mr-1 phx-click-loading:animate-spin" aria-hidden="true" data-slot="icon" /> {gettext("MB Data")} <.link phx-click={JS.push("delete", value: %{id: @record.id})} data-confirm={gettext("Are you sure?")} > <.button type="button" class="relative -ml-px inline-flex items-center rounded-l-none !text-red-600 hover:!text-red-500 dark:!text-red-700 hover:dark:!text-red-500" > {gettext("Delete")}

<%!-- TODO: replace with OSS version --%>

{gettext("Genres")}: <.link :for={genre <- @record.genres} class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"} > {genre}
{gettext("MusicBrainz ID")}: {@record.musicbrainz_id}
{gettext("Purchased on")}: {human_datetime(@record.purchased_at)}
{gettext("Includes")}: {child_release_group.artists} - {child_release_group.title}
{gettext("Inserted at")}: {human_datetime(@record.inserted_at)}
{gettext("Updated at")}: {human_datetime(@record.updated_at)}