{gettext("Records")}

<%!-- TODO: replace with OSS version --%>
<.album_preview record={@latest_record} title={gettext("Latest purchase")} class="col-span-2 sm:col-span-3" /> <.counter title={gettext("Total collection")} count={@collection_count} path={~p"/collection"} /> <.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />

{gettext("Formats")}

<%!-- TODO: replace with OSS version --%>
{format_label(format)}
<.link class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200" navigate={~p"/collection?query=format:#{format}"} > {count}

{gettext("Types")}

<%!-- TODO: replace with OSS version --%>
{type_label(type)}
<.link class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200" navigate={~p"/collection?query=type:#{type}"} > {count}

{gettext("Top Artists")}

<.tabs class="mt-4"> <.tabs_list active_tab="top_artists_last_30_days" variant="segmented"> <:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")} <:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")} <:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")} <:tab class="flex-1" name="top_artists_all_time">{gettext("All time")} <.tabs_panel active name="top_artists_last_30_days"> <.top_artists_by_period artists={@top_artists.last_30_days} /> <.tabs_panel name="top_artists_last_90_days"> <.top_artists_by_period artists={@top_artists.last_90_days} /> <.tabs_panel name="top_artists_last_365_days"> <.top_artists_by_period artists={@top_artists.last_365_days} /> <.tabs_panel name="top_artists_all_time"> <.top_artists_by_period artists={@top_artists.all_time} />

{gettext("Top Albums")}

<.tabs class="mt-4"> <.tabs_list active_tab="top_albums_last_30_days" variant="segmented"> <:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")} <:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")} <:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")} <:tab class="flex-1" name="top_albums_all_time">{gettext("All time")} <.tabs_panel active name="top_albums_last_30_days"> <.top_albums_by_period albums={@top_albums.last_30_days} collected_releases={@top_albums.collected_releases} wishlisted_releases={@top_albums.wishlisted_releases} /> <.tabs_panel name="top_albums_last_90_days"> <.top_albums_by_period albums={@top_albums.last_90_days} collected_releases={@top_albums.collected_releases} wishlisted_releases={@top_albums.wishlisted_releases} /> <.tabs_panel name="top_albums_last_365_days"> <.top_albums_by_period albums={@top_albums.last_365_days} collected_releases={@top_albums.collected_releases} wishlisted_releases={@top_albums.wishlisted_releases} /> <.tabs_panel name="top_albums_all_time"> <.top_albums_by_period albums={@top_albums.all_time} collected_releases={@top_albums.collected_releases} wishlisted_releases={@top_albums.wishlisted_releases} />

{gettext("Scrobble activity")}

<.refresh_lastfm_feed_button />
<.tabs id="scrobble-activity" class="mt-4"> <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48"> <:tab name="albums" phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})} > {gettext("Albums")} <:tab name="tracks" phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})} > {gettext("Tracks")} <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}> <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>

{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" />