[%- USE HTML %][%- USE L -%][%- USE P -%][%- USE LxERP -%]
[%- USE T8 %][% USE Base64 %]
<table width="100%" id="images_list">
  <thead>
    <tr class="listheading">
      <th width="10px"><img src="image/updown.png" alt="[%- LxERP.t8('reorder item') %]" class="dragdrop"></th>
      <th width="70px"></th>
      <th>[% 'Title'          | $T8 %]</th>
      <th>[% 'Description'    | $T8 %]</th>
      <th>[% 'Filename'       | $T8 %]</th>
      <th>[% 'Orig. Size w/h' | $T8 %]</th>
      <th>[% 'Action'         | $T8 %]</th>
    </tr>
  </thead>
  <tbody>
   [%-  FOREACH img = IMAGES %]
    <tr class="listrow" id="image_id_[%  img.id %]">
      <td><img src="image/updown.png" alt="[%- LxERP.t8('reorder item') %]" class="dragdrop"></td>
      <td width="70px"><img src="data:[%  img.thumbnail_content_type %];base64,[%  img.thumbnail_content.encode_base64 %]" alt="[%  img.file.title %]"></td>
      <td>[% HTML.escape(img.file.title)       %]</td>
      <td>[% HTML.escape(img.file.description) %]</td>
      <td>[% HTML.escape(img.file.file_name)   %]</td>
      <td>[% HTML.escape(img.org_file_width) _  ' x ' _ HTML.escape(img.org_file_height) %]</td>
      <td>[% L.button_tag("kivi.File.delete_file(" _ img.file_id _ ", 'ShopPart/ajax_delete_file')", LxERP.t8('Delete'), confirm=LxERP.t8("Are you sure?")) %]</td>
    </tr>
   [%  END %]
  </tbody>
</table>

[% L.sortable_element('#images_list tbody', url=SELF.url_for(action='reorder'), with='image_id') %]
<p>
[% L.button_tag("kivi.ShopPart.imageUpload(" _ FORM.id _ ",'shop_image','image', '',0);", LxERP.t8('File upload') ) %]
</p>