scales_cms

<div class="w-[calc(100%-400px)]">
  <div class="flex space-between mt-12">
    <h2 class="text-2xl flex-1">
      {@cms_page_variant.title}
    </h2>

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

      <.link patch={~p"/cms/page_builder/#{@cms_page_variant.id}/edit"} class="btn btn-secondary">
        {gettext("Edit page title")}
      </.link>

      <.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 :if={@live_action in [:edit_variant]} show id="edit-title">
    <.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="w-3/4  p-8 mb-7 bg-slate-300	rounded">
    <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="drop-zone  min-h-16 " id="page-drop-zone" phx-hook="Drag">
    <%= for block <- @blocks do %>
      <.render_preview
        id={"block-#{block.id}"}
        block={block}
        published={@cms_page_variant.published_at != nil}
      />
    <% end %>

    <div :if={Enum.count(@blocks) == 0} class="min-h-6 sortable-ghost">
      <.icon name="hero-ellipsis-horizontal" />
    </div>
  </div>
</div>

<aside
  id="drawer-sidebar"
  class="fixed top-0 right-0 z-40 w-[390px] h-screen transition-transform -translate-x-full sm:translate-x-0 bg-slate-100 overflow-auto"
  aria-label="Sidebar"
>
  <div class="relative px-[24px]">
    <h2 class="mt-[48px] 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>

    <ul class="flex bg-white rounded justify-between">
      <li
        phx-value-category="All"
        phx-click="select-component-category"
        class={"cursor-pointer transition-all rounded m-[4px] p-[8px] px-[16px] hover:bg-gray-50 font-semibold #{if @active_category == "All", do: " bg-gray-100", else: ""}"}
      >
        {gettext("All")}
      </li>
      <li
        :for={category <- @categories}
        phx-value-category={category}
        phx-click="select-component-category"
        class={"cursor-pointer transition-all rounded m-[4px] p-[8px] px-[16px] hover:bg-gray-50 font-semibold #{if @active_category == category, do: " bg-gray-100", else: ""}"}
      >
        {category}
      </li>
    </ul>

    <div id="drawer" class="drawer" phx-hook="Drag">
      <div
        :for={
          {type, component} <-
            ScalesCmsWeb.Components.CmsComponents.get_components_for_category(@active_category)
        }
        id={type}
        class={" p-2 rounded my-[8px] bg-white #{if @cms_page_variant.published_at == nil, do: "draggable"}"}
        data-id={type}
      >
        {component.render_draweritem(%{
          type: type,
          component: component,
          published: @cms_page_variant.published_at != nil
        })}
      </div>
    </div>
  </div>
</aside>