music_library/lib/music_library_web/live/scrobble_live/show.html.heex

<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
  <div>
    <div class="space-y-6">
      <div class="flex items-center gap-4">
        <div class="min-w-0 flex-1"></div>
      </div>

      <div
        :if={not @can_scrobble}
        class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4"
      >
        <div class="flex">
          <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
          <div class="ml-3">
            <p class="text-sm text-yellow-800 dark:text-yellow-200">
              {gettext(
                "You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
              )}
            </p>
          </div>
        </div>
      </div>

      <div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
        <div class="p-6">
          <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
            {@release.title}
          </h1>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            <span :if={@release.artists != []}>
              by {@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
            </span>
            <span :if={@release.date}>
              {@release.date}
            </span>
          </p>
          <div class="flex gap-6 mt-4">
            <div class="flex-shrink-0">
              <img
                src={MusicBrainz.Release.thumb_url(@release)}
                alt={"Cover art for #{@release.title}"}
                class="w-32 h-32 object-cover rounded-lg shadow-sm"
                loading="lazy"
              />
            </div>
            <div class="flex-1">
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                <div :if={@release.date}>
                  <span class="font-medium text-gray-600 dark:text-gray-400">
                    {gettext("Release Date:")}
                  </span>
                  <br />{@release.date}
                </div>
                <div :if={@release.country}>
                  <span class="font-medium text-gray-600 dark:text-gray-400">
                    {gettext("Country:")}
                  </span>
                  <br />{@release.country}
                </div>
                <div :if={@release.barcode}>
                  <span class="font-medium text-gray-600 dark:text-gray-400">
                    {gettext("Barcode:")}
                  </span>
                  <br />{@release.barcode}
                </div>
                <div :if={@release.catalog_number}>
                  <span class="font-medium text-gray-600 dark:text-gray-400">
                    {gettext("Catalog Number:")}
                  </span>
                  <br />{@release.catalog_number}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div :if={@release.media != []} class="bg-white dark:bg-zinc-800 shadow rounded-lg mt-6">
        <div class="p-6">
          <div class="flex justify-between items-center">
            <h3 class="text-lg font-semibold mb-4">{gettext("Tracks")}</h3>

            <.button
              :if={@can_scrobble}
              phx-click="scrobble_release"
              size="sm"
            >
              {gettext("Scrobble release")}
            </.button>
          </div>

          <div class="space-y-6">
            <div :for={medium <- @release.media} class="space-y-3">
              <div class="flex justify-between items-center">
                <h4 :if={length(@release.media) > 1} class="font-medium">
                  Medium {medium.number}
                  <span :if={medium.title}>
                    - {medium.title}
                  </span>
                  <span :if={medium.format}>
                    ({medium.format})
                  </span>
                </h4>
                <h4 :if={length(@release.media) == 1} class="font-medium">
                  {gettext("Tracks")}
                  <span :if={medium.format}>
                    ({medium.format})
                  </span>
                </h4>
                <.button
                  :if={@can_scrobble}
                  size="sm"
                  variant="outline"
                  phx-click="scrobble_medium"
                  phx-value-medium_number={medium.number}
                >
                  {gettext("Scrobble disc")}
                </.button>
              </div>

              <div class="space-y-1">
                <div
                  :for={track <- medium.tracks}
                  class="flex justify-between items-center py-2 px-3 bg-gray-50 dark:bg-gray-800 rounded"
                >
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-gray-500 dark:text-gray-400 w-6 text-right">
                      {track.position}
                    </span>
                    <div class="min-w-0 flex-1">
                      <p class="font-medium text-sm text-gray-900 dark:text-gray-100 truncate">
                        {track.title}
                      </p>
                      <p
                        :if={track.artists != [] and track.artists != @release.artists}
                        class="text-xs text-gray-600 dark:text-gray-400 truncate"
                      >
                        {track.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
                      </p>
                    </div>
                  </div>
                  <span
                    :if={track.length}
                    class="text-xs text-gray-500 dark:text-gray-400 font-mono"
                  >
                    {Duration.format_duration(track.length)}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</Layouts.app>