SpinaCMS/Spina

<% 
  # Fields
  image = Spina::Parts::Image.new()
  fields = f.fields_for(:images, [image], child_index: image.object_id) do |builder|
    render("spina/admin/parts/image_collections/fields", f: builder)
  end.gsub("\n", "")
%>

<div class="mt-6 relative" data-controller="image-collection unique-id" data-unique-id="<%= dom_id(image, image.object_id) %>" data-action="media-picker:done->image-collection#handleDone" data-fields="<%= fields %>">
  <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>

  <div class="flex items-start mt-1">
    <div class="flex items-center" data-image-collection-target="collection">
      <%= f.fields_for :images do |ff| %>
        <%= render 'spina/admin/parts/image_collections/fields', f: ff %>
      <% end %>
    </div>
    
    <%= link_to spina.admin_media_picker_path(target: dom_id(image, image.object_id)), class: "relative", data: {turbo_frame: "modal"} do %>
      <div class="h-28 w-28 bg-transparent border-2 border-dashed border-gray-300 rounded-lg flex items-center flex-col justify-center">
        <svg class="mx-auto h-10 w-10 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-xs"><%=t 'spina.media_library.add_image' %></div>
      </div>
    <% end %>
  </div>
</div>