<div class="mt-4 px-4 sm:px-6 lg:px-8">
  <header class="mt-1 gap-1">
    <div class="flex items-center justify-between">
      <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
        {@artist.name}
        <.country_flag country={@country} />
      </h1>

      <div class="flex items-center">
        <button
          class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
          phx-click={MusicLibraryWeb.NotesComponent.open("artist-notes-sheet")}
        >
          <span class="sr-only">{gettext("Open Notes")}</span>
          <.icon
            name="hero-pencil-square"
            class="-mt-1 h-5 w-5"
            aria-hidden="true"
            data-slot="icon"
          />
        </button>
        <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
          <:toggle>
            <span class="sr-only">{gettext("Actions")}</span>
            <.icon
              name="hero-ellipsis-vertical"
              class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
              aria-hidden="true"
              data-slot="icon"
            />
          </:toggle>
          <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
            <.dropdown_link
              id={"actions-#{@artist.musicbrainz_id}-edit"}
              patch={~p"/artists/#{@artist.musicbrainz_id}/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")}
            </.dropdown_link>
            <.dropdown_link
              id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
              phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_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 image")}
            </.dropdown_link>

            <.dropdown_link
              id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
              phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_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 info")}
            </.dropdown_link>
          </.focus_wrap>
        </.dropdown>
      </div>
    </div>

    <div class="mt-4 flex items-center justify-between">
      <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
        <:loading>
          <span class="sr-only">{gettext("Loading play count")}</span>
          <.loading />
        </:loading>
        <:failed :let={_failure}>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            <.icon
              name="hero-exclamation-triangle"
              class="-mt-1 mr-1 ml-2 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Error loading play count")}
          </div>
        </:failed>
        <.on_tour_link lastfm_artist_info={lastfm_artist_info} />
        <.play_count play_count={lastfm_artist_info.play_count} />
      </.async_result>
      <.button variant="solid" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
        <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
        {gettext("Add more")}
      </.button>
    </div>
  </header>

  <div class="mt-4 grid md:grid-cols-10 md:gap-4">
    <div class="md:col-span-3 mt-4 order-2 md:order-1">
      <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
        {gettext("Meta")}
      </h2>
      <.artist_image
        class="w-full rounded-md shadow-sm mt-4"
        artist={@artist}
        image_hash={@artist_info.image_data_hash}
      />
      <dl>
        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
          {gettext("MusicBrainz ID")}
        </dt>
        <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
          <a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
            <code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
              {@artist.musicbrainz_id}
            </code>
          </a>
          <button phx-click={
            JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
            |> JS.transition("animate-shake")
          }>
            <span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
            <.icon
              name="hero-clipboard-document"
              class="-mt-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
          </button>
        </dd>
      </dl>
      <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
        <:loading>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            {gettext("Loading biography")}
          </div>
        </:loading>
        <:failed :let={_failure}>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            <.icon
              name="hero-exclamation-triangle"
              class="-mt-1 mr-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Error loading biography")}
          </div>
        </:failed>
        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
          {gettext("Biography")}
        </dt>
        <dd class="text-zinc-700 dark:text-zinc-300">
          {remove_read_more_link(lastfm_artist_info.summary)}
          <.link
            class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
            phx-click={Fluxon.open_dialog("bio")}
          >
            <.icon
              name="hero-arrow-right-end-on-rectangle"
              class="-mt-1 mr-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Read more")}
          </.link>
        </dd>
        <.sheet id="bio" class="max-w-2xl text-zinc-700 dark:text-zinc-300" placement="left">
          {render_bio(lastfm_artist_info.bio)}
        </.sheet>
      </.async_result>
    </div>
    <div class="md:col-span-7 md:order-1">
      <.record_grid
        :if={@collection_records_count > 0}
        title={gettext("Collection")}
        id="collection"
        records={@streams.collection_records}
        records_count={@collection_records_count}
        record_show_path={fn record -> ~p"/collection/#{record}" end}
        record_edit_path={fn record -> ~p"/collection/#{record}/show/edit" end}
      />
      <.separator :if={@wishlist_records_count > 0} class="mt-8 mb-8" />
      <.record_grid
        :if={@wishlist_records_count > 0}
        title={gettext("Wishlist")}
        id="wishlist"
        records={@streams.wishlist_records}
        records_count={@wishlist_records_count}
        record_show_path={fn record -> ~p"/wishlist/#{record}" end}
        record_edit_path={fn record -> ~p"/wishlist/#{record}/show/edit" end}
      />

      <.async_result :let={similar_artists} assign={@similar_artists}>
        <:loading>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            {gettext("Loading similar artists")}
          </div>
        </:loading>
        <:failed :let={_failure}>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            <.icon
              name="hero-exclamation-triangle"
              class="-mt-1 mr-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Error loading similar artists")}
          </div>
        </:failed>
        <.separator class="mt-8 mb-8" />
        <.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
      </.async_result>
    </div>
  </div>

  <.json_viewer
    :if={@artist_info.musicbrainz_data}
    title={gettext("MusicBrainz data")}
    data={@artist_info.musicbrainz_data}
  />

  <.json_viewer
    :if={@artist_info.discogs_data}
    title={gettext("Discogs data")}
    data={@artist_info.discogs_data}
  />
</div>

<.structured_modal
  :if={@live_action == :import}
  id="record-modal"
  on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
>
  <.live_component
    module={MusicLibraryWeb.AddRecordComponent}
    id={:search}
    title={@page_title}
    action={@live_action}
    patch={~p"/artists/#{@artist.musicbrainz_id}"}
    initial_query={"arid:#{@artist.musicbrainz_id}"}
    icon_name="hero-plus"
  />
</.structured_modal>

<.live_component
  id="artist-notes"
  sheet_id="artist-notes-sheet"
  module={MusicLibraryWeb.NotesComponent}
  entity={:artist}
  musicbrainz_id={@artist.musicbrainz_id}
/>

<.structured_modal
  :if={@live_action == :edit}
  id="artist-info-modal"
  on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
>
  <.live_component
    module={MusicLibraryWeb.ArtistLive.FormComponent}
    id={@artist_info.id}
    action={@live_action}
    artist_info={@artist_info}
    artist={@artist}
    patch={~p"/artists/#{@artist.musicbrainz_id}"}
  />
</.structured_modal>
