[{isys_group name="tom.popup.translationImport"}]
    <div id="custom-translation-import">
        <div class="modal-header">
            <h1>[{isys type="lang" ident="LC__LANGUAGE_IMPORT"}]</h1>
            <button type="button" class="btn btn-secondary modal-close ml-auto" title="[{isys type="lang" ident="LC__POPUP__CLOSE"}]" data-tooltip="1">
                <img class="fr mouse-pointer" alt="" src="[{$dir_images}]axialis/user-interface/window-control-close.svg" />
            </button>
        </div>
        <div class="modal-content p10">
            <table class="contentTable">
                <tr>
                    <td class="key">[{isys type="f_label" name="C__CUSTOM_TRANSLATION__MERGE_TRANSLATIONS" ident="LC__LANGUAGE_IMPORT__MERGE"}]</td>
                    <td class="value">[{isys type="f_dialog" name="C__CUSTOM_TRANSLATION__MERGE_TRANSLATIONS"}]</td>
                </tr>
                <tr>
                    <td class="key">[{isys type="lang" ident="LC__LANGUAGE_IMPORT__UPLOAD"}]</td>
                    <td class="value pl20">[{isys type="f_file_ajax" name="C__CUSTOM_TRANSLATION__UPLOAD" uploadType="pro.translation-import"}]</td>
                </tr>
            </table>

            <div id="custom-translation-import-result" class="box box-blue hide"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn modal-close">
                <span>[{isys type="lang" ident="LC__VISUALIZATION_PROFILES__CLOSE_POPUP"}]</span>
            </button>
        </div>
    </div>

    <style>
        #custom-translation-import .qq-upload-list {
            width: 300px;
        }
    </style>

    <script>
        (function () {
            'use strict';

            const $modal = $('custom-translation-import');
            const $importResult = $('custom-translation-import-result');
            let closeAndReload = false;

            $modal.on('click', '.modal-close', function () {
                if (closeAndReload) {
                    document.location.href = '[{$redirectUrl}]'
                } else {
                    Modal.close($modal.up('.modal'));
                }
            });

            $('body').fire('update:tooltips');

            idoit.callbackManager.registerCallback('smarty-ajax-file-upload-before-upload', function(uploader) {
                uploader.setParams({
                    type: 'pro.translation-import',
                    merge: $F('C__CUSTOM_TRANSLATION__MERGE_TRANSLATIONS')
                });
            });

            idoit.callbackManager.registerCallback('smarty-ajax-file-upload', function (result) {
                let index;
                const $resultList = new Element('ul', { className: 'list-style-none m0 p0' });

                for (index in result.callbackResult) {
                    if (!result.callbackResult.hasOwnProperty(index)) {
                        continue;
                    }

                    $resultList.insert(new Element('li', { className: 'p5' }).update(result.callbackResult[index]));
                }

                $importResult.update($resultList).removeClassName('hide');
                closeAndReload = true;
            });
        })();
    </script>
[{/isys_group}]
