<.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")}
- {selected_release_label(@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)}
0}
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
>