SpinaCMS/Spina

<div data-controller="unique-id" data-unique-id="<%= f.object.object_id %>" class="cursor-move">
  <%= f.hidden_field :signed_blob_id, data: {media_picker_target: "signedBlobId"} %>
  <%= f.hidden_field :filename, data: {media_picker_target: "filename"} %>
  <%= f.hidden_field :image_id, data: {media_picker_target: "imageId"} %>
  
  <div class="h-28 w-28 rounded-lg shadow-md overflow-hidden relative mr-3">
    
    <button class="absolute top-0 left-0 mt-2 ml-2 z-10 cursor-pointer flex items-center h-9 px-2 rounded-md bg-gray-700 bg-opacity-50 border-gray-300 active:shadow-inner text-gray-200 hover:text-white text-sm font-medium leading-none leading-none shadow-sm" data-action="image-collection#removeImage" data-id="<%= f.object.object_id %>" type="button">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
      </svg>
    </button>
    
    <%= image_tag thumbnail_url(f.object.spina_image), class: "object-contain h-28 w-full", data: {controller: "image-fade-in"} %>
  </div>
</div>