<header class="mb-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
        {gettext("Scrobble Rules")}
      </h1>
    </div>
    <div>
      <.button_group>
        <.button
          variant="solid"
          size="sm"
          patch={~p"/scrobble-rules/new"}
        >
          <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
          {gettext("New Rule")}
        </.button>
        <.button
          variant="solid"
          size="sm"
          phx-click="apply_all_rules"
        >
          <.icon name="hero-play" class="icon" />
          {gettext("Apply All")}
        </.button>
      </.button_group>
    </div>
  </div>
</header>

<div class="mt-6 space-y-4">
  <ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
    <li
      :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
      id={dom_id}
      class="flex justify-between"
    >
      <div class="flex items-center">
        <.type_badge type={scrobble_rule.type} />
      </div>
      <div class="grow p-2">
        <p class="text-sm text-zinc-900 dark:text-zinc-100">
          {scrobble_rule.match_value}
        </p>
        <p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
          {scrobble_rule.target_musicbrainz_id}
        </p>
        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
          {scrobble_rule.description}
        </p>
      </div>
      <div class="flex flex-col justify-center text-right">
        <span>
          <.status_badge enabled={scrobble_rule.enabled} />
        </span>
        <span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
          {Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
        </span>
      </div>
      <div class="flex items-center">
        <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
          <:toggle>
            <div>
              <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"
              />
            </div>
          </:toggle>
          <.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
            {gettext("Apply rule")}
          </.dropdown_button>
          <.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
            {if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
          </.dropdown_button>
          <.dropdown_link
            id={"actions-#{scrobble_rule.id}-edit"}
            patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
          >
            {gettext("Edit")}
          </.dropdown_link>
          <.separator />
          <.dropdown_button
            phx-click="delete"
            phx-value-id={scrobble_rule.id}
            data-confirm={gettext("Are you sure?")}
            class={[
              "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
            ]}
          >
            {gettext("Delete")}
          </.dropdown_button>
        </.dropdown>
      </div>
    </li>
  </ul>
</div>

<.structured_modal
  :if={@live_action in [:new, :edit]}
  id="scrobble_rule-modal"
  on_close={JS.patch(~p"/scrobble-rules")}
>
  <.live_component
    module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
    id={@scrobble_rule.id || :new}
    title={@page_title}
    action={@live_action}
    scrobble_rule={@scrobble_rule}
    patch={~p"/scrobble-rules"}
  />
</.structured_modal>
