<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @var $block \Magento\Backend\Block\Widget\Form\Renderer\Fieldset
 * @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer
 */

/** @var \Magento\Framework\Json\Helper\Data $jsonHelper */
$jsonHelper = $block->getData('jsonHelper');
?>

<div id="js-file-uploader" class="uploader">
</div>
<script id="js-file-uploader-template" type="text/x-magento-template">
    <div id="<%- data.id %>" class="file-row">
        <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
        <div class="progressbar-container">
            <div class="progressbar upload-progress""></div>
        </div>
        <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
            "width: 0%;",
            "div.progressbar-container div.progressbar.upload-progress"
        ) ?>
        <div class="clear"></div>
    </div>
</script>
<script id="js-uploaded-file-template" type="text/x-magento-template">
    <input class="up" type="button" value="">
    <input class="down" type="button" value="">
    <input type="hidden" name="js_order[<%- data.id %>]" value="1">

    <div class="js-file">
        <%- data.name %>
        <div class="remove-js">
            <input
                type="checkbox"
                id="remove_js_files_<%- data.id %>"
                name="js_removed_files[]"
                value="<%- data.id %>" />
            <label for="remove_js_files_<%- data.id %>"><?= $block->escapeHtml(__('Remove')) ?></label>
        </div>
    </div>

    <input type="hidden" name="js_uploaded_files[]" value="<%- data.temporary %>" />
</script>

<ul id="js-files-container" class="js-files-container ui-sortable" ></ul>
<?php $scriptString = <<<script

require([
    "jquery",
    "jquery/ui",
    "Magento_Theme/js/sortable",
    "Magento_Theme/js/custom-js-list"
], function(jQuery){

jQuery(function($) {
    $('.ui-sortable').sortable();
    $('.ui-sortable').disableSelection();

    $('#js-files-container').themeJsList({
        templateId : '#js-uploaded-file-template',
        refreshFileListEvent : 'refreshJsList',
        prefixItemId : 'js-file-'
    });
    $('body').trigger(
        'refreshJsList',
        {
            jsList: {$jsonHelper->jsonEncode($block->getJsFiles())}
        }
    );
});

});

script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
