reflect_os_console

<.header>
  Sections
</.header>

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

<.link
  patch={~p"/sections/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="section-new-form-drawer"
  show
  on_cancel={JS.patch(~p"/sections")}
>
  <.live_component
    id={:new_section_wizard}
    module={ReflectOS.ConsoleWeb.SectionLive.NewSectionWizard}
    patch={~p"/sections"}
  />
</.drawer>

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

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

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

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

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