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

<div class="dialog f-storage-delete" id="{$dialog_id}">
    <form>
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <h3 class="dialog-header">[`Delete storage`]</h3>
            <div class="dialog-content">
                {if $files_count > 0}
                    <p>
                        {sprintf(_w("This will permanently delete “%s”, and <strong>all %d files and folders</strong>. Are you sure?"), $storage.name|escape, $files_count)}
                    </p>
                {/if}
            </div>
            <div class="dialog-footer">
                {$wa->csrf()}
                <button type="submit" class="button red"><i class="fas fa-spinner fa-spin loading hidden custom-mr-4"></i> {if $files_count > 0}[`Delete storage and all files`]{else}[`Delete storage`]{/if}</button>
                <a class="js-close-dialog button light-gray" href="javascript:void(0);">[`Cancel`]</a>
            </div>
        </div>
    </form>
    <script>
        $(function() {
            const dialog = $('#{$dialog_id}');
            $('.f-storage-dialog').remove();
            dialog.filesDialog({
                onOpen: function($dialog, dialog_instance) {
                    $dialog.find('[type="submit"]').on('click', function(e) {
                        e.preventDefault();

                        $dialog.find('.fa-spinner').removeClass('hidden');
                        this.disabled = true;

                        $.files.jsonPost({
                            url: '?module=storage&action=delete',
                            data: { id: "{$storage.id}" },
                            onSuccess: function() {
                                $.files.refreshSidebar();
                                $.files.controller.gotoDefaultPage();
                                dialog_instance.close();
                            }
                        });
                    })
                }
            });
        });
    </script>
</div>