{gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}

<.vertical_bar_chart data={@records_by_artist} width={600} height={35 * length(@records_by_artist)} color_class="fill-red-500" label_fn={fn datum -> datum.name end} value_fn={fn datum -> datum.count end} label_click={ fn datum -> JS.navigate(~p"/artists/#{datum.id}") end } class="w-full" />

{gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}

<.vertical_bar_chart data={@records_by_genre} width={600} height={35 * length(@records_by_genre)} color_class="fill-zinc-500" label_fn={fn {genre, _count} -> genre end} value_fn={fn {_genre, count} -> count end} label_click={ fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end } class="w-full" />

{gettext("Scrobble activity")}

<%!-- TODO: replace with OSS version --%> <.button phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :albums})} class={[ "rounded-l-md rounded-r-none", @scrobble_activity_mode == :albums && "!bg-zinc-100 dark:!bg-zinc-700" ]} > {gettext("Albums")} <.button phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :tracks})} class={[ "-ml-px rounded-r-md rounded-l-none", @scrobble_activity_mode == :tracks && "!bg-zinc-100 dark:!bg-zinc-700" ]} > {gettext("Tracks")}

{album.artist.name}
<.link :if={album.artist.musicbrainz_id in @artist_ids} class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" navigate={~p"/artists/#{album.artist.musicbrainz_id}"} > {album.artist.name}
{album.metadata.title}
{album.scrobbled_at_label}

<.badge :if={album.metadata.musicbrainz_id == ""}> {gettext("No MB ID")} <.link :if={ record_id = tracked_record?(@collected_releases, album.metadata.musicbrainz_id) } navigate={~p"/collection/#{record_id}"} > <.badge color="green"> {gettext("Collected")} <.link :if={ record_id = tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id) } navigate={~p"/wishlist/#{record_id}"} > <.badge color="yellow"> {gettext("Wishlisted")}

<.focus_wrap id={"actions-#{album.scrobbled_at_uts}"} 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" > <.link :for={format <- Records.Record.formats()} 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-#{album.scrobbled_at_uts}-#{format}-import"} phx-click={ JS.push("import", value: %{id: album.metadata.musicbrainz_id, format: format}, page_loading: true ) } > {format_label(format)}

{track.artist.name}
<.link :if={track.artist.musicbrainz_id in @artist_ids} class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" navigate={~p"/artists/#{track.artist.musicbrainz_id}"} > {track.artist.name}
{track.title}

{track.album.title}
{track.scrobbled_at_label}

<.badge :if={track.album.musicbrainz_id == ""}> {gettext("No MB ID")} <.link :if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)} navigate={~p"/collection/#{record_id}"} > <.badge color="green">{gettext("Collected")} <.link :if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)} navigate={~p"/wishlist/#{record_id}"} > <.badge color="yellow">{gettext("Wishlisted")}

<.focus_wrap id={"actions-#{track.scrobbled_at_uts}"} 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" > <.link :for={format <- Records.Record.formats()} 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-#{track.scrobbled_at_uts}-#{format}-import"} phx-click={ JS.push("import", value: %{id: track.album.musicbrainz_id, format: format}, page_loading: true ) } > {format_label(format)}

{gettext("Records")}

{gettext("Formats")}

{gettext("Types")}

{gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}

{gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}

{gettext("Scrobble activity")}