{$dialog_id = uniqid('f-delete-dialog-')}

{function form_begin}
    {if $allowed_files}<form>{/if}
{/function}

{function form_end}
    {if $allowed_files}</form>{/if}
{/function}

<div class="dialog f-delete-dialog" id="{$dialog_id}">
    {form_begin}
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <h3 class="dialog-header">[`Delete`]</h3>
            <div class="dialog-content">

                {if $allowed_files}
                    {if $unallowed_files}
                        <p class="state-error-hint">
                            [`No permissions to delete these files`]:
                            {foreach $unallowed_files as $file}
                                {$file.name|escape}&nbsp;
                            {/foreach}
                        </p>
                    {/if}
                    {$allowed_files_count = count($allowed_files)}
                    <p>
                        {if $is_permanently}
                            [`Files will be deleted PERMANENTLY without the ability to restore. Are you sure?`]
                        {else}
                            [`Files will be moved to trash. Are you sure?`]
                        {/if}
                        <br>{_w('%d file will be deleted', '%d files will be deleted', $allowed_files_count)}
                    </p>
                {else}
                    <p class="state-error-hint">
                        [`You don’t have permissions to delete these files.`]
                    </p>
                {/if}

            </div>
            <div class="dialog-footer">
                {$wa->csrf()}
                {if $allowed_files}
                    <button type="submit" class="button red"><i class="fas fa-spinner fa-spin loading hidden custom-mr-4"></i> {if $unallowed_files}[`Delete the rest`]{else}[`Delete`]{/if}</button>
                    <a class="js-close-dialog button light-gray" href="javascript:void(0);">[`Cancel`]</a>
                {else}
                    <a class="js-close-dialog button light-gray" href="javascript:void(0);">[`Cancel`]</a>
                {/if}
            </div>
        </div>
    {form_end}
    <script>
        $(function() {
            const dialog = $('#{$dialog_id}');
            $('.f-delete-dialog').not(dialog).remove();

            {if $allowed_files}
                dialog.filesDialog({
                    onOpen: function($dialog, dialog_instance) {
                        $dialog.find('[type="submit"]').on('click', function(e) {
                            e.preventDefault();

                            const $loader = $dialog.find('.fa-spinner')
                            const $btn = $(this);

                            $loader.removeClass('hidden');
                            $btn.prop('disabled', true);

                            const file_ids = {json_encode(array_keys($allowed_files))};
                            $.files.jsonPost({
                                url: '?module=delete&action=files{if $is_permanently}&permanently=1{/if}',
                                data: { file_id: file_ids },
                                onSuccess: function (r) {
                                    if (r.status === 'ok') {
                                        $.files.refreshSidebar();
                                        {if $wa->get('from') === 'fileinfo'}

                                            const file_id = file_ids[0];

                                            if (!$.isEmptyObject(r.data.files) && !$.isEmptyObject(r.data.files[file_id])) {
                                                if (r.data.files[file_id].parent_id > 0) {
                                                    $.files.controller.gotoFolderPage(r.data.files[file_id].parent_id);
                                                } else {
                                                    $.files.controller.gotoStoragePage(r.data.files[file_id].storage_id);
                                                }
                                            } else {
                                                $.files.controller.gotoDefaultPage();
                                            }

                                        {else}
                                            $.files.controller.reloadPage();
                                        {/if}
                                    } else {
                                        $.files.alertError(r.errors[0][0]);
                                    }
                                },
                                onFailure: function (r) {
                                    $.files.alertError('[`Server error`]', r);

                                    $loader.addClass('hidden');
                                    $btn.prop('disabled', false);
                                },
                                onAlways: function () {
                                    dialog_instance.close();
                                }
                            });

                        })
                    }
                });
            {else}
                dialog.filesDialog();
            {/if}
        });
    </script>
</div>