<div class="cart-file-uploader">
   {$pageType = $pageType|default:'admin'}
   <div id="thumbnail-fine-uploader"></div>

    {get_user_content type=$pageType assign='files'}

    {if $files == false}
        {$files = []}
    {/if}

    {if $files}
       <ul class="qq-upload-list">
           {foreach $files as $uid => $file}
              <li data-file-uid="{$uid}">
                 {$file.originalFilename}
                 <span class="qq-upload-delete" data-file-delete="{$uid}">Smazat</span></li>
           {/foreach}
       </ul>
    {/if}
</div>


<script>
   $('[data-file-delete]').click(function() {
      var uid = $(this).data('file-delete');

      $(this).text('Probíhá smazání...');

      $.ajax({
         method: 'GET',
         url: '/_upload/{$pageType}/delete/' + uid,
      }).done(function(result) {
         var obj = jQuery.parseJSON(result);
         if (obj.success == true) {
            var $file = $(document).find('[data-file-uid="' + uid + '"]');
            $file.detach();
         }
      });
   });
</script>

<script type="text/template" id="qq-simple-thumbnails-template">
   <div class="qq-uploader-selector qq-uploader">
      <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
         <div>
            <span></span>Přesuňte soubory sem
         </div>
      </div>
      <div class="qq-upload-button-selector">
         <p>
            <strong>Nahrát soubory</strong>
             podporované formáty jsou .jpg, .jpeg, .gif, .png, .svg a .pdf
         </p>
      </div>
      <span class="qq-drop-processing-selector qq-drop-processing">
         <span>Zpracovávám soubory...</span>
         <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
      </span>
      <ul class="qq-upload-list-selector qq-upload-list">
         <li>
            <div class="qq-progress-bar-container-selector">
               <div class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>
            <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
            <div class="qq-thumb-img">
               <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
            </div>
            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
            <span class="qq-upload-file-selector qq-upload-file"></span>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
            <span class="qq-upload-size-selector qq-upload-size"></span>
            <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Zrušit</a>
            <a class="qq-upload-retry-selector qq-upload-retry" href="#">Opakovat</a>
            <a class="qq-upload-delete-selector qq-upload-delete" href="#">Smazat</a>
            <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
         </li>
      </ul>
   </div>
</script>


<script>
   var pageType = '{$pageType}';
   $('#thumbnail-fine-uploader').fineUploader({
      pageType: pageType,
      template: 'qq-simple-thumbnails-template',
      thumbnails: {
         placeholders: {
            waitingPath: '/admin/static/fineuploader/placeholders/waiting-generic.png',
            notAvailablePath: '/admin/static/fineuploader/placeholders/not_available-generic.png',
         },
      },
      request: {
         endpoint: '/_upload/' + pageType + '/upload/',
      },
      deleteFile: {
         enabled: true,
         method: 'DELETE',
         endpoint: '/_upload/' + pageType + '/delete',
      },
      blobProperties: {
         name: 'filename',
      },
      scaling: {
         sendOriginal: false,
         includeExif: true,
         sizes: [
            {
               name: 'full',
               maxSize: 2000,
            },
         ],
      },
      validation: {
         allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'svg', 'pdf'],
      },
      maxConnections: 1
   }).on('allComplete', function(event, success, failed) {
      //$('form').submit();
   });
</script>
