{if isset($files) && $files|count > 0}
    {assign var='show_thumbnail' value=false}
    {foreach $files as $file}
        {if isset($file.image) && $file.type == 'image'}
            {assign var='show_thumbnail' value=true}
        {/if}
    {/foreach}
    {if $show_thumbnail}
        <div class="form-group clearfix">
            <div class="col-lg-12" id="{$id|escape:'html':'UTF-8'}-images-thumbnails">
                {foreach $files as $file}
                    {if isset($file.image) && $file.type == 'image'}
                        <div>
                            {$file.image}

                            {if isset($file.delete_url)}
                                <span style="display: inline-block; margin-left: 6px;">
                                    {if isset($file.size)}{l s='File size'}: {$file.size} MB<br>{/if}
                                    <a class="xallegro-delete-image btn btn-default btn-outline-secondary{if version_compare($smarty.const._PS_VERSION_, '1.7', '>=')} btn-sm{/if} {if isset($file.delete_class)}{$file.delete_class}{/if}" href="{$file.delete_url}" data-id="{$id|escape:'html':'UTF-8'}" style="margin-top: 6px">
                                        {if version_compare($smarty.const._PS_VERSION_, '1.7', '>=')}<i class="material-icons">delete</i>{else}<i class="icon-trash"></i>{/if} {l s='Delete' d='Admin.Actions'}
                                    </a>
                                </span>
                            {/if}
                        </div>
                    {/if}
                {/foreach}
            </div>
        </div>
    {/if}
{/if}
{if isset($max_files) && $files|count >= $max_files}
    <div class="row">
        <div class="alert alert-warning">{l s='You have reached the limit (%s) of files to upload, please remove files to continue uploading' sprintf=[$max_files]}</div>
    </div>
{else}
    <div class="form-group clearfix{if $files|count == 0} hidden{/if}" {if $files|count == 0}style="display:none;" {/if}>
        {if isset($title)}
            <label class="control-label col-lg-3">{$title|escape:'html':'UTF-8'}</label>
        {/if}
        <div class="col-sm-6">
            <input id="{$id|escape:'html':'UTF-8'}" type="file" name="{$name|escape:'html':'UTF-8'}{if isset ($multiple) && $multiple}[]{/if}"{if isset($multiple) && $multiple} multiple="multiple"{/if} class="hide" />
            <div class="dummyfile input-group">
                {if version_compare($smarty.const._PS_VERSION_, '1.7', '>=')}
                    <span class="input-group-text"><i class="material-icons">image</i></span>
                {else}
                    <span class="input-group-addon"><i class="icon-image"></i></span>
                {/if}
                <input id="{$id|escape:'html':'UTF-8'}-name" class="form-control" type="text" name="{$name|escape:'html':'UTF-8'}" readonly />
                <span class="input-group-btn">
				<button id="{$id|escape:'html':'UTF-8'}-selectbutton" type="button" name="submitAddAttachments" class="btn btn-default btn-secondary">
                    {if version_compare($smarty.const._PS_VERSION_, '1.7', '>=')}<i class="material-icons">folder_open</i>{else}<i class="icon-folder-open"></i>{/if} {if isset($multiple) && $multiple}{l s='Add files'}{else}{l s='Add file'}{/if}
				</button>
                    {if (!isset($multiple) || !$multiple) && isset($files) && $files|count == 1 && isset($files[0].download_url)}
                        <a href="{$files[0].download_url|escape:'html':'UTF-8'}" class="btn btn-default">
						<i class="icon-cloud-download"></i>
                            {if isset($size)}{l s='Download current file (%skb)' sprintf=[$size]}{else}{l s='Download current file'}{/if}
					</a>
                    {/if}
			</span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        {if isset($multiple) && isset($max_files)}
        var {$id|escape:'html':'UTF-8'}_max_files = {$max_files - ($files|count)};
        {/if}

        $(document).ready(function(){
            $('#{$id|escape:'html':'UTF-8'}-selectbutton').click(function(e) {
                $('#{$id|escape:'html':'UTF-8'}').trigger('click');
            });

            $('#{$id|escape:'html':'UTF-8'}-name').click(function(e) {
                $('#{$id|escape:'html':'UTF-8'}').trigger('click');
            });

            $('#{$id|escape:'html':'UTF-8'}-name').on('dragenter', function(e) {
                e.stopPropagation();
                e.preventDefault();
            });

            $('#{$id|escape:'html':'UTF-8'}-name').on('dragover', function(e) {
                e.stopPropagation();
                e.preventDefault();
            });

            $('#{$id|escape:'html':'UTF-8'}-name').on('drop', function(e) {
                e.preventDefault();
                var files = e.originalEvent.dataTransfer.files;
                $('#{$id|escape:'html':'UTF-8'}')[0].files = files;
                $(this).val(files[0].name);
            });

            $('#{$id|escape:'html':'UTF-8'}').change(function(e) {
                if ($(this)[0].files !== undefined)
                {
                    var files = $(this)[0].files;
                    var name  = '';

                    $.each(files, function(index, value) {
                        name += value.name+', ';
                    });

                    $('#{$id|escape:'html':'UTF-8'}-name').val(name.slice(0, -2));
                }
                else // Internet Explorer 9 Compatibility
                {
                    var name = $(this).val().split(/[\\/]/);
                    $('#{$id|escape:'html':'UTF-8'}-name').val(name[name.length-1]);
                }
            });

            if (typeof {$id|escape:'html':'UTF-8'}_max_files !== 'undefined')
            {
                $('#{$id|escape:'html':'UTF-8'}').closest('form').on('submit', function(e) {
                    if ($('#{$id|escape:'html':'UTF-8'}')[0].files.length > {$id|escape:'html':'UTF-8'}_max_files) {
                        e.preventDefault();
                        alert('{l s='You can upload a maximum of %s files' sprintf=[$max_files]}');
                    }
                });
            }
        });
    </script>
{/if}