{% load i18n %}
<div id="{{widget.name}}-fileupload">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
              <span>{% trans "Add File" %} ({% if widget.extensions %}{{ widget.extensions|join:", " }}{% else %}{% trans "Any type" %}{% endif %}
                {% if widget.attached_file_kind.cardinality %}
                  {% blocktrans with cardinality=widget.attached_file_kind.cardinality %}, maximum {{ cardinality }} file(s){% endblocktrans %}
                {% endif %}
                {% if widget.attached_file_kind.cardinality %}
                  {% blocktrans with minimum=widget.attached_file_kind.minimum %}, minimum {{ minimum }} file(s){% endblocktrans %}
                {% endif %})</span>
              <input type="file" name="{{ widget.name }}" multiple>
            </label>
        </div>
    <div class="fileupload-content">
        <table class="files">
        </table>
        <div class="fileupload-progressbar"></div>
    </div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{widget.open_tv}}if error{{widget.close_tv}} ui-state-error{{widget.open_tv}}/if{{widget.close_tv}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{widget.open_tv}}if error{{widget.close_tv}}
        <td class="error" colspan="2">{% trans "Error" %}&nbsp;:
              {{widget.open_tv}}if error === 'maxFileSize'{{widget.close_tv}}{% blocktrans %}File is too big, limit is {{ widget.max_file_size }} bytes{% endblocktrans %}
              {{widget.open_tv}}else error === 'minFileSize'{{widget.close_tv}}{% trans "File is too small" %}
              {{widget.open_tv}}else error === 'acceptFileTypes'{{widget.close_tv}}{% trans "Filetype not allowed" %}
              {{widget.open_tv}}else error === 'maxNumberOfFiles'{{widget.close_tv}}{% trans "Max number of files exceeded" %}
              {{widget.open_tv}}else error === 'httpError'{{widget.close_tv}}{% trans "HTTP Error" %}
              {{widget.open_tv}}else error === 'unknownError'{{widget.close_tv}}{% trans "Unknown error" %}
                {{widget.open_tv}}else{{widget.close_tv}}${error}
                {{widget.open_tv}}/if{{widget.close_tv}}
            </td>
        {{widget.open_tv}}else{{widget.close_tv}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{widget.open_tv}}/if{{widget.close_tv}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{widget.open_tv}}if error{{widget.close_tv}} ui-state-error{{widget.open_tv}}/if{{widget.close_tv}}">
        {{widget.open_tv}}if error{{widget.close_tv}}
            <td></td>
	    <td class="name"><p>${name}</p></td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Erreur:
                {{widget.open_tv}}if error === 1{{widget.close_tv}}File exceeds upload_max_filesize (php.ini directive)
                {{widget.open_tv}}else error === 2{{widget.close_tv}}File exceeds WIDGET.MAX_FILE_SIZE (HTML form directive)
                {{widget.open_tv}}else error === 3{{widget.close_tv}}File was only partially uploaded
                {{widget.open_tv}}else error === 4{{widget.close_tv}}No File was uploaded
                {{widget.open_tv}}else error === 5{{widget.close_tv}}Missing a temporary folder
                {{widget.open_tv}}else error === 6{{widget.close_tv}}Failed to write file to disk
                {{widget.open_tv}}else error === 7{{widget.close_tv}}File upload stopped by extension
                {{widget.open_tv}}else error === 'maxFileSize'{{widget.close_tv}}File is too big
                {{widget.open_tv}}else error === 'minFileSize'{{widget.close_tv}}File is too small
                {{widget.open_tv}}else error === 'acceptFileTypes'{{widget.close_tv}}Filetype not allowed
                {{widget.open_tv}}else error === 'maxNumberOfFiles'{{widget.close_tv}}Max number of files exceeded
                {{widget.open_tv}}else error === 'uploadedBytes'{{widget.close_tv}}Uploaded bytes exceed file size
                {{widget.open_tv}}else error === 'emptyResult'{{widget.close_tv}}Empty file upload result
                {{widget.open_tv}}else{{widget.close_tv}}${error}
                {{widget.open_tv}}/if{{widget.close_tv}}
            </td>
        {{widget.open_tv}}else{{widget.close_tv}}
            <td class="preview">
                {{widget.open_tv}}if thumbnail_url{{widget.close_tv}}
                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
                {{widget.open_tv}}/if{{widget.close_tv}}
            </td>
            <td class="name">
                <a href="${url}"{{widget.open_tv}}if thumbnail_url{{widget.close_tv}} target="_blank"{{widget.open_tv}}/if{{widget.close_tv}}>${name}</a>
            </td>
            <td class="size">${sizef}</td>
            <td colspan="2"></td>
        {{widget.open_tv}}/if{{widget.close_tv}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
        </td>
    </tr>
</script>

<script type="text/javascript">
$(function () {
    'use strict';
    $('#{{widget.name}}-fileupload').fileupload({url: '{{widget.upload_url}}', maxFileSize: {{widget.max_file_size}}, autoUpload: true, dropZone: $(document)});
    $.getJSON('{{ widget.upload_url }}', function (files) {
        var fu = $('#{{widget.name}}-fileupload').data('fileupload');
        fu._adjustMaxNumberOfFiles(-files.length);
        fu._renderDownload(files)
            .appendTo($('#{{widget.name}}-fileupload .files'))
            .fadeIn(function () {
                // Fix for IE7 and lower:
                $(this).show();
            });
    });
    // Open download dialogs via iframes,
    // to prevent aborting current uploads:
    $(document).on('click', '#{{widget.name}}-fileupload .files a:not([target^=_blank])', function (e) {
        e.preventDefault();
        $('<iframe style="display:none;"></iframe>')
            .prop('src', this.href)
            .appendTo('body');
    });
});
</script>
