scales_cms

<div class="flex min-h-screen flex-row bg-white">
  <div class="flex min-w-0 flex-1 flex-col p-4">
    <button
      type="button"
      class="mb-4 p-0 m-0 self-start"
      phx-click={JS.dispatch("app:back")}
    >
      &lt; {gettext("Back")}
    </button>

    <div class="mt-2 mb-4 flex items-start justify-between gap-4">
      <div class="flex min-w-0 flex-1 items-center space-x-2">
        <h2 class="text-2xl shrink-0">
          <.link patch={~p"/cms/directories"} class="p-0 m-0">
            {gettext("Pages")}
          </.link>
        </h2>

        <h2 class="text-2xl shrink-0">&gt;</h2>

        <h2 class="min-w-0 truncate text-2xl">
          {@cms_page_variant.title}
        </h2>
      </div>

      <div class="flex shrink-0 space-x-4">
        <.live_component id="locale_switcher" module={LocaleSwitcher} />

        <.button
          type="button"
          phx-click={show_modal("edit-title-modal")}
          class="btn btn-secondary"
        >
          {gettext("Edit page title")}
        </.button>

        <.button
          :if={@cms_page_variant.published_at == nil}
          class="btn-primary"
          phx-click="publish"
        >
          {gettext("Publish")}
        </.button>

        <.button
          :if={@cms_page_variant.published_at != nil}
          phx-click="start-new-version"
          class="btn-secondary"
        >
          {gettext("Start new version")}
        </.button>
      </div>
    </div>

    <.modal id="edit-title-modal">
      <.simple_form for={@form} class="mb-[24px]" phx-submit="update-page">
        <.input field={@form[:title]} label={gettext("Title")} />

        <:actions>
          <.button class="btn-secondary">
            {gettext("Save")}
          </.button>
        </:actions>
      </.simple_form>
    </.modal>

    <div
      :if={@cms_page_variant.published_at != nil}
      class="mb-7 w-full max-w-3xl rounded bg-slate-300 p-8"
    >
      <p class="mb-5">
        {gettext("This page has been published. You can not edit this page anymore")}
        {gettext("If you want to keep editing this page please start a new version")}
      </p>
      <p>
        <.button phx-click="start-new-version" class="btn-secondary">
          {gettext("Start new version")}
        </.button>
      </p>
    </div>

    <div class="relative flex min-h-0 flex-1 flex-col">
      <div
        :if={Enum.empty?(@blocks)}
        class="absolute flex flex-1 flex-col top-0 bottom-0 left-0 right-0 items-center justify-center rounded-xl border-2 border-dashed border-slate-300 px-6 py-12 text-center"
      >
        <p class="mt-2 text-sm text-slate-500">
          {gettext(
            "Drag your first component from the component library on the right and drop it here."
          )}
        </p>

        <p class="mt-1 text-sm text-slate-500">
          {gettext("You can reorder components anytime by dragging them up and down.")}
        </p>
      </div>

      <div
        class="drop-zone flex min-h-16 flex-1 flex-col"
        id="page-drop-zone"
        phx-hook="Drag"
      >
        <.render_preview
          :for={block <- @blocks}
          id={"block-#{block.id}"}
          block={block}
          published={@cms_page_variant.published_at != nil}
          deleting={MapSet.member?(@deleting_block_ids, block.id)}
          animate_in={to_string(@inserted_block_id == block.id)}
          ghost_height={@ghost_height}
          locale={@cms_page_variant.locale}
        />
      </div>
    </div>
  </div>

  <aside
    id="drawer-sidebar"
    class={"relative top-0 right-0 z-40 h-screen overflow-hidden transition-all duration-300 #{if @drawer_open, do: "w-[390px]", else: "w-[64px]"}"}
    aria-label="Sidebar"
  >
    <div class="fixed h-full bg-slate-100 border-l border-slate-200 transition-all">
      <div
        :if={@drawer_open}
        class="flex items-center justify-between gap-2 px-[24px] pt-[16px] pb-[8px]"
      >
        <div>
          <h2 class="mt-[24px] mb-[4px] font-semibold text-2xl">
            {gettext("Component library")}
          </h2>

          <p class="mb-[32px] text-xs">
            {gettext("Drag & drop the components and start building your page")}
          </p>
        </div>

        <div class="chevron-container">
          <button
            type="button"
            class="chevron-wrapper rotate-180"
            phx-click="toggle-drawer"
            aria-expanded={to_string(@drawer_open)}
            aria-controls="default-drawer-close"
            aria-label="Close component drawer"
          >
            <.svg type="chevron" id="chevron_open" width="12" height="12" />
          </button>
        </div>
      </div>

      <div
        :if={!@drawer_open}
        class="flex items-center justify-between px-[16px] pt-[16px] pb-[8px]"
      >
        <div class="chevron-container">
          <button
            type="button"
            class="chevron-wrapper"
            phx-click="toggle-drawer"
            aria-expanded={to_string(!@drawer_open)}
            aria-controls="default-drawer-open"
            aria-label="Open component drawer"
          >
            <.svg type="chevron" id="chevron_close" width="12" height="12" />
          </button>
        </div>
      </div>

      <div :if={@drawer_open} class="h-[calc(100%-57px)] overflow-y-auto px-[24px] pb-[24px]">
        <ul class="flex flex-wrap gap-1 rounded bg-white p-1">
          <li
            phx-value-category="All"
            phx-click="select-component-category"
            class={"cursor-pointer rounded px-[16px] py-[8px] font-semibold transition-all hover:bg-gray-50 #{if @active_category == "All", do: "bg-gray-100", else: ""}"}
          >
            {gettext("All")}
          </li>

          <li
            :for={category <- Enum.reject(@categories, &(&1 == "All"))}
            phx-value-category={category}
            phx-click="select-component-category"
            class={"cursor-pointer rounded px-[16px] py-[8px] font-semibold transition-all hover:bg-gray-50 #{if @active_category == category, do: "bg-gray-100", else: ""}"}
          >
            {category}
          </li>
        </ul>

        <div
          id="drawer"
          class="drawer mt-4"
          phx-hook={if @cms_page_variant.published_at == nil, do: "Drag", else: nil}
        >
          <div
            :for={
              {key, item} <-
                ScalesCmsWeb.Components.CmsComponents.get_insertables_for_category(
                  @active_category,
                  @cms_page_variant.locale
                )
            }
            id={key}
            class={"my-[8px] rounded bg-white p-2 #{if @cms_page_variant.published_at == nil, do: "draggable"}"}
            data-id={key}
          >
            <%= case item.type do %>
              <% :component -> %>
                {item.component.render_draweritem(%{
                  type: key,
                  component: item.component,
                  published: @cms_page_variant.published_at != nil
                })}
              <% :template -> %>
                <.drawer_preview
                  title={item.title}
                  description={"#{gettext("Based on component")}: #{item.component_type}"}
                  icon_type={item.icon_type || "cms_block"}
                  published={@cms_page_variant.published_at != nil}
                />
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>