{% load i18n %}
<div id="{{name}}-fileupload">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
              <span>{% trans "Add File" %} ({% if extensions %}{{ extensions|join:", " }}{% else %}{% trans "Any type" %}{% endif %}
                {% if attached_file_kind.cardinality %}
                  {% blocktrans with cardinality=attached_file_kind.cardinality %}, maximum {{ cardinality }} file(s){% endblocktrans %}
                {% endif %}
                {% if attached_file_kind.cardinality %}
                  {% blocktrans with minimum=attached_file_kind.minimum %}, minimum {{ minimum }} file(s){% endblocktrans %}
                {% endif %})</span>
              <input type="file" name="{{ 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{{open_tv}}if error{{close_tv}} ui-state-error{{open_tv}}/if{{close_tv}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{open_tv}}if error{{close_tv}}
            <td class="error" colspan="2">Error:
                {{open_tv}}if error === 'maxFileSize'{{close_tv}}File is too big
                {{open_tv}}else error === 'minFileSize'{{close_tv}}File is too small
                {{open_tv}}else error === 'acceptFileTypes'{{close_tv}}Filetype not allowed
                {{open_tv}}else error === 'maxNumberOfFiles'{{close_tv}}Max number of files exceeded
                {{open_tv}}else{{close_tv}}${error}
                {{open_tv}}/if{{close_tv}}
            </td>
        {{open_tv}}else{{close_tv}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{open_tv}}/if{{close_tv}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{open_tv}}if error{{close_tv}} ui-state-error{{open_tv}}/if{{close_tv}}">
        {{open_tv}}if error{{close_tv}}
            <td></td>
	    <td class="name"><p>${name}</p></td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Erreur:
                {{open_tv}}if error === 1{{close_tv}}File exceeds upload_max_filesize (php.ini directive)
                {{open_tv}}else error === 2{{close_tv}}File exceeds MAX_FILE_SIZE (HTML form directive)
                {{open_tv}}else error === 3{{close_tv}}File was only partially uploaded
                {{open_tv}}else error === 4{{close_tv}}No File was uploaded
                {{open_tv}}else error === 5{{close_tv}}Missing a temporary folder
                {{open_tv}}else error === 6{{close_tv}}Failed to write file to disk
                {{open_tv}}else error === 7{{close_tv}}File upload stopped by extension
                {{open_tv}}else error === 'maxFileSize'{{close_tv}}File is too big
                {{open_tv}}else error === 'minFileSize'{{close_tv}}File is too small
                {{open_tv}}else error === 'acceptFileTypes'{{close_tv}}Filetype not allowed
                {{open_tv}}else error === 'maxNumberOfFiles'{{close_tv}}Max number of files exceeded
                {{open_tv}}else error === 'uploadedBytes'{{close_tv}}Uploaded bytes exceed file size
                {{open_tv}}else error === 'emptyResult'{{close_tv}}Empty file upload result
                {{open_tv}}else{{close_tv}}${error}
                {{open_tv}}/if{{close_tv}}
            </td>
        {{open_tv}}else{{close_tv}}
            <td class="preview">
                {{open_tv}}if thumbnail_url{{close_tv}}
                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
                {{open_tv}}/if{{close_tv}}
            </td>
            <td class="name">
                <a href="${url}"{{open_tv}}if thumbnail_url{{close_tv}} target="_blank"{{open_tv}}/if{{close_tv}}>${name}</a>
            </td>
            <td class="size">${sizef}</td>
            <td colspan="2"></td>
        {{open_tv}}/if{{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';
    $('#{{name}}-fileupload').fileupload({url: '{{upload_url}}', autoUpload: true, dropZone: $(document)});
    $.getJSON('{{ upload_url }}', function (files) {
        var fu = $('#{{name}}-fileupload').data('fileupload');
        fu._adjustMaxNumberOfFiles(-files.length);
        fu._renderDownload(files)
            .appendTo($('#{{name}}-fileupload .files'))
            .fadeIn(function () {
                // Fix for IE7 and lower:
                $(this).show();
            });
    });
    // Open download dialogs via iframes,
    // to prevent aborting current uploads:
    $('#{{name}}-fileupload .files a:not([target^=_blank])').live('click', function (e) {
        e.preventDefault();
        $('<iframe style="display:none;"></iframe>')
            .prop('src', this.href)
            .appendTo('body');
    });
});
</script>
