<%= render :partial => 'spree/admin/shared/product_tabs', :locals => {:current => 'Images'} %>

<% admin_breadcrumb(plural_resource_name(Spree::Image)) %>


<% content_for :page_actions do %>
  <% if can?(:create, Spree::Image) %>
    <li><%= link_to_with_icon('plus', Spree.t(:new_image), new_admin_product_image_url(@product), :id => 'new_image_link', :class => 'button') %></li>
  <% end %>
<% end %>

<div id="images" data-hook></div>

<fieldset>
  <legend align="center"><%= t(".upload_images") %></legend>

  <div id="upload-zone">
    <%= form_for [:admin, @product, Spree::Image.new],
        :html => { :multipart => true, id: 'upload-form' } do |f| %>
      <label class="upload">
        <i class="fa fa-5x fa-cloud-upload"></i>
        <p>
          <span class="button"><%= t(".choose_files") %></span>
        </p>
        <p>
          <%= t(".drag_and_drop") %>
        </p>

        <%= f.file_field :attachment, multiple: '', class: 'hidden' %>
        <%= f.hidden_field :viewable_id, value: @product.master.id %>
      </label>
    <% end %>
  </div>


  <p id="filereader">File API &amp; FileReader API not supported</p>
  <p id="formdata">XHR2's FormData is not supported</p>
  <p id="progress">XHR2's upload progress isn't supported</p>

  <div id="progress-zone" class="row"></div>
</fieldset>

<% no_images = @product.images.empty? && @product.variant_images.empty? %>

<table class="index sortable <%= 'hidden' if no_images %>" id="images-table" data-hook="images_table" data-sortable-link="<%= update_positions_admin_product_images_url(@product) %>">
  <colgroup>
    <col style="width: 5%">
    <col style="width: 10%">
    <% if @product.has_variants? %>
      <col style="width: 25%">
    <% end %>
    <col style="width: 45%">
    <col style="width: 15%">
  </colgroup>
  <thead>
    <tr data-hook="images_header">
      <th colspan="2"><%= Spree.t(:thumbnail) %></th>
      <% if @product.has_variants? %>
        <th><%= Spree::Variant.model_name.human %></th>
      <% end %>
      <th><%= Spree::Image.human_attribute_name(:alt) %></th>
      <th class="actions"></th>
    </tr>
  </thead>

  <tbody>
    <%= render partial: 'image_row', collection: @product.variant_images, as: :image %>
  </tbody>
</table>

<% if no_images %>
  <div class="no-objects-found">
    <%= Spree.t(:no_images_found) %>.
  </div>
<% end %>