var fileUploadErrors = {
        maxFileSize: "Файл занадто великий",
        minFileSize: "File is too small",
        acceptFileTypes: "Цей тип файлу не підтримується",
        maxNumberOfFiles: "Перевищено максимальну кількість файлів",
        uploadedBytes: "Перевищено обмеження на завантаження файлів",
        emptyResult: "Порожній результат завантаження файлу"
    };

    $.widget('blueimp.fileupload', $.blueimp.fileupload, {

        _initTemplates: function () {

            this.options.uploadTemplate = function (o) {

                var rows = $();

                $.each(o.files, function (index, file) {

                    console.log('-->', file, file.name.split('.').pop(), o.options.acceptFileTypes);

                    if(o.options.acceptFileTypes !== undefined   && !o.options.acceptFileTypes.test(file.type)){
                        file.error = fileUploadErrors.acceptFileTypes;
                    } else if(o.options.maxFileSize !== undefined && file.size > o.options.maxFileSize){
                        file.error = fileUploadErrors.maxFileSize;
                    }

                    file.isImage = /^image/.test(file.type);

                    console.log('--2->', file);

                    var hideFileTitle = o.options.hideFileTitle !== undefined

                    var row = $('<div class="template-upload d-flex">' +

                        (file.isImage ? '<div class="col-preview d-flex align-items-center justify-content-center"><span class="preview"></span></div>'
                            : '<div class="col-preview d-flex align-items-center justify-content-center"><i class="fas fa-file-download"></i></div>') +

                        '<div class="col-title px-3">' +
                        '<div class="file-name"></div>'+
                        (file.error ? '' : '<span class="ajax-spinner"></span>') +
                        '<div class="error-message text-danger"></div>' +
                        '</div>' +

                        '<div class="col-btn">' +
                        '      <button class="cancel file-button btn"><i class="icon-trash far fa-trash-alt green"></i></button>' +
                        '   </div>' +
                        '</div>');

                    row.find('.file-name').text(file.name);
                    row.find('.file-size').text(o.formatFileSize(file.size));
                    if (file.error) {
                        row.addClass('error')
                        row.find('.error-message').text(file.error);
                    }
                    rows = rows.add(row);

                });
                return rows;
            }


            this.options.downloadTemplate = function (o) {

                var rows = $();

                $.each(o.files, function (index, file) {

                    var hideFileTitle = o.options.hideFileTitle !== undefined;
                    var hideFileSize = o.options.hideFileSize !== undefined;
                    var hideFileSize = o.options.hideFileSize !== undefined;

                    var row = $(
                        '<div class="template-download d-flex">' +

                        (file.isImage ? '<div class="col-preview d-flex align-items-center justify-content-center"><span class="preview"></span></div>'
                            : '<div class="col-preview d-flex align-items-center justify-content-center"><a target="_blank" href="'+ (file.url !== undefined ? file.url : '#') +'"><i class="fas fa-file-download tx-40 icon-file '+ file.ext +'"></i></a></div>') +

                        '<div class="col-title form-group d-flex flex-column justify-content-center '+ (hideFileTitle ? '': 'flex-fill px-3 mb-0') +'">' +
                            (hideFileTitle || file.error ? '': '<div class="file-title">' +
                                ''+
                                                                    '<div class="inner-wrap " data-lang=""><label>Коментар</label><input type="text" name="'+ file.key  +'[]" value="" class="fileupload-text-input form-control" /></div>' +
                                                        '</div>') +

                        '<div class="error-message"></div>' +
                        '</div>' +

                        '<div class="col-btn d-flex flex-column justify-content-center">' +
                        '<button class="file-button delete btn mt-4"><i class="icon-trash far fa-trash-alt green"></i> </button>'+
                        '<input type="hidden" name="name['+file.key+']" value="'+file.name+'" />' +
                        '</div>'+
                        '</div>' );

                    if (file.error) {
                        //
                        row.find('.preview').append('<i class="fas fa-file-download"></i>')
                        row.addClass('error')
                        row.find('.error-message').text(file.error);


                    } else {

                        console.log('>>', file);

                        if(file.isImage){
                            row.find('.preview').append('<a><img></a>')
                                .find('img').prop('src', file.previewUrl).end()
                                .find('a').attr({
                                target:'_blank'
                            }).prop('rel', 'gallery').prop('href', file.url);
                        }
                    }

                    rows = rows.add(row);

                });

                return rows;

            }


        }

    });