reflect_os_console

<.header>
  Layouts
</.header>

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

<.link
  patch={~p"/layouts/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-new-form-drawer"
  show
  on_cancel={JS.patch(~p"/layouts")}
>
  <.live_component
    id={:new_layout_wizard}
    module={ReflectOS.ConsoleWeb.LayoutLive.NewLayoutWizard}
    patch={~p"/layouts"}
  />
</.drawer>

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

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

<.drawer
  :if={@live_action in [:manage]}
  id="layout-manage-form"
  show
  on_cancel={JS.patch(~p"/layouts")}
>
  <.live_component
    module={ReflectOS.ConsoleWeb.LayoutLive.ManageFormComponent}
    id={@reflectos_layout.id || :new}
    reflectos_layout={@reflectos_layout}
    patch={~p"/layouts"}
  />
</.drawer>

<.drawer
  :if={@live_action == :delete}
  id="layout-delete-form"
  show
  on_cancel={JS.patch(~p"/layouts")}
>
  <div class="inline-flex items-center">
    {%{icon: icon} = @reflectos_layout.module.layout_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 Layout
      </h5>
      <p class="font-thin">
        {@reflectos_layout.name}
      </p>
    </div>
  </div>

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

  <.button
    phx-click="delete"
    phx-value-id={@reflectos_layout.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>