<% component_name = component_name_for_ctype(assigns.item["ctype"]) %>

<div class="px-2 pt-6 pb-2 border border-gray-200 border-solid">
  <div class="absolute top-0 left-0 inline-block px-1 py-px text-xs text-white text-gray-500 bg-blue-200"
    title="<%= @item["uid"] %>">
    <%= @item["ctype"] |> human_ctype() %></div>

  <div class="flex styleinfo">
    <span hidden class="p-1 text-xs text-gray-400 opacity-50 hover:opacity-100"><%= @item["classes_defaults"] %></span>
    <div hidden class="p-1 text-xs text-blue-500 truncate opacity-50 hover:opacity-100"><%= @item["classes"] %></div>
  </div>

  <%= live_component           component_name,
          item: @item,
          path: @path,
          snippet_group: @snippet_group,
          context: @context,
          mode: @mode

          %>

</div>
