  <div class="absolute z-10 w-screen max-w-xs mt-8 transform -translate-x-full left-full sm:px-0">
    <!--
    Flyout menu, show/hide based on flyout menu state.

    Entering: "transition ease-out duration-200"
      From: "opacity-0 translate-y-1"
      To: "opacity-100 translate-y-0"
    Leaving: "transition ease-in duration-150"
      From: "opacity-100 translate-y-0"
      To: "opacity-0 translate-y-1"
  -->
    <% lineclass="block  px-3 py-3  transition duration-150 ease-in-out  hover:bg-gray-50 flex space-x-3" %>
    <div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
      <div class="relative pt-12 bg-white">



        <%= link tw_icon(&Heroicons.Outline.x/1, "w-7 h-7"), to: "#", phx_click: "hide_menu", phx_target: @target,  class: "text-gray-300 absolute top-4 right-4" %>

        <div class="divide-y divide-y-gray-400">
          <%= link [tw_icon(&Heroicons.Outline.check_circle/1, "w-5 h-5"), content_tag(:div, "select multiple")] , to: "#", phx_click: "show_multiselect_ui",  phx_target: @target,  class: lineclass
            %>
          <%= link [tw_icon(&Heroicons.Outline.clipboard_copy/1, "w-5 h-5"), content_tag(:div, "copy element to clipboard")] , to: "#", phx_click: "copy_ce", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
          <%= if @clipboard_size>0 do %>
          <%= link [tw_icon(&Heroicons.Outline.chevron_up/1, "w-5 h-5"), content_tag(:div, "paste #{@clipboard_size} element(s) from clipboard BEFORE this element")] , to: "#", phx_click: "paste_ce", phx_value_position: "before", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
          <%= link [tw_icon(&Heroicons.Outline.chevron_down/1, "w-5 h-5"), content_tag(:div, "paste #{@clipboard_size} element(s) from clipboard AFTER this element")] , to: "#", phx_click: "paste_ce", phx_value_position: "after", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
          <% end %>
          <%= link [tw_icon(&Heroicons.Solid.plus/1, "w-7 h-7"), content_tag(:div, "create new element BEFORE this element")] , to: "#", phx_click: "add_ce", phx_value_position: "before", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
          <%= link [tw_icon(&Heroicons.Solid.plus/1, "w-7 h-7"), content_tag(:div, "create new element AFTER this element")] , to: "#", phx_click: "add_ce", phx_value_position: "after", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
          <%#= link [tw_icon(&Heroicons.Outline.arrow_up/1, "w-5 h-5"), content_tag(:div, "move up")] , to: "#", phx_click: "move_ce", phx_value_direction: "up", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
          <%#= link  [tw_icon(&Heroicons.Outline.arrow_down/1, "w-5 h-5"),content_tag(:div, "move down")], to: "#", phx_click: "move_ce", phx_value_direction: "down", phx_value_uid: @item["uid"], phx_target: @target,  class: lineclass
            %>
        </div>

      </div>
    </div>
  </div>
