SpinaCMS/Spina

<%= turbo_frame_tag dom_id(image) do %>
  <div class="flex items-center h-12 border-b border-gray-200 px-8 hover:bg-white group">
    <div class="w-8 mr-4 h-12 flex justify-center">
      <%= link_to spina.admin_image_path(image), class: "flex items-center cursor-zoom-in", data: {turbo_frame: "modal"} do %>
        <%= image_tag thumbnail_url(image), class: "object-contain" %>
      <% end %>
    </div>
    
    <turbo-frame id="<%= dom_id(image) %>_filename" class="font-medium text-gray-800 h-full flex-1 w-56 text-sm flex items-center relative">
      <span class="truncate"><%= image.file.filename %></span>
    
      <div class="absolute h-full opacity-0 group-hover:opacity-100 flex items-center right-0 pr-3 top-0">
        
        <%= form_with model: image, url: spina.admin_image_path(image), data: {turbo_frame: dom_id(image), controller: "form loading-button", loading_message: t('spina.media_library.uploading'), action: "turbo:submit-end->loading-button#doneLoading"} do |f| %>          
          <%= f.file_field :file, accept: "image/*", id: "image_#{image.id}_file_field", class: 'hidden', data: {action: "loading-button#loading form#requestSubmit"} %>
          
          <button type="button" class="btn btn-default h-7 px-2 mr-2 text-xs" data-controller="delegate-click" data-action="delegate-click#click" data-loading-button-target="button" data-delegate-click-target="#image_<%= image.id %>_file_field">
            <%= heroicon("arrow-path", style: :mini, class: "w-4 h-4 mr-1 text-gray-600") %>
            <%=t 'spina.ui.replace' %>
          </button>
        <% end %>
        
        <%= link_to spina.edit_admin_image_path(image), class: "btn btn-default h-7 px-2 mr-2 text-xs" do %>
          <%= heroicon('pencil', style: :solid, class: 'w-3 h-3 mr-1 text-gray-600') %>
          <%=t 'spina.ui.rename' %>
        <% end %>
        
        <% if @media_folders.present? %>
          <%= render Spina::UserInterface::DropdownComponent.new do |dropdown| %>
            <% dropdown.with_button(classes: 'btn btn-default h-7 px-2 text-xs') do %>
              <%= heroicon('folder', style: :mini, class: 'w-4 h-4 mr-1 text-gray-600') %>
              <%=t 'spina.ui.move_to' %>
              <%= heroicon('chevron-down', style: :solid, class: 'w-4 h-4') %>
            <% end %>
            
            <% dropdown.with_menu do %>
              <% if image.media_folder_id.present? %>
                <%= form_with model: image, url: spina.admin_image_path(image) do |f| %>
                  <%= f.hidden_field :media_folder_id, value: nil %>
                  <%= render Spina::UserInterface::DropdownButtonComponent.new do %>
                    <%=t 'spina.media_library.no_folder' %>
                  <% end %>
                <% end %>
              <% end %>
              <% @media_folders.each do |media_folder| %>
                <% if media_folder.id == image.media_folder_id %>
                  <%= render Spina::UserInterface::DropdownButtonComponent.new(disabled: true) do %>
                    <%= media_folder.name %>
                  <% end %>
                <% else %>
                  <%= form_with model: image, url: spina.admin_image_path(image) do |f| %>
                    <%= f.hidden_field :media_folder_id, value: media_folder.id %>
                    
                    <%= render Spina::UserInterface::DropdownButtonComponent.new do %>
                      <%= media_folder.name %>
                    <% end %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </turbo-frame>
    
    <div class="text-gray-500 text-sm whitespace-nowrap flex items-center">
      <%= number_to_human_size image.file.byte_size %>
      <div class="uppercase ml-2 h-5 flex items-center rounded-md <%= content_type_color(image) %> text-white font-semibold px-1 text-xs">
        <%= content_type(image) %>
      </div>
    </div>
    <div class="text-gray-500 text-xs w-32 text-right whitespace-nowrap"><%=l image.created_at, format: :short %></div>
    <div class="flex items-center ml-2">
      <%= link_to original_url(image), class: "block py-3 px-2 text-gray-500 hover:text-gray-900", download: image.file.filename do %>
        <%= heroicon('download', class: 'w-5 h-5') %>
      <% end %>
      
      <%= button_to spina.admin_image_path(image), method: :delete, class: "block py-3 px-2 text-gray-500 hover:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.images.delete_confirmation_html')}} do %>
        <%= heroicon('trash', class: "w-5 h-5") %>
      <% end %>
    </div>
  </div>
<% end %>