{$dialog_id = 'f-rename-dialog-'}

{function form_begin}
    {if $can_rename && !$in_sync}<form>{/if}
{/function}

{function form_end}
    {if $can_rename && !$in_sync}</form>{/if}
{/function}


<div class="dialog f-rename-dialog" id="{$dialog_id}">
    {form_begin}
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <h3 class="dialog-header">{if $file.type === filesFileModel::TYPE_FILE}[`Rename file`]{else}[`Rename folder`]{/if}</h3>
            <div class="dialog-content">
                {if $can_rename}
                    <div>
                        <input type="text" name="name" value="{$file.name|escape}" style="width: 100%;">
                        <input type="hidden" name="id" value="{$file.id}">
                    </div>
                    <div class="f-confirm-text" style="display:none;">{strip}
                        [`You are going to change file extension. This may cause unavailability of file content. Are you sure?`]
                    {/strip}</div>
                {elseif $in_sync}
                    [`Sync is in process. No changes available until synchronization finish.`]
                {else}
                    <span class="text-red">[`No permissions to rename this file`]</span>
                {/if}

            </div>
            <div class="dialog-footer">
                {$wa->csrf()}
                {if $can_rename && !$in_sync}
                    <button type="submit" class="button"><i class="fas fa-spinner fa-spin loading hidden custom-mr-4 f-submit-loading"></i> [`Rename`]</button>
                {/if}
                <a class="js-close-dialog button light-gray" href="javascript:void(0);">[`Cancel`]</a>
            </div>
        </div>
    {form_end}
    <script>
        $(function() {
            const dialog = $('#{$dialog_id}');
            $('.f-rename-dialog').not(dialog).remove();
            {if $can_rename || !$in_sync}
            dialog.filesDialog({
                onOpen: function($dialog, dialog_instance) {
                    const input = $dialog.find('input[name="name"]');
                    if (!input.length) {
                        return;
                    }
                    const fileinfo = $.files.parseFileName(input.val());
                    input.data('filename', fileinfo.filename);
                    input.data('ext', fileinfo.ext);
                    {if $file.type === filesFileModel::TYPE_FILE}
                    const filename = input.data('filename');
                    input.selection('setPos', { start: 0, end: filename.length });
                    {else}
                    input.focus();
                    {/if}

                    $dialog.find('[type="submit"]').on('click', function(e) {
                        e.preventDefault();

                        const cur_ext = fileinfo.ext;
                        const prev_ext = input.data('ext');
                        const file_type = {$file.type|json_encode};
                        const form = $dialog.find('form');

                        const submit = () => {
                            $.files.clearValidateErrors(form);
                            $(this).find('.fa-spinner').removeClass('hidden');
                            this.disabled = true;
                            $.files.jsonPost({
                                url: '?module=rename&action=file',
                                data: form.serialize(),
                                onSuccess: function (r) {
                                    if (r.status !== 'ok') {
                                        if (r.errors && r.errors.sync) {
                                            $.files.alertError(r.errors.sync.msg);
                                        } else {
                                            $.files.showValidateErrors(r.errors, form);
                                        }
                                    } else if (r.status === 'ok' && r.data.file) {
                                        const file = r.data.file;
                                        const file_list = $.files.config.getFileList();
                                        const file_item = $('.f-catalog-item[data-id="' + file.id + '"]', file_list);
                                        file_item.find('.f-file-name').text(file.name);
                                        file_item.find('.f-file-image').attr('src', file.icon);
                                        file_item.find('.f-update-column').text(file.update_datetime_str);
                                        dialog_instance.close();

                                        // Uncheck All
                                        const $catalog = $("#f-catalog-wrapper");
                                        if ($catalog.length) {
                                            $catalog.trigger("unSelectAll");
                                        }

                                    } else {
                                        $.files.alertError('[`Server error`]', r);
                                        dialog_instance.close();
                                    }
                                },
                                onError: function () {
                                    $.files.alertError('[`Server error`]');
                                    dialog_instance.close();
                                },
                                onAlways: function () {
                                    form.find('.fa-spinner').addClass('hidden');
                                    form.find('[type=submit]').attr('disabled', false);
                                }
                            });
                        };

                        if (file_type !== '{filesFileModel::TYPE_FILE}' || cur_ext === prev_ext) {
                            submit();
                        } else {
                            dialog_instance.hide();
                            $.files.confirm(
                                $dialog.find('.f-confirm-text').text(),
                                function () {
                                    submit();
                                }
                            );
                        }
                    })
                }
            });
            {else}
            dialog.filesDialog();
            {/if}
        });
    </script>
</div>