<.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_date(@record.release_date)} · {format_label( @record.format )} · {type_label(@record.type)}

<.focus_wrap id={"actions-#{@record.id}"} class={[ "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden" ]} role="menu" aria-orientation="vertical" aria-labelledby="options-menu-0-button" phx-click-away={close_actions_menu(@record.id)} > <.link class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" role="menuitem" tabindex="0" id={"actions-#{@record.id}-edit"} patch={~p"/collection/#{@record}/show/edit"} > <.icon name="hero-pencil-square" class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" aria-hidden="true" data-slot="icon" /> {gettext("Edit")} <.link class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" role="menuitem" tabindex="0" id={"actions-#{@record.id}-refresh-cover"} phx-click={JS.push("refresh_cover", value: %{id: @record.id})} > <.icon name="hero-photo" class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" aria-hidden="true" data-slot="icon" /> {gettext("Refresh cover")} <.link class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" role="menuitem" tabindex="0" id={"actions-#{@record.id}-refresh-mb-data"} phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})} > <.icon name="hero-arrow-path" class="h-4 w-4 mr-1 phx-click-loading:animate-spin" aria-hidden="true" data-slot="icon" /> {gettext("Refresh MB data")} <.link class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" role="menuitem" tabindex="0" id={"actions-#{@record.id}-populate-genres"} phx-click={JS.push("populate_genres", value: %{id: @record.id})} > <.icon name="hero-sparkles" class="h-4 w-4 mr-1 phx-click-loading:animate-shake" aria-hidden="true" data-slot="icon" /> {gettext("Populate genres")} <.link class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600" role="menuitem" tabindex="0" id={"actions-#{@record.id}-delete"} phx-click={JS.push("delete", value: %{id: @record.id})} data-confirm={gettext("Are you sure?")} > <.icon name="hero-trash" class="h-4 w-4 mr-1 phx-click-loading:animate-spin" aria-hidden="true" data-slot="icon" /> {gettext("Delete")}

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

{gettext("ID")}: {@record.id}
{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")}: {Records.Record.format_as_date(@record.purchased_at)}
{gettext("Published releases")}: {Records.Record.release_count(@record)}
{gettext("Collected release")}: {gettext("No release selected")} <.release_summary :if={@record.selected_release_id} release={Records.Record.selected_release(@record)} />
{gettext("Includes")}: {included_release_group.artists} - {included_release_group.title}
{gettext("Inserted at")}: {Records.Record.format_as_date(@record.inserted_at)}
{gettext("Updated at")}: {Records.Record.format_as_date(@record.updated_at)}