reflect_os_console

<.header>
  Layout Managers
</.header>

<.list id="layout_manager-list" items={@streams.layout_managers}>
  <:item :let={{_id, layout_manager}}>
    <.list_item
      id={layout_manager[:id]}
      icon={layout_manager[:icon]}
      title={layout_manager[:name]}
      subtitle={layout_manager[:type]}
      actions={[
        {"Rename", ~p"/layout-managers/#{layout_manager[:id]}/rename", ""},
        {"Configure", ~p"/layout-managers/#{layout_manager[:id]}/configure", ""},
        {"Delete", ~p"/layout-managers/#{layout_manager[:id]}/delete", "text-red-600"}
      ]}
    />
  </:item>
</.list>

<.link
  patch={~p"/layout-managers/new"}
  class="fixed end-6 bottom-6 flex items-center justify-center text-white bg-zinc-900 hover:bg-zinc-700 rounded-full w-14 h-14  focus:ring-4 focus:ring-zinc-900 focus:outline-none dark:focus:ring-zinc-900"
>
  <svg
    class="w-5 h-5 transition-transform group-hover:rotate-45"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 18 18"
  >
    <path
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M9 1v16M1 9h16"
    />
  </svg>
  <span class="sr-only">Open actions menu</span>
</.link>

<.drawer
  :if={@live_action == :new}
  id="layout_manager-new-form-drawer"
  show
  on_cancel={JS.patch(~p"/layout-managers")}
>
  <.live_component
    id={:new_layout_manager_wizard}
    module={ReflectOS.ConsoleWeb.LayoutManagerLive.NewLayoutManagerWizard}
    patch={~p"/layout-managers"}
  />
</.drawer>

<.drawer
  :if={@live_action == :rename}
  id="layout_manager-rename-form"
  show
  on_cancel={JS.patch(~p"/layout-managers")}
>
  <.live_component
    module={ReflectOS.ConsoleWeb.LayoutManagerLive.RenameFormComponent}
    id={@layout_manager.id || :new}
    layout_manager={@layout_manager}
    patch={~p"/layout-managers"}
  />
</.drawer>

<.drawer
  :if={@live_action in [:configure]}
  id="layout_manager-config-form"
  show
  on_cancel={JS.patch(~p"/layout-managers")}
>
  <.live_component
    module={ReflectOS.ConsoleWeb.LayoutManagerLive.ConfigFormComponent}
    id={@layout_manager.id || :new}
    layout_manager={@layout_manager}
    patch={~p"/layout-managers"}
  />
</.drawer>

<.drawer
  :if={@live_action == :delete}
  id="layout_manager-delete-form"
  show
  on_cancel={JS.patch(~p"/layout-managers")}
>
  <div class="inline-flex items-center">
    {%{icon: icon} = @layout_manager.module.layout_manager_definition()

    raw_icon(icon, class: "w-6 h-6 self-center mr-3")}
    <div>
      <h5 class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
        Delete LayoutManager
      </h5>
      <p class="font-thin">
        {@layout_manager.name}
      </p>
    </div>
  </div>

  <p class="mt-4 mb-4">
    This will permanently remove this layout_manager.
  </p>

  <.button
    phx-click="delete"
    phx-value-id={@layout_manager.id}
    class="bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
  >
    Delete
  </.button>
</.drawer>