<div>
  <header class="gap-6 mb-2">
    <div class="flex items-center justify-between gap-6 mb-2 mt-2">
      <.search_form query={@record_list_params.query} />
      <.link
        class={[
          "relative inline-flex items-center rounded-md",
          "px-3 py-2 text-xs sm:text-sm font-semibold",
          "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
          "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
          "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
          "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
        ]}
        patch={~p"/wishlist/import"}
      >
        <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
        {gettext("Add")}
      </.link>
    </div>
  </header>

  <p class="text-right text-sm max-sm:text-xs mt-12 text-zinc-900 dark:text-zinc-400">
    {gettext(
      "Showing <b>%{visible}</b> of <b>%{total}</b> records",
      %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
    )
    |> raw()}
  </p>
</div>

<.record_list
  current_date={@current_date}
  records={@streams.records}
  record_show_path={fn record -> ~p"/wishlist/#{record}" end}
  record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
/>

<.modal
  :if={@live_action == :edit}
  id="record-modal"
  show
  on_cancel={JS.patch(back_path(@record_list_params))}
>
  <.live_component
    module={MusicLibraryWeb.FormComponent}
    id={@record.id}
    action={@live_action}
    show_purchased_at={false}
    record={@record}
    patch={back_path(@record_list_params)}
  />
</.modal>

<.modal
  :if={@live_action == :import}
  id="record-modal"
  show
  on_cancel={JS.patch(back_path(@record_list_params))}
>
  <.live_component
    module={MusicLibraryWeb.AddRecordComponent}
    id={:search}
    title={@page_title}
    action={@live_action}
    record={@record}
    patch={back_path(@record_list_params)}
    initial_query=""
    icon_name="hero-plus"
  />
</.modal>

<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
