<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("Online Store Templates")}
      </h1>
    </div>
    <div>
      <.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
        <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
        {gettext("New Template")}
      </.button>
    </div>
  </div>
</header>

<div class="mt-6 space-y-4">
  <ul
    role="list"
    class="divide-y divide-gray-200 dark:divide-gray-800"
    phx-update="stream"
    id="templates"
  >
    <li
      :for={{id, template} <- @streams.templates}
      id={id}
      class="flex items-center justify-between py-5"
    >
      <div class="min-w-0">
        <div class="flex items-center gap-x-2">
          <img
            src={MusicLibrary.OnlineStoreTemplates.favicon_url(template)}
            alt={template.name}
          />
          <p class="text-sm font-semibold text-gray-900 dark:text-white">
            {template.name}
          </p>
          <.badge :if={template.enabled} color="success">
            {gettext("Enabled")}
          </.badge>
          <.badge :if={!template.enabled} color="warning">
            {gettext("Disabled")}
          </.badge>
        </div>
        <div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
          <p class="truncate font-mono">{template.url_template}</p>
        </div>
        <p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
          {template.description}
        </p>
      </div>
      <div class="flex items-center">
        <.dropdown id={"actions-#{template.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="toggle-enabled" phx-value-id={template.id}>
            {if template.enabled,
              do: gettext("Disable template"),
              else: gettext("Enable template")}
          </.dropdown_button>
          <.dropdown_link
            id={"actions-#{template.id}-edit"}
            patch={~p"/online-store-templates/#{template}/edit"}
          >
            {gettext("Edit")}
          </.dropdown_link>
          <.separator />
          <.dropdown_button
            phx-click="delete"
            phx-value-id={template.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="template-modal"
  on_close={JS.patch(~p"/online-store-templates")}
>
  <.live_component
    module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent}
    id={@template.id || :new}
    title={@page_title}
    action={@live_action}
    template={@template}
    patch={~p"/online-store-templates"}
  />
</.structured_modal>
