@model String
@inject Grand.Business.Core.Interfaces.Common.Security.IPermissionService permissionService
@using Grand.SharedKernel.Extensions
@using Grand.Business.Core.Utilities.Common.Security
@{
    var allowFileman = await permissionService.Authorize(StandardPermission.HtmlEditorManagePictures);
    var random = CommonHelper.GenerateRandomInteger();    
}
<div id="s-@(random)-summernote" class="summernote" data-name="null" data-file="null" data-format="null">
    @Html.Raw(ViewData.TemplateInfo.FormattedModelValue)
</div>
@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
<script>
    function elfinderDialog@(random)(context) { // <------------------ +context
        var fm = $('<div/>').dialogelfinder({
            url: '@Url.Action("Connector", "ElFinder")',
            baseUrl: '@(Common.WwwRoot)/administration/elfinder/',
            lang: 'en',
            width: 840,
            height: 450,
            destroyOnClose: true,
            uiOptions: { // UI buttons available to the user
                toolbar: [
                    ['home', 'up'],
                    ['mkdir', 'mkfile', 'upload'],
                    ['open', 'download'],
                    ['copy', 'cut', 'paste'],
                    ['rm'],
                    ['duplicate', 'rename', 'edit'],
                    ['view', 'sort']
                ]
            },
            requestType: 'post',
            getFileCallback: function (file, fm) {
                var fulltype = file.mime;
                if (fulltype.includes("video")) {
                    var node = document.createElement('iframe');
                    node.src = file.url;
                    $('#s-@(random)-summernote').summernote('editor.insertNode', node);
                }
                if (fulltype.includes("image")) {
                    $('#s-@(random)-summernote').summernote('editor.insertImage', file.url);
                }
                if (!fulltype.includes("image") && !fulltype.includes("video")) {
                    $('#s-@(random)-summernote').summernote('editor.createLink', {
                        text: file.name,
                        url: file.url,
                        isNewWindow: false
                    });
                }
            },
            commandsOptions: {
                getfile: {
                    oncomplete: 'close',
                    folders: false
                }
            }
        }).dialogelfinder('instance');
    }
</script>
<script>
    $(document).ready(function () {
         var FileManager = function (context) {
            var ui = $.summernote.ui;
            // create button
            var button = ui.button({
                contents: '<i class="note-icon-picture"/>',
                tooltip: '@Loc["Admin.FileManager.Picture"]',
                click: function () {
                    elfinderDialog@(random)();
                }
            });
            return button.render();   // return button as jquery object
        }

        $('#s-@(random)-summernote').summernote({
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'image', 'elfinder', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ],
            buttons: {
                @if(allowFileman)
                {
                    <text> elfinder: FileManager, </text>
                }
            },
            callbacks: {
                    onChange: function (contents) {
                            var textarea = this.nextSibling.nextElementSibling;
                            textarea.value = contents;
                        },
            },
        });
    });
</script>

