<h3>{{ header }}</h3>
<el-form v-if="items.length > 0" dis class="mx-auto" style="height: calc(100% - 50px);" @drop="drop($event)"
    class="WorkflowDesignerWindowForm">
    <div v-for="(item, index) in items">
        <div v-if="item.Header" style="margin-top: 20px;margin-bottom: 5px;">
            <b>{{ item.Header }}</b>
        </div>
        <div v-if="item.Title" :draggable="item.IsEnable" style="cursor:grab;" @dragstart="dragstart(item, $event)" @dragend="dragend($event)" @drop="drop($event)">      
            <el-card body-style="padding:15px;">
                <el-tooltip :disabled="item.IsEnable" :content="libraryLabel.PluginRequired + ' ' + item.Plugins">
                <div v-bind:class="{disabledCard: !item.IsEnable }">
                    <b> {{ item.Title }}</b>
                    <div v-if="item.Description" style="margin-top:10px;">
                        {{ item.Description }}</div>               
                </div>
            </el-tooltip>
            </el-card>
        </div>
    </div>
</el-form>
<script type="application/javascript">
    function library_Init(me)
    {
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
            header: WorkflowDesignerConstants.ToolbarLabel.Library,
            items: [],
            loading: true,
            folder: me.graph.Settings.templatefolder,
            libraryLabel:WorkflowDesignerConstants.LibraryLabel
        });

        me.VueConfig.methods.ValidateItems = function(items)
        {          
            var plugins = me.graph.designer.getpluginsnames();
            items.filter(function(item){ return !item.hasOwnProperty("Header");}).forEach(function(item) 
                {
                    if((item.Plugins==undefined)||(item.Plugins.lenght<1))
                    {
                        item.IsEnable = true;
                        return;
                    }
                    item.IsEnable = true;
                    
                    item.Plugins.split( "," ).forEach(function(element) 
                    {
                        item.IsEnable= item.IsEnable&&plugins.includes(element.trim());
                    });
                });
                return items;
        };

        if(window.WFE_WITH_TEMPLATES){
            me.VueConfig.data.items = me.VueConfig.methods.ValidateItems(Array.from(WFELibrary));
            me.VueConfig.data.loading = false;
        }
        else{
            var libraryUrl = me.VueConfig.data.folder + "library.json";
            $.ajax({url: libraryUrl, async: true}).done(function(result) 
            {
                me.VueConfig.data.items = me.VueConfig.methods.ValidateItems(result);
                me.VueConfig.data.loading = false;
            });
        }


        me.VueConfig.methods.onUpdate = function(){
           
        };

        me.VueConfig.methods.onSearch = function(){ 
            me.VueConfig.watch.options.handler();
        };


        me.VueConfig.methods.insertScheme = function(item){
            var e = me.lastPos;
            var loadingSpinner = $("<div class='WorkflowDesignerWindowLoaderOverlay Compact'><div class='cv-spinner'><span class='spinner'></span></div></div>")
            $("body").append(loadingSpinner);
            loadingSpinner.css('left',e.pageX + 'px');          
            loadingSpinner.css('top',e.pageY + 'px');
            loadingSpinner.show();

            var offset = me.parentContainer.offset();
            var pos = {
                x: e.pageX - offset.left, 
                y: e.pageY - offset.top
            };

            me.graph.insertSchemeFromLibrary(item.File, pos, function(){loadingSpinner.remove()});
        }

        me.VueConfig.methods.savePos = function(e){ 
            me.lastPos = e.originalEvent
        }

        me.VueConfig.methods.dragstart = function(item, e) {
            this.draggingItem = item;
            this.targetStyle = e.target.style;
            this.targetStyle.opacity = 0.6;
            me.parentContainer.on("dragover", me.VueConfig.methods.savePos);
            try {
                e.originalEvent.dataTransfer.setData('text/plain', 'anything'); //hack for drag&drop in FF
            } catch (e) {}
            me.parentContainer.on("dragover.library", function(e){ e.preventDefault(); });
        };

        me.VueConfig.methods.dragend = function(e) 
        {            
            me.parentContainer.off("dragover",  me.VueConfig.methods.savePos );
            this.targetStyle.opacity = 1;
            me.parentContainer.off("dragover.library");
            
            if(this.draggingItem !== undefined)
           {                
                this.insertScheme(this.draggingItem);
                this.draggingItem = undefined;
            }
        };

        me.VueConfig.methods.drop = function(e) {
            this.draggingItem = undefined;
            this.targetStyle.opacity = 1;
            me.parentContainer.off("dragover.library");
        };

        me.VueConfig.watch = {
          options: {
              handler: function () {
                  var search = data.search;                  
                  data.items = WorkflowDesignerCommon.filter(data.originalItems, function(el){
                    var tmp = search.toLowerCase();
                    return (el.Title && el.Title.toLowerCase().indexOf(tmp) !== -1) || (el.Description && el.Description.toLowerCase().indexOf(tmp) !== -1);
                  }).sort(function(a,b){ a.Title > b.Title });      
              }
          },
      };
    };
</script>