SpinaCMS/Spina

<div data-selectable-target="item">
  <button type="button" 
    data-action="media-picker-modal#selectImage selectable#select dblclick->media-picker-modal#instantInsert" 
    data-image-id="<%= @image.id %>"
    data-signed-blob-id="<%= @image.file.blob&.signed_id %>"
    data-filename="<%= @image.file.filename %>"
    data-thumbnail="<%= helpers.thumbnail_url(@image) %>"
    data-embedded-url="<%= helpers.embedded_image_url(@image) %>"
    data-selected-class="bg-gray-100 border-spina scale-105"
    data-deselected-class="border-transparent"
    class="w-full h-40 overflow-hidden rounded-md transform transition-transform duration-200 border-2 border-transparent hover:scale-105">

    <%= image_tag helpers.large_thumbnail_url(@image), class: 'object-contain h-40 w-full', data: {controller: "image-fade-in"} %>
  </button>

  <div class="text-xs text-center text-gray-700 rounded p-1" data-selected-class="text-white bg-spina" data-deselected-class="text-gray-700"><%= @image.file.filename %></div>
  <div class="text-xs text-center text-gray-400"><%= number_to_human_size @image.file.byte_size %></div>
</div>