SpinaCMS/Spina

<div class="mt-6 relative" data-controller="media-picker unique-id" data-unique-id="<%= dom_id(f.object, f.object.object_id) %>" data-action="media-picker:done->media-picker#handleDone">
  <label class="block text-sm leading-5 font-medium text-gray-700">
    <%= f.object.title %>
  </label>
  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>

  <%= 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"} %>

  <button class="absolute mt-3 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="media-picker#removeImage" data-media-picker-target="clearButton" 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>
  
  <%= link_to spina.admin_media_picker_path(target: dom_id(f.object, f.object.object_id)), class: "block relative mt-1 w-full", data: {turbo_frame: "modal"} do %>
    <div class="<%= ratio_tailwind_class_for_image_part(f.object) %> h-36 bg-transparent border-2 border-dashed border-gray-300 rounded-lg flex items-center flex-col justify-center">
      <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <div class="text-gray-400 font-medium text-sm"><%=t 'spina.images.choose_image' %></div>
    </div>
    
    <div class="border absolute inset-0 <%= ratio_tailwind_class_for_image_part(f.object) %> h-36 bg-gray-100 rounded-lg shadow-md overflow-hidden" data-media-picker-target="thumbnail">
      <% if f.object.signed_blob_id.present? && f.object.spina_image.present? %>
        <%= image_tag thumbnail_url(f.object.spina_image), class: 'object-contain h-36 w-full', data: {controller: "image-fade-in"} %>
      <% end %>
    </div>
  <% end %>

  <%= f.text_field :alt, placeholder: "Alt text", class: "h-10 px-3 italic bg-transparent w-full max-w-xs text-sm block border-0 focus:ring-0", data: {media_picker_target: "alt"} %>
</div>