<div id={"#{ @id }"} class="snippet_group_edit_component">



  <div class="flex space-x-4 items-center">
    <%= link tw_icon(&Heroicons.Outline.chevron_left/1, "w-7 h-7"), to: @return_path %>

    <div class="border px-4 py-1 bg-primary-100"> <span class="font-bold"><%= @snippet_group.path %></span>
    </div>
  </div>


  <div class="flex justify-end">
    <div class=" mb-4 flex space-x-4">

      <%= for lang <- MavuSnippets.available_langs(@context[:snippets_conf])  do %>

      <%= link lang, to: "#", class: "rounded  text-xs uppercase px-2 py-1 ml-2 min-w-[3em] text-center hover:ring-primary-500 hover:ring-2 "<>(if  lang_is_active(lang,@context), do: "bg-primary-500 text-white", else: "bg-gray-200"),
      phx_click: "toggle_language_in_params", phx_value_lang: lang, phx_target: @myself %>

      <% end %>

    </div>
  </div>



  <%= if @context.params["action"]=="edit" do %>


  <.live_component module={MavuSnippetsUi.Live.ContentEditComponent}  id={"snippet_group_#{@snippet_group.id}_edit"} context={@context} snippet_group={@snippet_group} path="root" base_path={@base_path} uid={@context.params["uid"]} contentlist={@contentlist} />



  <% end %>

  <.live_component module={MavuSnippetsUi.Live.ContentListComponent}  id={"snippet_group_#{@snippet_group.id}_list" }context={@context} contentlist={@contentlist} snippet_group={@snippet_group} path="root" base_path={@base_path} />




</div>
