diff --git a/amd/build/report-viewer-components.min.js b/amd/build/report-viewer-components.min.js
index 7cf83f1..85063fe 100644
--- a/amd/build/report-viewer-components.min.js
+++ b/amd/build/report-viewer-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/report-viewer-components",["exports","./simpleline/simpleline","core/str","./util/string-helper","./util/date-helper","core/ajax","core/notification","./util/svgarc","./util/debugger","core/config","./treestudyplan-components"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_treestudyplanComponents){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _createForOfIteratorHelper(o,allowArrayLike){var it="undefined"!=typeof Symbol&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=function(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function(){};return{s:F,n:function(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function(){it=it.call(o)},n:function(){var step=it.next();return normalCompletion=step.done,step},e:function(_e2){didErr=!0,err=_e2},f:function(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_config=_interopRequireDefault(_config),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents);var π=Math.PI,_default2={install:function(Vue){Vue.use(_treestudyplanComponents.default),new _debugger.default("treestudyplan-viewer").warn(_config.default);var lastCaller=null;function scrollCurrentIntoView(handle){var elCurrentHeader=document.querySelector(".r-studyplan-scrollable").querySelector(".s-studyline-header-period.current");!elCurrentHeader||handle&&handle==lastCaller||(lastCaller=handle,elCurrentHeader.scrollIntoView({behavior:"smooth",block:"start",inline:"center"}))}var strings=(0,_stringHelper.load_strings)({invalid:{error:"error"},grading:{ungraded:"ungraded",graded:"graded",allgraded:"allgraded",unsubmitted:"unsubmitted",nogrades:"nogrades",unknown:"unknown"},completion:{completed:"completion_completed",incomplete:"completion_incomplete",completed_pass:"completion_passed",completed_fail:"completion_failed",ungraded:"ungraded",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_one:"aggregation_one",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",aggregation_overall_one:"aggregation_overall_one",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion",view_completion_report:"view_completion_report",completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",completion_not_enabled:"completion_not_enabled"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo",badgeissuedstats:"badgeissuedstats",completion_incomplete:"completion_incomplete_badge",completion_completed:"completion_completed_badge",completioninfo:"completioninfo",badgedisabled:"badgedisabled"},course:{completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",not_enrolled:"not_enrolled"},teachercourse:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",required_goal:"required_goal",student_from_plan_enrolled:"student_from_plan_enrolled",students_from_plan_enrolled:"students_from_plan_enrolled"}});function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}var ItemEventBus=new Vue;Vue.component("r-progress-circle",{props:{value:{type:Number},max:{type:Number,default:100},min:{type:Number,default:0},stroke:{type:Number,default:.2},bgopacity:{type:Number,default:.2},title:{type:String,default:""},icon:{type:String}},data:function(){return{selectedstudyplan:null}},computed:{range:function(){return this.max-this.min},fraction:function(){return this.max-this.min==0?0:(this.value-this.min)/(this.max-this.min)},radius:function(){return 50-50*this.stroke},arcpath:function(){var fraction=0,r=50-50*this.stroke;this.max-this.min!=0&&(fraction=(this.value-this.min)/(this.max-this.min));var Δ=2*fraction*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[0,Δ],1.5*π)}},methods:{},template:'\n            <div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">\n                <svg width="1em" height="1em" viewBox="0 0 100 100"\n                     style="position: absolute;top: 0;left: 0;">\n                    <title>{{title}}</title>\n                    <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"\n                        :style="\'opacity: 1; stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                    <g v-else>\n                        <circle cx="50" cy="50" :r="radius"\n                            :style="\'opacity: \' + bgopacity + \';stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                        <path :d="arcpath"\n                            :style="\'stroke-width: \' + (stroke*100) +\'; stroke: currentcolor; fill: none;\'"/>\n                    </g>\n                </svg>\n                <i v-if=\'icon\' :class="\'fa fa-\'+icon"\n                    style=" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; "\n                ></i>\n            </div>\n            '}),Vue.component("r-report",{props:{value:{type:Array},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{selectedstudyplan:null}},computed:{displayedstudyplan:function(){return this.selectedstudyplan?this.selectedstudyplan:this.value&&this.value.length>0?this.value[0]:null}},methods:{selectstudyplan:function(plan){this.selectedstudyplan=plan}},template:"\n            <div class='t-studyplan-container r-report-tabs'>\n                <b-list-group horizontal>\n                    <b-list-group-item\n                        v-for=\"(studyplan,planindex) in value\"\n                        :key=\"studyplan.id\"\n                        :active=\"displayedstudyplan && studyplan.id == displayedstudyplan.id\"\n                        button\n                        @click=\"selectstudyplan(studyplan)\"\n                        >{{studyplan.name}}</b-list-group-item>\n                </b-list-group>\n                <r-studyplan v-if='displayedstudyplan' v-model='displayedstudyplan' :guestmode='guestmode' :teachermode='teachermode'></r-studyplan>\n            </div>\n            "}),Vue.component("r-studyplan",{props:{value:{type:Object},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{}},computed:{columns:function(){return 1+2*this.page.periods},columns_stylerule:function(){for(var s="grid-template-columns: var(--studyplan-filter-width)",i=0;i<this.page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},page:function(){return this.value.pages[0]}},methods:{countLineLayers:function(line){for(var maxLayer=-1,i=0;i<=this.page.periods;i++){line.slots[i];for(var ix in line.slots[i].courses){var item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(var _ix in line.slots[i].filters){var _item=line.slots[i].filters[_ix];_item.layer>maxLayer&&(maxLayer=_item.layer)}}return maxLayer>=0?maxLayer+1:1},showslot:function(line,index,layeridx,type){for(var forGradable="gradable"==type,periods=this.page.periods,show=!0,i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){var list=line.slots[index-i].courses;for(var ix in list){var item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show}},mounted:function(){scrollCurrentIntoView(this.value.id)},updated:function(){scrollCurrentIntoView(this.value.id),ItemEventBus.$emit("lineHeightChange",null)},template:"\n                <div class='r-studyplan-content'>\n                    \x3c!-- First paint the headings--\x3e\n                    <div class='r-studyplan-headings'\n                        ><s-studyline-header-heading></s-studyline-header-heading>\n                        <r-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                            :key=\"line.id\"\n                            v-model=\"page.studylines[lineindex]\"\n                            :layers='countLineLayers(line)+1'\n                            :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                    + ((lineindex==0)?' first ':' ')\n                                    + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                        ></r-studyline-heading\n                    ></div>\n                    \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                    <div class=\"r-studyplan-scrollable\" >\n                        <div class=\"r-studyplan-timeline\" :style=\"columns_stylerule\">\n                        \x3c!-- add period information --\x3e\n                        <template v-for=\"(n,index) in (page.periods+1)\">\n                            <s-studyline-header-period\n                                v-if=\"index > 0\"\n                                v-model=\"page.perioddesc[index-1]\"\n                                ></s-studyline-header-period>\n                            <div class=\"s-studyline-header-filter\"></div>\n                        </template>\n\n                        \x3c!-- Line by line add the items --\x3e\n                        \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                        <template v-for=\"(line,lineindex) in page.studylines\"\n                            ><template v-for=\"(layernr,layeridx) in countLineLayers(line)\"\n                                ><template v-for=\"(n,index) in (page.periods+1)\"\n                                    ><r-studyline-slot\n                                        v-if=\"index > 0 && showslot(line, index, layeridx, 'gradable')\"\n                                        type='gradable'\n                                        v-model=\"line.slots[index].courses\"\n                                        :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :period=\"page.perioddesc[index-1]\"\n                                        :guestmode='guestmode'\n                                        :teachermode='teachermode'\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                    ></r-studyline-slot\n                                    ><r-studyline-slot\n                                        v-if=\"showslot(line, index, layeridx, 'gradable')\"\n                                        type='filter'\n                                        v-model=\"line.slots[index].filters\"\n                                        :teachermode='teachermode'\n                                        :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':'')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                + ((index==page.periods)?' rightmost':'')\"\n                                        >\n                                    </r-studyline-slot\n                                ></template\n                            ></template\n                        ></template\n                        ></div\n                    ></div\n                ></div>\n            "}),Vue.component("r-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange:function(lineid){if(this.$refs.mainEl&&(lineid==this.value.id||null===lineid)){var items=document.querySelectorAll(".r-studyline-slot-0[data-studyline='".concat(this.value.id,"']")),heightSum=0;items.forEach((function(el){var height=el.getBoundingClientRect().height;heightSum+=height}));var heightStyle="".concat(heightSum,"px");this.$refs.mainEl.style.height=heightStyle}}},template:'\n            <div class="r-studyline r-studyline-heading "\n                :data-studyline="value.id" ref="mainEl"\n                ><div class="r-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="r-studyline-title">\n                    <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("r-studyline-slot",{props:{value:{type:Array,default:function(){return[]}},type:{type:String,default:"gradable"},slotindex:{type:Number,default:0},line:{type:Object,default:function(){return null}},layer:{type:Number},plan:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1},period:{type:Object,default:function(){return null}}},mounted:function(){var self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.sizeElement){var height=self.$refs.sizeElement.getBoundingClientRect().height;ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,height)}})).observe(self.$refs.sizeElement))},computed:{item:function(){for(var ix in this.value){var itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},current:function(){if(this.period&&this.period.startdate&&this.period.enddate){var now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss:function(){if(this.item&&this.item.span>1){var span=2*this.item.span-1;return"width: 100%; grid-column: span ".concat(span,";")}return""}},data:function(){return{}},methods:{},template:"\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            "}),Vue.component("r-item",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:function(){return null}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{lines:[]}},methods:{lineColor:function(){if(this.teachermode)return"var(--gray)";switch(this.value.completion){default:return"var(--gray)";case"failed":return"var(--danger)";case"progress":return"var(--warning)";case"completed":return"var(--success)";case"good":return"var(--info)";case"excellent":return"var(--blue)"}},redrawLine:function(conn){var lineColor=this.lineColor(),lineinfo=this.lines[conn.to_id];lineinfo?lineinfo.line&&(lineinfo.line.remove(),lineinfo.line=void 0):(lineinfo={},this.lines[conn.to_id]=lineinfo);var start=document.getElementById("studyitem-"+conn.from_id),end=document.getElementById("studyitem-"+conn.to_id);null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(lineinfo.line=new _simpleline.SimpleLine(start,end,{color:lineColor,gravity:{start:1.3,end:1.3}}))},redrawLines:function(){for(var ix in this.lines){var lineinfo=this.lines[ix];lineinfo&&lineinfo.line&&(lineinfo.line.remove(),lineinfo.line=void 0)}for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.redrawLine(conn)}},onWindowResize:function(){this.redrawLines()}},computed:{hasConnectionsOut:function(){return!["finish"].includes(this.value.type)},hasConnectionsIn:function(){return!["start"].includes(this.value.type)},hasContext:function(){return["start","junction","finish"].includes(this.value.type)}},created:function(){},mounted:function(){var _this=this;this.redrawLines(),setTimeout((function(){_this.redrawLines()}),50),window.addEventListener("resize",this.onWindowResize)},beforeDestroy:function(){for(var i in this.value.connections.out){var conn=this.value.connections.out[i],lineinfo=this.lines[conn.to_id];lineinfo&&lineinfo.line&&(lineinfo.lineElm?(lineinfo.lineElm.parentNode.removeChild(lineinfo.lineElm),lineinfo.lineElm=void 0):lineinfo.line.remove(),lineinfo.line=void 0)}window.removeEventListener("resize",this.onWindowResize)},beforeUpdate:function(){},updated:function(){this.dummy||this.redrawLines()},template:'\n            <div class="r-item-base" :id="\'studyitem-\'+value.id" :data-x=\'value.type\'>\n                <r-item-competency    v-if="value.type == \'competency\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-competency>\n                <r-item-course        v-if="value.type == \'course\' && !teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-course>\n                <r-item-teachercourse v-if="value.type == \'course\' && teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-teachercourse>\n                <r-item-junction      v-if="value.type == \'junction\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-junction>\n                <r-item-start         v-if="value.type == \'start\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-start>\n                <r-item-finish        v-if="value.type == \'finish\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-finish>\n                <r-item-badge         v-if="value.type == \'badge\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-badge>\n                <r-item-invalid       v-if="value.type == \'invalid\' && teachermode"\n                    v-model="value" ></r-item-invalid>\n            </div>\n            '}),Vue.component("r-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:function(){return{text:strings.invalid}},methods:{},template:'\n            <div class="r-item-invalid">\n            <b-card no-body class="r-item-invalid">\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="r-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-course",{props:{value:{type:Object,default:function(){return null}},guestmode:{type:Boolean,default:function(){return!1}},teachermode:{type:Boolean,default:function(){return!1}},plan:{type:Object,default:function(){return null}}},data:function(){return{text:strings.course}},computed:{startdate:function(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate:function(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created:function(){},methods:{completion_icon:function(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}},circle_icon:function(completion){switch(completion){default:return null;case"failed":return"times";case"progress":return"exclamation";case"completed":case"good":case"excellent":return"check"}}},template:"\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            "}),Vue.component("r-item-studentgrades",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1}},data:function(){return{text:strings.course}},computed:{pendingsubmission:function(){var result=!1;for(var ix in this.value.course.grades){if(this.value.course.grades[ix].pendingsubmission){result=!0;break}}return result},useRequiredGrades:function(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades}},methods:{completion_icon:function(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in value.course.grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="(!guestmode)?(g.link):undefined" target="_blank"><span v-html="g.name"></span></a>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + g.completion"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class="\' r-completion-\'+g.completion">{{g.grade}}</span></td>\n                    <td><i :class="\'fa fa-\'+completion_icon(g.completion)+\' r-completion-\'+g.completion"\n                        :title="text[\'completion_\'+g.completion]"></i>\n                        <i v-if=\'g.pendingsubmission\' :title="text[\'completion_pending\']"\n                            class="r-pendingsubmission fa fa-clock-o"></i></td>\n                    <td v-if="g.feedback">\n                        <a  v-b-modal="\'r-grade-feedback-\'+g.id"\n                            href="#"\n                        >{{ text["view_feedback"]}}</a>\n                        <b-modal\n                            :id="\'r-grade-feedback-\'+g.id"\n                            size="sm"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class="fa fa-graduation-cap"></i>{{ value.course.fullname }}</h2><br>\n                                <span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span>{{g.name}}\n                            </template>\n                            <span v-html="g.feedback"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            '}),Vue.component("r-item-studentcompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:function(){return{text:strings.completion}},created:function(){},computed:{},methods:{completion_icon:function(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:function(cgroup){return cgroup.completion?"completed":"incomplete"},hasCompletions:function(){if(this.value.conditions){var _step,_iterator=_createForOfIteratorHelper(this.value.conditions);try{for(_iterator.s();!(_step=_iterator.n()).done;){var cgroup=_step.value;if(cgroup.items&&cgroup.items.length>0)return!0}}catch(err){_iterator.e(err)}finally{_iterator.f()}}return!1},requirementHTML:function(requirements){var rqs=requirements.split(/, */),html="";for(var ix in rqs){var rq=rqs[ix];html+="".concat(rq,"<br>")}return html},addTargetBlank:function(html){var m=/^([^<]*\< *a +)(.*)/.exec(html);return m?"".concat(m[1],' target="_blank" ').concat(m[2]):html}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-if="hasCompletions">\n                    <td colspan=\'2\'\n                        ><span v-if="value.conditions.length <= 1">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if="value.aggregation == \'all\'">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan=\'2\'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for=\'cgroup in value.conditions\' v-if=\'value.enabled && value.tracked\'>\n                    <tr>\n                        <th colspan=\'2\'><span v-if="cgroup.items.length > 1"\n                        ><span v-if="cgroup.aggregation == \'all\'">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if="cgroup.progress < cgroup.count"\n                                :value=\'cgroup.progress\'\n                                :max=\'cgroup.count\'\n                                :class="\'r-completion-\'+cgroup.status"\n                                :title="text[\'completion_\'+cgroup.status]"\n                            ></r-progress-circle>\n                            <i v-else :class="\'fa fa-check-circle r-completion-\'+cgroup.status"></i>\n                            </th>\n                    </tr>\n                    <tr v-for=\'ci in cgroup.items\'>\n                        <td><span v-if=\'guestmode\'>{{ci.title}}</span>\n                            <span v-else v-html=\'addTargetBlank(ci.details.criteria)\'></span>\n                            <a href="#" v-b-tooltip.click.hover.right.html="{ customClass: \'r-tooltip \' + ci.status}"\n                                :title="requirementHTML(ci.details.requirement)"\n                                class="text-primary"><i  v-if="ci.details.requirement"\n                                class=\'fa fa-question-circle\'\n                                ></i></a>\n                        <td\n                            ><span :class="\' r-completion-\'+ci.status">{{ci.grade}}</span>\n                            <span v-if="ci.warning"\n                                ><i class="text-primary fa fa-exclamation-triangle"\n                                    v-b-tooltip.hover.right.click="{ customClass: \'r-tooltip info\' }"\n                                    :title="ci.warning"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class="\'fa fa-\'+completion_icon(ci.status)+\' r-completion-\'+ci.status"\n                            :title="text[\'completion_\'+ci.status]"></i>\n                            <i v-if=\'ci.pending\' :title="text[\'completion_pending\']"\n                                class="r-pendingsubmission fa fa-clock-o"></i>\n                        </td>\n                        <td v-if="ci.feedback">\n                            <a  v-b-modal="\'r-grade-feedback-\'+ci.id"\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-grade-feedback-\'+ci.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-graduation-cap"></i>{{ course.fullname }}</h2><br>\n                                    <span class="r-activity-icon" :title="ci.typename" v-html="ci.icon"></span>{{ci.name}}\n                                </template>\n                                <span v-html="ci.feedback"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if=\'! value.enabled\'>\n                        <td colspan=\'4\'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan=\'4\'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            '}),Vue.component("r-item-teachercourse",{props:{value:{type:Object,default:function(){return null}},guestmode:{type:Boolean,default:function(){return!1}},teachermode:{type:Boolean,default:function(){return!1}},plan:{type:Object,default:function(){return null}}},data:function(){return{text:strings.teachercourse,txt:{grading:strings.grading}}},computed:{course_grading_needed:function(){return this.course_grading_state()},course_grading_icon:function(){return this.determine_grading_icon(this.course_grading_state())},filtered_grades:function(){return this.value.course.grades.filter((function(g){return g.selected}))},useRequiredGrades:function(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},isCompletable:function(){var completable=!1;return this.value.course.completion?this.value.course.completion.conditions.length>0&&(completable=!0):this.value.course.grades&&this.value.course.grades.length>0&&(completable=!0),completable},progress_circle:function(){var status={students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0};if(this.value.course.completion){var _step2,_iterator2=_createForOfIteratorHelper(this.value.course.completion.conditions);try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var _step3,_iterator3=_createForOfIteratorHelper(_step2.value.items);try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var itm=_step3.value;itm.progress&&(status.students+=itm.progress.students,status.completed+=itm.progress.completed,status.completed_pass+=itm.progress.completed_pass,status.completed_fail+=itm.progress.completed_fail,status.ungraded+=itm.progress.ungraded)}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}}else if(this.value.course.grades){var _step4,_iterator4=_createForOfIteratorHelper(this.value.course.grades);try{for(_iterator4.s();!(_step4=_iterator4.n()).done;){var g=_step4.value;g.grading&&(status.students+=g.grading.students,status.completed+=g.grading.completed,status.completed_pass+=g.grading.completed_pass,status.completed_fail+=g.grading.completed_fail,status.ungraded+=g.grading.ungraded)}}catch(err){_iterator4.e(err)}finally{_iterator4.f()}}return status},startdate:function(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate:function(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created:function(){},methods:{course_grading_state:function(){var ungraded=0,unknown=0,graded=0,allgraded=0,grades=this.filtered_grades;if(!Array.isArray(grades)||0==grades)return"nogrades";for(var ix in grades){var grade=grades[ix];grade.grading?Number(grade.grading.ungraded)>0?ungraded++:Number(grade.grading.graded)>0&&(Number(grade.grading.graded)==Number(grade.grading.students)?allgraded++:graded++):unknown=!0}return ungraded>0?"ungraded":unknown?"unknown":graded?"graded":allgraded?"allgraded":"unsubmitted"},determine_grading_icon:function(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}}},template:'\n            <div  :class="\'r-item-competency \'+ (value.course.amteacher?\'r-course-am-teacher\':\'\')">\n            <b-card no-body>\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'r-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body>\n                            <a  v-b-modal="\'r-item-course-details-\'+value.id"\n                                :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):\'#\'"\n                                @click.prevent.stop=\'\'\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class="r-course-graded" :disabled="!isCompletable"\n                                v-model="progress_circle"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if="true"\n                    :id="\'r-item-course-details-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):undefined" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model="value"\n                                    v-if="value.course.grades && value.course.grades.length > 0"\n                                    :useRequiredGrades="useRequiredGrades"\n                                    :plan="plan"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if=\'!!value.course.completion && value.course.amteacher\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                    :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(" / ") }}\n                            <div class=\'mt-1 text-info\'>\n                            <span v-if=\'value.course.numenrolled != 1\'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div class="r-completion-detail-header">\n                                <r-completion-circle class="r-progress-circle-popup" :disabled="!isCompletable"\n                                    v-model="progress_circle"></r-completion-circle>\n                            </div>\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{ text[\'coursetiming_\'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value.course\'\n                        :useRequiredGrades="useRequiredGrades"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-teacher-gradepicker",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:function(){return null}}},data:function(){return{text:strings.teachercourse}},computed:{},methods:{includeChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},template:'\n            <a  v-if="value.course.canselectgradables" href=\'#\'\n                                        v-b-modal="\'r-item-course-config-\'+value.id"\n                                        @click.prevent.stop=\'\'\n                                        ><i class=\'fa fa-cog\'></i>\n                <b-modal v-if=\'value.course.canselectgradables\'\n                    :id="\'r-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.displayname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label="text.select_grades"\n                        ><ul class="t-item-module-children">\n                            <li class="t-item-course-gradeinfo">\n                                <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                                ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                            </li>\n                            <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                                <b-form-checkbox inline\n                                    @change="includeChanged($event,g)" v-model="g.selected"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                    @change="requiredChanged($event,g)" v-model="g.required"\n                                    ></b-form-checkbox>\n                                <span :title="g.typename" v-html="g.icon"></span><a\n                                    :href="g.link" target="_blank">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title="value.course.fullname"\n                                    @saved="(fd) => g.name = fd.get(\'name\')"\n                                    v-if="g.cmid > 0"\n                                    :cmid="g.cmid"\n                                    :coursectxid="value.course.ctxid"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        '}),Vue.component("r-item-teachergrades",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:!1}},data:function(){return{text:strings.teachercourse,txt:{grading:strings.grading}}},computed:{pendingsubmission:function(){var result=!1;for(var ix in this.value.grades){if(this.value.grades[ix].pendingsubmission){result=!0;break}}return result},filtered_grades:function(){return this.value.grades.filter((function(g){return g.selected}))}},methods:{determine_grading_icon:function(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}},grading_icon:function(grade){return this.determine_grading_icon(this.is_grading_needed(grade))},is_grading_needed:function(grade){return grade.grading?grade.grading.ungraded?"ungraded":grade.grading.completed_pass||grade.grading.completed||grade.grading.completed_fail?Number(grade.grading.completed)+Number(grade.grading.completed_pass)+Number(grade.grading.completed_fail)==Number(grade.grading.students)?"allgraded":"graded":"unsubmitted":"unknown"}},template:'\n        <div>\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in filtered_grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="g.gradinglink"\n                        target="_blank" :title="g.name"><span v-html="g.name"></span></a>\n                        <s-edit-mod\n                            :title="value.fullname"\n                            @saved="(fd) => g.name = fd.get(\'name\')"\n                            v-if="g.cmid > 0"\n                            :cmid="g.cmid"\n                            :coursectxid="value.ctxid"\n                            genericonly></s-edit-mod>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + is_grading_needed(g)"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if=\'g.grading\'\n                        ><i :class="\'r-course-grading fa fa-\'+grading_icon(g)+\' r-graded-\'+is_grading_needed(g)"\n                        :title="txt.grading[is_grading_needed(g)]"></i>\n                    </td>\n                    <td v-if=\'g.grading\'>\n                        <r-completion-bar v-model="g.grading" :width="150" :height="15"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        '}),Vue.component("r-item-teachercompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:function(){return{text:strings.completion}},created:function(){var self=this,stringkeys=[];for(var key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){var i=0;for(var _key in self.text)self.text[_key]=strings[i],i++}))},computed:{completionreport:function(){return"".concat(_config.default.wwwroot,"/report/completion/index.php?course=").concat(this.course.id)}},methods:{hasCompletions:function(){if(this.value.conditions){var _step5,_iterator5=_createForOfIteratorHelper(this.value.conditions);try{for(_iterator5.s();!(_step5=_iterator5.n()).done;){var cgroup=_step5.value;if(cgroup.items&&cgroup.items.length>0)return!0}}catch(err){_iterator5.e(err)}finally{_iterator5.f()}}return!1}},template:"\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        "}),Vue.component("r-grading-bar",{props:{value:{type:Object,default:function(){return{}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:function(){return{text:strings.grading}},computed:{width_unsubmitted:function(){return this.width*this.fraction_unsubmitted()},width_graded:function(){return this.width*this.fraction_graded()},width_ungraded:function(){return this.width*this.fraction_ungraded()},count_unsubmitted:function(){return this.value.students-this.value.graded-this.value.ungraded}},methods:{fraction_unsubmitted:function(){return this.value.students>0?1-(this.value.graded+this.value.ungraded)/this.value.students:1},fraction_graded:function(){return this.value.students>0?this.value.graded/this.value.students:0},fraction_ungraded:function(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-bar",{props:{value:{type:Object,default:function(){return{students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:function(){return{text:strings.completion}},computed:{width_incomplete:function(){return this.width*this.fraction_incomplete()},width_completed:function(){return this.width*this.fraction_completed()},width_completed_pass:function(){return this.width*this.fraction_completed_pass()},width_completed_fail:function(){return this.width*this.fraction_completed_fail()},width_ungraded:function(){return this.width*this.fraction_ungraded()},count_incomplete:function(){return this.value.students-this.value.completed-this.value.completed_pass-this.value.completed_fail-this.value.ungraded}},methods:{fraction_incomplete:function(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed:function(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass:function(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail:function(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded:function(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-circle",{props:{value:{type:Object,default:function(){return{students:10,completed:2,completed_pass:2,completed_fail:2,ungraded:2}}},stroke:{type:Number,default:.2},disabled:{type:Boolean,default:!1},title:{type:String,default:""}},computed:{radius:function(){return 50-50*this.stroke},arcpath_ungraded:function(){return this.arcpath(0,this.fraction_ungraded())},arcpath_completed:function(){var begin=this.fraction_ungraded();return this.arcpath(begin,this.fraction_completed())},arcpath_completed_pass:function(){var begin=this.fraction_ungraded()+this.fraction_completed();return this.arcpath(begin,this.fraction_completed_pass())},arcpath_completed_fail:function(){var begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass();return this.arcpath(begin,this.fraction_completed_fail())},arcpath_incomplete:function(){var begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass()+this.fraction_completed_fail();return this.arcpath(begin,this.fraction_incomplete())}},methods:{arcpath:function(start,end){var r=50-50*this.stroke,t1=2*start*π,Δ=2*end*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[t1,Δ],1.5*π)},fraction_incomplete:function(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed:function(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass:function(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail:function(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded:function(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:'\n            <svg width="1em" height="1em" viewBox="0 0 100 100">\n                <title>{{title}}</title>\n                <circle cx="50" cy="50" :r="radius"\n                    :style="\'stroke-width: \' + (stroke*100)+\'; stroke: #ccc; fill: none;\'"/>\n                <path :d="arcpath_ungraded"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--warning); fill: none;\'"/>\n                <path :d="arcpath_completed"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--info); fill: none;\'"/>\n                <path :d="arcpath_completed_pass"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--success); fill: none;\'"/>\n                <path :d="arcpath_completed_fail"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--danger); fill: none;\'"/>\n\n                <circle v-if="disabled" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--dark);\'"/>\n                <circle v-else-if="value.ungraded > 0" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--warning);\'"/>\n            </g>\n            </svg>\n            '}),Vue.component("r-item-junction",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{}},computed:{completion:function(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-junction r-item-filter completion-\'+completion">\n                <i v-if="value.completion==\'incomplete\'" class="fa fa-circle-o"></i>\n                <i v-else-if="value.completion==\'failed\'" class="fa fa-times-circle"></i>\n                <i v-else-if="value.completion==\'progress\'" class="fa fa-exclamation-circle"></i>\n                <i v-else class="fa fa-check-circle"></i>\n            </div>\n            '}),Vue.component("r-item-finish",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{}},computed:{completion:function(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-finish r-item-filter completion-\'+completion">\n                <i class="fa fa-stop-circle"></i>\n            </div>\n            '}),Vue.component("r-item-start",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{}},computed:{completion:function(){return this.value.completion?this.value.completion:"incomplete"}},created:function(){},methods:{},template:'\n            <div :class="\'r-item-start r-item-filter completion-\'+completion">\n                <i class="fa fa-play-circle"></i>\n            </div>\n            '}),Vue.component("r-item-badge",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:function(){return{text:strings.badge}},computed:{completion:function(){return this.value.badge.issued?"completed":"incomplete"},issued_icon:function(){return!0===this.value.badge.issued?"check":"circle-o"},issuestats:function(){return{students:this.value.badge.studentcount?this.value.badge.studentcount:0,completed:this.value.badge.issuedcount?this.value.badge.issuedcount:0,completed_pass:0,completed_fail:0,ungraded:0}},arcpath_issued:function(){if(this.value.badge.studentcount){var fraction=this.value.badge.issuedcount/this.value.badge.studentcount;return this.arcpath(0,fraction)}return""},arcpath_progress:function(){if(this.value.badge.completion){var fraction=this.value.badge.completion.progress/this.value.badge.completion.count;return this.arcpath(0,fraction)}return""},badgeinprogress:function(){return this.value.badge.issued||this.teachermode||this.value.badge.completion&&this.value.badge.completion.progress>=this.value.badge.completion.count}},methods:{arcpath:function(start,end){var t1=2*start*π,Δ=2*end*π-.01;return(0,_svgarc.svgarcpath)([50,50],[44,44],[t1,Δ],1.5*π)},addTargetBlank:function(html){var m=/^([^<]*\< *a +)(.*)/.exec(html);return m?"".concat(m[1],' target="_blank" ').concat(m[2]):html},completion_icon_rq:function(complete){return complete?"check-square-o":"square-o"},completion_icon:function(complete){return complete?"check-circle":"times-circle"},status:function(complete){return complete?"complete":"incomplete"}},template:'\n            <div :class="\'r-item-badge r-item-filter r-completion-\'+completion" v-b-tooltip.hover :title="value.badge.name">\n                <a v-b-modal="\'r-item-badge-details-\'+value.id"\n                ><svg class="r-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if="teachermode">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_issued"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else-if="value.badge.issued" cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <template v-else-if="value.badge.completion">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_progress"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else cx="50" cy="50" r="46"\n                        stroke-dasharray="6 9"\n                        style="stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"\n                        :style="(badgeinprogress)?\'\':\'opacity: 0.4;\'" />\n                </svg></a>\n\n                <b-modal\n                    :id="\'r-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="(!guestmode)?(value.badge.infolink):undefined" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class="r-course-detail-header-right" v-if="!teachermode">\n                            <div class="r-completion-detail-header">\n                                {{ text[\'completion_\'+completion] }}\n                                <i v-b-popover.hover :class="\'fa fa-\'+issued_icon+\' r-completion-\'+completion"\n                                    :title="text[\'completion_\'+completion]"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if="value.badge.issued" class="list-unstyled pt-1 mb-1 border-grey border-top">\n                                <li><strong><i class="fa fa-calendar-check-o r-completion-complete-pass"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if=\'value.badge.dateexpired\'\n                                ><strong><i class="fa fa-calendar-times-o r-completion-complete"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class="fa fa-share-alt r-completion-complete-pass"></i>\n                                    <a :href="value.badge.issuedlink">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if=\'value.badge.completion && !value.badge.issued\' class="r-item-course-grade-details mb-2">\n                                <tr v-if="value.badge.completion.types.length > 1">\n                                    <th colspan="2"><span v-html="value.badge.completion.title"></span></th>\n                                </tr>\n                                <template v-for=\'cgroup in value.badge.completion.types\' >\n                                    <tr>\n                                        <td colspan="2" v-if="value.badge.completion.types.length > 1"\n                                            ><span v-html="cgroup.title"></span></td>\n                                        <th colspan="2" v-else><span v-html="cgroup.title"></span></th>\n                                    </tr>\n                                    <template v-for=\'ci in cgroup.criteria\'>\n                                        <tr>\n                                            <td class="pl-3"><span v-if=\'guestmode\'><span v-html="ci.title"></span></span>\n                                                <a target=\'_blank\' v-else-if=\'ci.link\' :href=\'ci.link\'\n                                                    ><span v-html="ci.title"></span></a>\n                                                <span v-else><span v-html="ci.title"></span></span>\n                                            <td><i :class="\'fa fa-\'+completion_icon(ci.completed)+\' r-completion-\'+status(ci.completed)"\n                                                :title="text[\'completion_\'+status(ci.completed)]"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if="ci.requirements.length > 1">\n                                            <tr v-for="rq in ci.requirements">\n                                                <td class="pl-4" colspan="2"\n                                                    ><i :class="\'fa fa-\'+completion_icon_rq(rq.completed)+\' r-completion-incomplete\'"\n                                                    :title="text[\'completion_\'+status(rq.completed)]"></i>\n                                                    <span class="t-badge-criteria-requirement"><span v-html="rq.title"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if="!value.badge.active" class="mt-1">\n                                    <td colspan="2" class="alert alert-warning alert-block">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p v-if="(!guestmode)"><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if="teachermode && !guestmode"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model="issuestats" :width="150" :height="15"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '})}};return _exports.default=_default2,_exports.default}));
+define("local_treestudyplan/report-viewer-components",["exports","./simpleline/simpleline","core/str","./util/string-helper","./util/date-helper","core/ajax","core/notification","./util/svgarc","./util/debugger","core/config","./treestudyplan-components"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_treestudyplanComponents){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_config=_interopRequireDefault(_config),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents);const π=Math.PI;var _default={install(Vue){Vue.use(_treestudyplanComponents.default),new _debugger.default("treestudyplan-viewer").warn(_config.default);let lastCaller=null;function scrollCurrentIntoView(handle){const elCurrentHeader=document.querySelector(".r-studyplan-scrollable").querySelector(".s-studyline-header-period.current");!elCurrentHeader||handle&&handle==lastCaller||(lastCaller=handle,elCurrentHeader.scrollIntoView({behavior:"smooth",block:"start",inline:"center"}))}let strings=(0,_stringHelper.load_strings)({invalid:{error:"error"},grading:{ungraded:"ungraded",graded:"graded",allgraded:"allgraded",unsubmitted:"unsubmitted",nogrades:"nogrades",unknown:"unknown"},completion:{completed:"completion_completed",incomplete:"completion_incomplete",completed_pass:"completion_passed",completed_fail:"completion_failed",ungraded:"ungraded",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_one:"aggregation_one",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",aggregation_overall_one:"aggregation_overall_one",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion",view_completion_report:"view_completion_report",completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",completion_not_enabled:"completion_not_enabled"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo",badgeissuedstats:"badgeissuedstats",completion_incomplete:"completion_incomplete_badge",completion_completed:"completion_completed_badge",completioninfo:"completioninfo",badgedisabled:"badgedisabled"},course:{completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",not_enrolled:"not_enrolled"},teachercourse:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",required_goal:"required_goal",student_from_plan_enrolled:"student_from_plan_enrolled",students_from_plan_enrolled:"students_from_plan_enrolled"},pageinfo:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate",description:"studyplan_description",duration:"studyplan_duration"}});function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}const ItemEventBus=new Vue;Vue.component("r-progress-circle",{props:{value:{type:Number},max:{type:Number,default:100},min:{type:Number,default:0},stroke:{type:Number,default:.2},bgopacity:{type:Number,default:.2},title:{type:String,default:""},icon:{type:String}},data:()=>({selectedstudyplan:null}),computed:{range(){return this.max-this.min},fraction(){return this.max-this.min==0?0:(this.value-this.min)/(this.max-this.min)},radius(){return 50-50*this.stroke},arcpath(){let fraction=0;const r=50-50*this.stroke;this.max-this.min!=0&&(fraction=(this.value-this.min)/(this.max-this.min));const Δ=2*fraction*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[0,Δ],1.5*π)}},methods:{},template:'\n            <div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">\n                <svg width="1em" height="1em" viewBox="0 0 100 100"\n                     style="position: absolute;top: 0;left: 0;">\n                    <title>{{title}}</title>\n                    <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"\n                        :style="\'opacity: 1; stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                    <g v-else>\n                        <circle cx="50" cy="50" :r="radius"\n                            :style="\'opacity: \' + bgopacity + \';stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                        <path :d="arcpath"\n                            :style="\'stroke-width: \' + (stroke*100) +\'; stroke: currentcolor; fill: none;\'"/>\n                    </g>\n                </svg>\n                <i v-if=\'icon\' :class="\'fa fa-\'+icon"\n                    style=" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; "\n                ></i>\n            </div>\n            '}),Vue.component("r-report",{props:{value:{type:Array},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({selectedstudyplan:null}),computed:{displayedstudyplan(){return this.selectedstudyplan?this.selectedstudyplan:this.value&&this.value.length>0?this.value[0]:null}},methods:{selectstudyplan(plan){this.selectedstudyplan=plan}},template:"\n            <div class='t-studyplan-container r-report-tabs'>\n                <b-list-group horizontal>\n                    <b-list-group-item\n                        v-for=\"(studyplan,planindex) in value\"\n                        :key=\"studyplan.id\"\n                        :active=\"displayedstudyplan && studyplan.id == displayedstudyplan.id\"\n                        button\n                        @click=\"selectstudyplan(studyplan)\"\n                        >{{studyplan.name}}</b-list-group-item>\n                </b-list-group>\n                <r-studyplan v-if='displayedstudyplan' v-model='displayedstudyplan' :guestmode='guestmode' :teachermode='teachermode'></r-studyplan>\n            </div>\n            "}),Vue.component("r-studyplan",{props:{value:{type:Object},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({selectedpageindex:0,text:strings.pageinfo}),computed:{selectedpage(){return this.value.pages[this.selectedpageindex]}},methods:{pageduration:page=>(0,_dateHelper.format_date)(page.startdate,!1)+" - "+(0,_dateHelper.format_date)(page.enddate,!1),columns:page=>1+2*page.periods,columns_stylerule(page){let s="grid-template-columns: var(--studyplan-filter-width)";for(let i=0;i<page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},countLineLayers(line,page){let maxLayer=-1;for(let i=0;i<=page.periods;i++){line.slots[i];for(const ix in line.slots[i].courses){const item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(const ix in line.slots[i].filters){const item=line.slots[i].filters[ix];item.layer>maxLayer&&(maxLayer=item.layer)}}return maxLayer>=0?maxLayer+1:1},showslot(page,line,index,layeridx,type){const forGradable="gradable"==type,periods=page.periods;let show=!0;for(let i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){const list=line.slots[index-i].courses;for(const ix in list){const item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},selectedpageChanged(newTabIndex,prevTabIndex){this.value.pages[newTabIndex];scrollCurrentIntoView(this.value.id)}},mounted(){scrollCurrentIntoView(this.value.id)},updated(){scrollCurrentIntoView(this.value.id),ItemEventBus.$emit("lineHeightChange",null)},template:'\n            <div>\n            <b-card no-body>\n                <b-tabs \n                    v-model=\'selectedpageindex\' \n                    @activate-tab=\'selectedpageChanged\'\n                    content-class="mt-1">\n                    <b-tab\n                        v-for="(page,pageindex) in value.pages"\n                        :key="page.id"\n                        :title-item-class="\'s-studyplanpage-tab \'+ page.timing"\n                        ><template #title>\n                            <span v-b-tooltip.hover :title=\'page.fullname\'>{{page.shortname}}</span>\n                            <a href="#" v-b-modal="\'studyplanpage-info-\'+page.id" variant=\'info\'\n                             v-if=\'pageindex == selectedpageindex\'\n                            ><i class=\'fa fa-info-circle\'></i></a>\n                        </template>\n                        \n                        <b-modal\n                            :id="\'studyplanpage-info-\'+page.id"\n                            scrollable\n                            ok-only\n                            >\n                            <template #modal-title>\n                                {{page.fullname}}\n                            </template>\n                            <b-container>\n                                <b-row>\n                                    <b-col cols="4"><b>{{ text.shortname}}</b></b-col>\n                                    <b-col cols="8">\n                                        {{ page.shortname }}\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="4"><b>{{ text.duration}}</b></b-col>\n                                    <b-col cols="8">\n                                        {{ pageduration(page) }}\n                                    </b-col>\n                                </b-row>\n                                <b-row v-if="page.description">\n                                    <b-col cols="12"><b>{{ text.description}}</b></b-col>\n                                </b-row>\n                                <b-row v-if="page.description">\n                                    <b-col cols="12">\n                                        <span v-html="page.description"></span>\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <div v-if="page.studylines.length > 0" class=\'r-studyplan-content\'>\n                            \x3c!-- First paint the headings--\x3e\n                            <div class=\'r-studyplan-headings\'\n                                ><s-studyline-header-heading :identifier="Number(page.id)"></s-studyline-header-heading>\n                                <r-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                                    :key="line.id"\n                                    v-model="page.studylines[lineindex]"\n                                    :layers=\'countLineLayers(page,line)+1\'\n                                    :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                            + ((lineindex==0)?\' first \':\' \')\n                                            + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                                ></r-studyline-heading\n                            ></div>\n                            \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                            <div class="r-studyplan-scrollable" >\n                                <div class="r-studyplan-timeline" :style="columns_stylerule(page)">\n                                \x3c!-- add period information --\x3e\n                                <template v-for="(n,index) in (page.periods+1)">\n                                    <s-studyline-header-period\n                                        v-if="index > 0"\n                                        v-model="page.perioddesc[index-1]"\n                                        :identifier="Number(page.id)"\n                                        ></s-studyline-header-period>\n                                    <div class="s-studyline-header-filter"></div>\n                                </template>\n\n                                \x3c!-- Line by line add the items --\x3e\n                                \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                                <template v-for="(line,lineindex) in page.studylines"\n                                    ><template v-for="(layernr,layeridx) in countLineLayers(page,line)"\n                                        ><template v-for="(n,index) in (page.periods+1)"\n                                            ><r-studyline-slot\n                                                v-if="index > 0 && showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'gradable\'\n                                                v-model="line.slots[index].courses"\n                                                :key="\'c-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                :slotindex="index"\n                                                :line="line"\n                                                :plan="value"\n                                                :page="page"\n                                                :period="page.perioddesc[index-1]"\n                                                :guestmode=\'guestmode\'\n                                                :teachermode=\'teachermode\'\n                                                :layer="layeridx"\n                                                :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                        + ((lineindex==0 && layernr==1)?\' first \':\' \')\n                                                        + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if="showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'filter\'\n                                                v-model="line.slots[index].filters"\n                                                :teachermode=\'teachermode\'\n                                                :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                :slotindex="index"\n                                                :line="line"\n                                                :plan="value"\n                                                :page="page"\n                                                :layer="layeridx"\n                                                :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                        + ((lineindex==0 && layernr==1)?\' first \':\'\')\n                                                        + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                        + ((index==page.periods)?\' rightmost\':\'\')"\n                                                >\n                                            </r-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div\n                            ></div\n                        ></div>\n                    </b-tab>\n                </b-tabs>\n            </b-card>\n            </div>\n            '}),Vue.component("r-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange(lineid){if(this.$refs.mainEl&&(lineid==this.value.id||null===lineid)){const items=document.querySelectorAll(`.r-studyline-slot-0[data-studyline='${this.value.id}']`);let heightSum=0;items.forEach((el=>{const height=el.getBoundingClientRect().height;heightSum+=height}));const heightStyle=`${heightSum}px`;this.$refs.mainEl.style.height=heightStyle}}},template:'\n            <div class="r-studyline r-studyline-heading "\n                :data-studyline="value.id" ref="mainEl"\n                ><div class="r-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="r-studyline-title">\n                    <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("r-studyline-slot",{props:{value:{type:Array,default:()=>[]},type:{type:String,default:"gradable"},slotindex:{type:Number,default:0},line:{type:Object,default:()=>null},layer:{type:Number},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1},period:{type:Object,default:()=>null}},mounted(){const self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.sizeElement){const height=self.$refs.sizeElement.getBoundingClientRect().height;ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,height)}})).observe(self.$refs.sizeElement))},computed:{item(){for(const ix in this.value){const itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},current(){if(this.period&&this.period.startdate&&this.period.enddate){const now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss(){if(this.item&&this.item.span>1){return`width: 100%; grid-column: span ${2*this.item.span-1};`}return""}},data:()=>({}),methods:{},template:"\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            "}),Vue.component("r-item",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:()=>null},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({lines:[]}),methods:{lineColor(){if(this.teachermode)return"var(--gray)";switch(this.value.completion){default:return"var(--gray)";case"failed":return"var(--danger)";case"progress":return"var(--warning)";case"completed":return"var(--success)";case"good":return"var(--info)";case"excellent":return"var(--blue)"}},redrawLine(conn){let lineColor=this.lineColor(),lineinfo=this.lines[conn.to_id];lineinfo?lineinfo.line&&(lineinfo.line.remove(),lineinfo.line=void 0):(lineinfo={},this.lines[conn.to_id]=lineinfo);let start=document.getElementById("studyitem-"+conn.from_id),end=document.getElementById("studyitem-"+conn.to_id);null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(lineinfo.line=new _simpleline.SimpleLine(start,end,{color:lineColor,gravity:{start:1.3,end:1.3}}))},redrawLines(){for(let ix in this.lines){let lineinfo=this.lines[ix];lineinfo&&lineinfo.line&&(lineinfo.line.remove(),lineinfo.line=void 0)}for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onWindowResize(){this.redrawLines()}},computed:{hasConnectionsOut(){return!["finish"].includes(this.value.type)},hasConnectionsIn(){return!["start"].includes(this.value.type)},hasContext(){return["start","junction","finish"].includes(this.value.type)}},created(){},mounted(){this.redrawLines(),setTimeout((()=>{this.redrawLines()}),50),window.addEventListener("resize",this.onWindowResize)},beforeDestroy(){for(let i in this.value.connections.out){let conn=this.value.connections.out[i],lineinfo=this.lines[conn.to_id];lineinfo&&lineinfo.line&&(lineinfo.lineElm?(lineinfo.lineElm.parentNode.removeChild(lineinfo.lineElm),lineinfo.lineElm=void 0):lineinfo.line.remove(),lineinfo.line=void 0)}window.removeEventListener("resize",this.onWindowResize)},beforeUpdate(){},updated(){this.dummy||this.redrawLines()},template:'\n            <div class="r-item-base" :id="\'studyitem-\'+value.id" :data-x=\'value.type\'>\n                <r-item-competency    v-if="value.type == \'competency\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-competency>\n                <r-item-course        v-if="value.type == \'course\' && !teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-course>\n                <r-item-teachercourse v-if="value.type == \'course\' && teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-teachercourse>\n                <r-item-junction      v-if="value.type == \'junction\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-junction>\n                <r-item-start         v-if="value.type == \'start\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-start>\n                <r-item-finish        v-if="value.type == \'finish\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-finish>\n                <r-item-badge         v-if="value.type == \'badge\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-badge>\n                <r-item-invalid       v-if="value.type == \'invalid\' && teachermode"\n                    v-model="value" ></r-item-invalid>\n            </div>\n            '}),Vue.component("r-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:()=>({text:strings.invalid}),methods:{},template:'\n            <div class="r-item-invalid">\n            <b-card no-body class="r-item-invalid">\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="r-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-course",{props:{value:{type:Object,default:()=>null},guestmode:{type:Boolean,default:()=>!1},teachermode:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null}},data:()=>({text:strings.course}),computed:{startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created(){},methods:{completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}},circle_icon(completion){switch(completion){default:return null;case"failed":return"times";case"progress":return"exclamation";case"completed":case"good":case"excellent":return"check"}}},template:"\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            "}),Vue.component("r-item-studentgrades",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1}},data:()=>({text:strings.course}),computed:{pendingsubmission(){let result=!1;for(const ix in this.value.course.grades){if(this.value.course.grades[ix].pendingsubmission){result=!0;break}}return result},useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades}},methods:{completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in value.course.grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="(!guestmode)?(g.link):undefined" target="_blank"><span v-html="g.name"></span></a>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + g.completion"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class="\' r-completion-\'+g.completion">{{g.grade}}</span></td>\n                    <td><i :class="\'fa fa-\'+completion_icon(g.completion)+\' r-completion-\'+g.completion"\n                        :title="text[\'completion_\'+g.completion]"></i>\n                        <i v-if=\'g.pendingsubmission\' :title="text[\'completion_pending\']"\n                            class="r-pendingsubmission fa fa-clock-o"></i></td>\n                    <td v-if="g.feedback">\n                        <a  v-b-modal="\'r-grade-feedback-\'+g.id"\n                            href="#"\n                        >{{ text["view_feedback"]}}</a>\n                        <b-modal\n                            :id="\'r-grade-feedback-\'+g.id"\n                            size="sm"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class="fa fa-graduation-cap"></i>{{ value.course.fullname }}</h2><br>\n                                <span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span>{{g.name}}\n                            </template>\n                            <span v-html="g.feedback"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            '}),Vue.component("r-item-studentcompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){},computed:{},methods:{completion_icon(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:cgroup=>cgroup.completion?"completed":"incomplete",hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},requirementHTML(requirements){const rqs=requirements.split(/, */);let html="";for(const ix in rqs){html+=`${rqs[ix]}<br>`}return html},addTargetBlank(html){const m=/^([^<]*\< *a +)(.*)/.exec(html);return m?`${m[1]} target="_blank" ${m[2]}`:html}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-if="hasCompletions">\n                    <td colspan=\'2\'\n                        ><span v-if="value.conditions.length <= 1">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if="value.aggregation == \'all\'">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan=\'2\'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for=\'cgroup in value.conditions\' v-if=\'value.enabled && value.tracked\'>\n                    <tr>\n                        <th colspan=\'2\'><span v-if="cgroup.items.length > 1"\n                        ><span v-if="cgroup.aggregation == \'all\'">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if="cgroup.progress < cgroup.count"\n                                :value=\'cgroup.progress\'\n                                :max=\'cgroup.count\'\n                                :class="\'r-completion-\'+cgroup.status"\n                                :title="text[\'completion_\'+cgroup.status]"\n                            ></r-progress-circle>\n                            <i v-else :class="\'fa fa-check-circle r-completion-\'+cgroup.status"></i>\n                            </th>\n                    </tr>\n                    <tr v-for=\'ci in cgroup.items\'>\n                        <td><span v-if=\'guestmode\'>{{ci.title}}</span>\n                            <span v-else v-html=\'addTargetBlank(ci.details.criteria)\'></span>\n                            <a href="#" v-b-tooltip.click.hover.right.html="{ customClass: \'r-tooltip \' + ci.status}"\n                                :title="requirementHTML(ci.details.requirement)"\n                                class="text-primary"><i  v-if="ci.details.requirement"\n                                class=\'fa fa-question-circle\'\n                                ></i></a>\n                        <td\n                            ><span :class="\' r-completion-\'+ci.status">{{ci.grade}}</span>\n                            <span v-if="ci.warning"\n                                ><i class="text-primary fa fa-exclamation-triangle"\n                                    v-b-tooltip.hover.right.click="{ customClass: \'r-tooltip info\' }"\n                                    :title="ci.warning"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class="\'fa fa-\'+completion_icon(ci.status)+\' r-completion-\'+ci.status"\n                            :title="text[\'completion_\'+ci.status]"></i>\n                            <i v-if=\'ci.pending\' :title="text[\'completion_pending\']"\n                                class="r-pendingsubmission fa fa-clock-o"></i>\n                        </td>\n                        <td v-if="ci.feedback">\n                            <a  v-b-modal="\'r-grade-feedback-\'+ci.id"\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-grade-feedback-\'+ci.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-graduation-cap"></i>{{ course.fullname }}</h2><br>\n                                    <span class="r-activity-icon" :title="ci.typename" v-html="ci.icon"></span>{{ci.name}}\n                                </template>\n                                <span v-html="ci.feedback"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if=\'! value.enabled\'>\n                        <td colspan=\'4\'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan=\'4\'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            '}),Vue.component("r-item-teachercourse",{props:{value:{type:Object,default:()=>null},guestmode:{type:Boolean,default:()=>!1},teachermode:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null}},data:()=>({text:strings.teachercourse,txt:{grading:strings.grading}}),computed:{course_grading_needed(){return this.course_grading_state()},course_grading_icon(){return this.determine_grading_icon(this.course_grading_state())},filtered_grades(){return this.value.course.grades.filter((g=>g.selected))},useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},isCompletable(){let completable=!1;return this.value.course.completion?this.value.course.completion.conditions.length>0&&(completable=!0):this.value.course.grades&&this.value.course.grades.length>0&&(completable=!0),completable},progress_circle(){const status={students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0};if(this.value.course.completion)for(const cond of this.value.course.completion.conditions)for(const itm of cond.items)itm.progress&&(status.students+=itm.progress.students,status.completed+=itm.progress.completed,status.completed_pass+=itm.progress.completed_pass,status.completed_fail+=itm.progress.completed_fail,status.ungraded+=itm.progress.ungraded);else if(this.value.course.grades)for(const g of this.value.course.grades)g.grading&&(status.students+=g.grading.students,status.completed+=g.grading.completed,status.completed_pass+=g.grading.completed_pass,status.completed_fail+=g.grading.completed_fail,status.ungraded+=g.grading.ungraded);return status},startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created(){},methods:{course_grading_state(){let ungraded=0,unknown=0,graded=0,allgraded=0;const grades=this.filtered_grades;if(!Array.isArray(grades)||0==grades)return"nogrades";for(const ix in grades){const grade=grades[ix];grade.grading?Number(grade.grading.ungraded)>0?ungraded++:Number(grade.grading.graded)>0&&(Number(grade.grading.graded)==Number(grade.grading.students)?allgraded++:graded++):unknown=!0}return ungraded>0?"ungraded":unknown?"unknown":graded?"graded":allgraded?"allgraded":"unsubmitted"},determine_grading_icon(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}}},template:'\n            <div  :class="\'r-item-competency \'+ (value.course.amteacher?\'r-course-am-teacher\':\'\')">\n            <b-card no-body>\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'r-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body>\n                            <a  v-b-modal="\'r-item-course-details-\'+value.id"\n                                :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):\'#\'"\n                                @click.prevent.stop=\'\'\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class="r-course-graded" :disabled="!isCompletable"\n                                v-model="progress_circle"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if="true"\n                    :id="\'r-item-course-details-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):undefined" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model="value"\n                                    v-if="value.course.grades && value.course.grades.length > 0"\n                                    :useRequiredGrades="useRequiredGrades"\n                                    :plan="plan"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if=\'!!value.course.completion && value.course.amteacher\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                    :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(" / ") }}\n                            <div class=\'mt-1 text-info\'>\n                            <span v-if=\'value.course.numenrolled != 1\'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div class="r-completion-detail-header">\n                                <r-completion-circle class="r-progress-circle-popup" :disabled="!isCompletable"\n                                    v-model="progress_circle"></r-completion-circle>\n                            </div>\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{ text[\'coursetiming_\'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value.course\'\n                        :useRequiredGrades="useRequiredGrades"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-teacher-gradepicker",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:()=>null}},data:()=>({text:strings.teachercourse}),computed:{},methods:{includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},template:'\n            <a  v-if="value.course.canselectgradables" href=\'#\'\n                                        v-b-modal="\'r-item-course-config-\'+value.id"\n                                        @click.prevent.stop=\'\'\n                                        ><i class=\'fa fa-cog\'></i>\n                <b-modal v-if=\'value.course.canselectgradables\'\n                    :id="\'r-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.displayname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label="text.select_grades"\n                        ><ul class="t-item-module-children">\n                            <li class="t-item-course-gradeinfo">\n                                <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                                ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                            </li>\n                            <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                                <b-form-checkbox inline\n                                    @change="includeChanged($event,g)" v-model="g.selected"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                    @change="requiredChanged($event,g)" v-model="g.required"\n                                    ></b-form-checkbox>\n                                <span :title="g.typename" v-html="g.icon"></span><a\n                                    :href="g.link" target="_blank">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title="value.course.fullname"\n                                    @saved="(fd) => g.name = fd.get(\'name\')"\n                                    v-if="g.cmid > 0"\n                                    :cmid="g.cmid"\n                                    :coursectxid="value.course.ctxid"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        '}),Vue.component("r-item-teachergrades",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:!1}},data:()=>({text:strings.teachercourse,txt:{grading:strings.grading}}),computed:{pendingsubmission(){let result=!1;for(const ix in this.value.grades){if(this.value.grades[ix].pendingsubmission){result=!0;break}}return result},filtered_grades(){return this.value.grades.filter((g=>g.selected))}},methods:{determine_grading_icon(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}},grading_icon(grade){return this.determine_grading_icon(this.is_grading_needed(grade))},is_grading_needed:grade=>grade.grading?grade.grading.ungraded?"ungraded":grade.grading.completed_pass||grade.grading.completed||grade.grading.completed_fail?Number(grade.grading.completed)+Number(grade.grading.completed_pass)+Number(grade.grading.completed_fail)==Number(grade.grading.students)?"allgraded":"graded":"unsubmitted":"unknown"},template:'\n        <div>\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in filtered_grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="g.gradinglink"\n                        target="_blank" :title="g.name"><span v-html="g.name"></span></a>\n                        <s-edit-mod\n                            :title="value.fullname"\n                            @saved="(fd) => g.name = fd.get(\'name\')"\n                            v-if="g.cmid > 0"\n                            :cmid="g.cmid"\n                            :coursectxid="value.ctxid"\n                            genericonly></s-edit-mod>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + is_grading_needed(g)"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if=\'g.grading\'\n                        ><i :class="\'r-course-grading fa fa-\'+grading_icon(g)+\' r-graded-\'+is_grading_needed(g)"\n                        :title="txt.grading[is_grading_needed(g)]"></i>\n                    </td>\n                    <td v-if=\'g.grading\'>\n                        <r-completion-bar v-model="g.grading" :width="150" :height="15"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        '}),Vue.component("r-item-teachercompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){const self=this;let stringkeys=[];for(const key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){let i=0;for(const key in self.text)self.text[key]=strings[i],i++}))},computed:{completionreport(){return`${_config.default.wwwroot}/report/completion/index.php?course=${this.course.id}`}},methods:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1}},template:"\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        "}),Vue.component("r-grading-bar",{props:{value:{type:Object,default:function(){return{}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:()=>({text:strings.grading}),computed:{width_unsubmitted(){return this.width*this.fraction_unsubmitted()},width_graded(){return this.width*this.fraction_graded()},width_ungraded(){return this.width*this.fraction_ungraded()},count_unsubmitted(){return this.value.students-this.value.graded-this.value.ungraded}},methods:{fraction_unsubmitted(){return this.value.students>0?1-(this.value.graded+this.value.ungraded)/this.value.students:1},fraction_graded(){return this.value.students>0?this.value.graded/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-bar",{props:{value:{type:Object,default:function(){return{students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:()=>({text:strings.completion}),computed:{width_incomplete(){return this.width*this.fraction_incomplete()},width_completed(){return this.width*this.fraction_completed()},width_completed_pass(){return this.width*this.fraction_completed_pass()},width_completed_fail(){return this.width*this.fraction_completed_fail()},width_ungraded(){return this.width*this.fraction_ungraded()},count_incomplete(){return this.value.students-this.value.completed-this.value.completed_pass-this.value.completed_fail-this.value.ungraded}},methods:{fraction_incomplete(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-circle",{props:{value:{type:Object,default:function(){return{students:10,completed:2,completed_pass:2,completed_fail:2,ungraded:2}}},stroke:{type:Number,default:.2},disabled:{type:Boolean,default:!1},title:{type:String,default:""}},computed:{radius(){return 50-50*this.stroke},arcpath_ungraded(){return this.arcpath(0,this.fraction_ungraded())},arcpath_completed(){const begin=this.fraction_ungraded();return this.arcpath(begin,this.fraction_completed())},arcpath_completed_pass(){const begin=this.fraction_ungraded()+this.fraction_completed();return this.arcpath(begin,this.fraction_completed_pass())},arcpath_completed_fail(){const begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass();return this.arcpath(begin,this.fraction_completed_fail())},arcpath_incomplete(){const begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass()+this.fraction_completed_fail();return this.arcpath(begin,this.fraction_incomplete())}},methods:{arcpath(start,end){const r=50-50*this.stroke,t1=2*start*π,Δ=2*end*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[t1,Δ],1.5*π)},fraction_incomplete(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:'\n            <svg width="1em" height="1em" viewBox="0 0 100 100">\n                <title>{{title}}</title>\n                <circle cx="50" cy="50" :r="radius"\n                    :style="\'stroke-width: \' + (stroke*100)+\'; stroke: #ccc; fill: none;\'"/>\n                <path :d="arcpath_ungraded"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--warning); fill: none;\'"/>\n                <path :d="arcpath_completed"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--info); fill: none;\'"/>\n                <path :d="arcpath_completed_pass"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--success); fill: none;\'"/>\n                <path :d="arcpath_completed_fail"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--danger); fill: none;\'"/>\n\n                <circle v-if="disabled" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--dark);\'"/>\n                <circle v-else-if="value.ungraded > 0" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--warning);\'"/>\n            </g>\n            </svg>\n            '}),Vue.component("r-item-junction",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-junction r-item-filter completion-\'+completion">\n                <i v-if="value.completion==\'incomplete\'" class="fa fa-circle-o"></i>\n                <i v-else-if="value.completion==\'failed\'" class="fa fa-times-circle"></i>\n                <i v-else-if="value.completion==\'progress\'" class="fa fa-exclamation-circle"></i>\n                <i v-else class="fa fa-check-circle"></i>\n            </div>\n            '}),Vue.component("r-item-finish",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-finish r-item-filter completion-\'+completion">\n                <i class="fa fa-stop-circle"></i>\n            </div>\n            '}),Vue.component("r-item-start",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},created(){},methods:{},template:'\n            <div :class="\'r-item-start r-item-filter completion-\'+completion">\n                <i class="fa fa-play-circle"></i>\n            </div>\n            '}),Vue.component("r-item-badge",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({text:strings.badge}),computed:{completion(){return this.value.badge.issued?"completed":"incomplete"},issued_icon(){return!0===this.value.badge.issued?"check":"circle-o"},issuestats(){return{students:this.value.badge.studentcount?this.value.badge.studentcount:0,completed:this.value.badge.issuedcount?this.value.badge.issuedcount:0,completed_pass:0,completed_fail:0,ungraded:0}},arcpath_issued(){if(this.value.badge.studentcount){const fraction=this.value.badge.issuedcount/this.value.badge.studentcount;return this.arcpath(0,fraction)}return""},arcpath_progress(){if(this.value.badge.completion){const fraction=this.value.badge.completion.progress/this.value.badge.completion.count;return this.arcpath(0,fraction)}return""},badgeinprogress(){return this.value.badge.issued||this.teachermode||this.value.badge.completion&&this.value.badge.completion.progress>=this.value.badge.completion.count}},methods:{arcpath(start,end){const t1=2*start*π,Δ=2*end*π-.01;return(0,_svgarc.svgarcpath)([50,50],[44,44],[t1,Δ],1.5*π)},addTargetBlank(html){const m=/^([^<]*\< *a +)(.*)/.exec(html);return m?`${m[1]} target="_blank" ${m[2]}`:html},completion_icon_rq:complete=>complete?"check-square-o":"square-o",completion_icon:complete=>complete?"check-circle":"times-circle",status:complete=>complete?"complete":"incomplete"},template:'\n            <div :class="\'r-item-badge r-item-filter r-completion-\'+completion" v-b-tooltip.hover :title="value.badge.name">\n                <a v-b-modal="\'r-item-badge-details-\'+value.id"\n                ><svg class="r-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if="teachermode">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_issued"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else-if="value.badge.issued" cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <template v-else-if="value.badge.completion">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_progress"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else cx="50" cy="50" r="46"\n                        stroke-dasharray="6 9"\n                        style="stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"\n                        :style="(badgeinprogress)?\'\':\'opacity: 0.4;\'" />\n                </svg></a>\n\n                <b-modal\n                    :id="\'r-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="(!guestmode)?(value.badge.infolink):undefined" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class="r-course-detail-header-right" v-if="!teachermode">\n                            <div class="r-completion-detail-header">\n                                {{ text[\'completion_\'+completion] }}\n                                <i v-b-popover.hover :class="\'fa fa-\'+issued_icon+\' r-completion-\'+completion"\n                                    :title="text[\'completion_\'+completion]"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if="value.badge.issued" class="list-unstyled pt-1 mb-1 border-grey border-top">\n                                <li><strong><i class="fa fa-calendar-check-o r-completion-complete-pass"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if=\'value.badge.dateexpired\'\n                                ><strong><i class="fa fa-calendar-times-o r-completion-complete"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class="fa fa-share-alt r-completion-complete-pass"></i>\n                                    <a :href="value.badge.issuedlink">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if=\'value.badge.completion && !value.badge.issued\' class="r-item-course-grade-details mb-2">\n                                <tr v-if="value.badge.completion.types.length > 1">\n                                    <th colspan="2"><span v-html="value.badge.completion.title"></span></th>\n                                </tr>\n                                <template v-for=\'cgroup in value.badge.completion.types\' >\n                                    <tr>\n                                        <td colspan="2" v-if="value.badge.completion.types.length > 1"\n                                            ><span v-html="cgroup.title"></span></td>\n                                        <th colspan="2" v-else><span v-html="cgroup.title"></span></th>\n                                    </tr>\n                                    <template v-for=\'ci in cgroup.criteria\'>\n                                        <tr>\n                                            <td class="pl-3"><span v-if=\'guestmode\'><span v-html="ci.title"></span></span>\n                                                <a target=\'_blank\' v-else-if=\'ci.link\' :href=\'ci.link\'\n                                                    ><span v-html="ci.title"></span></a>\n                                                <span v-else><span v-html="ci.title"></span></span>\n                                            <td><i :class="\'fa fa-\'+completion_icon(ci.completed)+\' r-completion-\'+status(ci.completed)"\n                                                :title="text[\'completion_\'+status(ci.completed)]"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if="ci.requirements.length > 1">\n                                            <tr v-for="rq in ci.requirements">\n                                                <td class="pl-4" colspan="2"\n                                                    ><i :class="\'fa fa-\'+completion_icon_rq(rq.completed)+\' r-completion-incomplete\'"\n                                                    :title="text[\'completion_\'+status(rq.completed)]"></i>\n                                                    <span class="t-badge-criteria-requirement"><span v-html="rq.title"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if="!value.badge.active" class="mt-1">\n                                    <td colspan="2" class="alert alert-warning alert-block">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p v-if="(!guestmode)"><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if="teachermode && !guestmode"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model="issuestats" :width="150" :height="15"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=report-viewer-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/report-viewer-components.min.js.map b/amd/build/report-viewer-components.min.js.map
index 2f03959..bee8b1d 100644
--- a/amd/build/report-viewer-components.min.js.map
+++ b/amd/build/report-viewer-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"report-viewer-components.min.js","sources":["../src/report-viewer-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from './simpleline/simpleline';\nimport {get_strings} from 'core/str';\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {svgarcpath} from './util/svgarc';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\n\nimport TSComponents from './treestudyplan-components';\n\n// Make π available as a constant\nconst π = Math.PI;\n// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction\nconst LINE_GRAVITY = 1.3;\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        let debug = new Debugger(\"treestudyplan-viewer\");\n\n        debug.warn(Config);\n        let lastCaller = null;\n        /**\n         * Scroll current period into view\n         * @param {*} handle A key to pass so subsequent calls with the same key won't trigger (always triggers when null or undefined)\n         */\n        function scrollCurrentIntoView(handle){\n            const elScrollContainer = document.querySelector(\".r-studyplan-scrollable\");\n            const elCurrentHeader = elScrollContainer.querySelector(\".s-studyline-header-period.current\");\n\n            if(elCurrentHeader && ((!handle) || (handle != lastCaller))){\n                lastCaller = handle;\n                elCurrentHeader.scrollIntoView({\n                    behavior: \"smooth\",\n                    block: \"start\",\n                    inline: \"center\",\n                });\n            }\n        }\n\n        let strings = load_strings({\n            invalid: {\n                error: 'error',\n            },\n            grading: {\n                ungraded: \"ungraded\",\n                graded: \"graded\",\n                allgraded: \"allgraded\",\n                unsubmitted: \"unsubmitted\",\n                nogrades: \"nogrades\",\n                unknown: \"unknown\",\n            },\n            completion: {\n                completed: \"completion_completed\",\n                incomplete: \"completion_incomplete\",\n                completed_pass: \"completion_passed\",\n                completed_fail: \"completion_failed\",\n                ungraded: \"ungraded\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_one: \"aggregation_one\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                aggregation_overall_one: \"aggregation_overall_one\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n                view_completion_report: \"view_completion_report\",\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                completion_not_enabled: \"completion_not_enabled\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n                badgeissuedstats: \"badgeissuedstats\",\n                completion_incomplete: \"completion_incomplete_badge\",\n                completion_completed: \"completion_completed_badge\",\n                completioninfo: \"completioninfo\",\n                badgedisabled: \"badgedisabled\"\n            },\n            course: {\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                not_enrolled: \"not_enrolled\",\n            },\n            teachercourse: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                required_goal: \"required_goal\",\n                student_from_plan_enrolled: \"student_from_plan_enrolled\",\n                students_from_plan_enrolled: \"students_from_plan_enrolled\",\n            }\n\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('r-progress-circle',{\n            props: {\n                value: {\n                    type: Number,\n                },\n                max: {\n                    type: Number,\n                    default: 100,\n                },\n                min: {\n                    type: Number,\n                    default: 0,\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                bgopacity: {\n                    type: Number,\n                    default: 0.2,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                },\n                icon: {\n                    type: String,\n                }\n\n            },\n            data() {\n                return {\n                    selectedstudyplan: null,\n                };\n            },\n            computed: {\n                range() {\n                    return this.max - this.min;\n                },\n                fraction(){\n                    if(this.max - this.min == 0){\n                        return 0;\n                        // 0 size is always empty :)\n                    } else {\n                        return (this.value - this.min)/(this.max - this.min);\n                    }\n                },\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n                arcpath() {\n                    let fraction = 0;\n                    const r = 50 - (50*this.stroke);\n                    if(this.max - this.min != 0){\n                        fraction = (this.value - this.min)/(this.max - this.min);\n                    }\n\n                    const Δ = fraction * 2*π;\n                    return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);\n                },\n            },\n            methods: {\n            },\n            template: `\n            <div style=\"display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;\">\n                <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\"\n                     style=\"position: absolute;top: 0;left: 0;\">\n                    <title>{{title}}</title>\n                    <circle v-if=\"fraction >= 1.0\" cx=\"50\" cy=\"50\" :r=\"radius\"\n                        :style=\"'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                    <g v-else>\n                        <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                            :style=\"'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                        <path :d=\"arcpath\"\n                            :style=\"'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'\"/>\n                    </g>\n                </svg>\n                <i v-if='icon' :class=\"'fa fa-'+icon\"\n                    style=\" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; \"\n                ></i>\n            </div>\n            `,\n        });\n\n\n        Vue.component('r-report', {\n            props: {\n                value: {\n                    type: Array,\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    selectedstudyplan: null,\n                };\n            },\n            computed: {\n                displayedstudyplan(){\n                    if(this.selectedstudyplan){\n                        return this.selectedstudyplan;\n                    } else if(this.value && this.value.length > 0){\n                        return this.value[0];\n                    } else {\n                        return null;\n                    }\n                }\n            },\n            methods: {\n                selectstudyplan(plan) {\n                    this.selectedstudyplan = plan;\n                },\n            },\n            template: `\n            <div class='t-studyplan-container r-report-tabs'>\n                <b-list-group horizontal>\n                    <b-list-group-item\n                        v-for=\"(studyplan,planindex) in value\"\n                        :key=\"studyplan.id\"\n                        :active=\"displayedstudyplan && studyplan.id == displayedstudyplan.id\"\n                        button\n                        @click=\"selectstudyplan(studyplan)\"\n                        >{{studyplan.name}}</b-list-group-item>\n                </b-list-group>\n                <r-studyplan v-if='displayedstudyplan' v-model='displayedstudyplan' :guestmode='guestmode' :teachermode='teachermode'></r-studyplan>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyplan', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                columns() {\n                    return 1+ (this.page.periods * 2);\n                },\n                columns_stylerule() {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<this.page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                page() {\n                    //FIXME: Replace this when actual page management is implemented\n                    return this.value.pages[0];\n                },\n            },\n            methods: {\n                countLineLayers(line){\n                    let maxLayer = -1;\n                    for(let i = 0; i <= this.page.periods; i++){\n                        const slot = line.slots[i];\n                        // Determine the amount of used layers in a studyline slit\n                        for(const ix in line.slots[i].courses){\n                            const item = line.slots[i].courses[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                        for(const ix in line.slots[i].filters){\n                            const item = line.slots[i].filters[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                    }\n                    return (maxLayer >= 0)?(maxLayer+1):1;\n                },\n                showslot(line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = this.page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                }\n            },\n            mounted() {\n                scrollCurrentIntoView(this.value.id);\n            },\n            updated() {\n                scrollCurrentIntoView(this.value.id);\n                ItemEventBus.$emit('lineHeightChange', null);\n\n            },\n            template: `\n                <div class='r-studyplan-content'>\n                    <!-- First paint the headings-->\n                    <div class='r-studyplan-headings'\n                        ><s-studyline-header-heading></s-studyline-header-heading>\n                        <r-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                            :key=\"line.id\"\n                            v-model=\"page.studylines[lineindex]\"\n                            :layers='countLineLayers(line)+1'\n                            :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                    + ((lineindex==0)?' first ':' ')\n                                    + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                        ></r-studyline-heading\n                    ></div>\n                    <!-- Next, paint all the cells in the scrollable -->\n                    <div class=\"r-studyplan-scrollable\" >\n                        <div class=\"r-studyplan-timeline\" :style=\"columns_stylerule\">\n                        <!-- add period information -->\n                        <template v-for=\"(n,index) in (page.periods+1)\">\n                            <s-studyline-header-period\n                                v-if=\"index > 0\"\n                                v-model=\"page.perioddesc[index-1]\"\n                                ></s-studyline-header-period>\n                            <div class=\"s-studyline-header-filter\"></div>\n                        </template>\n\n                        <!-- Line by line add the items -->\n                        <!-- The grid layout handles putting it in rows and columns -->\n                        <template v-for=\"(line,lineindex) in page.studylines\"\n                            ><template v-for=\"(layernr,layeridx) in countLineLayers(line)\"\n                                ><template v-for=\"(n,index) in (page.periods+1)\"\n                                    ><r-studyline-slot\n                                        v-if=\"index > 0 && showslot(line, index, layeridx, 'gradable')\"\n                                        type='gradable'\n                                        v-model=\"line.slots[index].courses\"\n                                        :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :period=\"page.perioddesc[index-1]\"\n                                        :guestmode='guestmode'\n                                        :teachermode='teachermode'\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                    ></r-studyline-slot\n                                    ><r-studyline-slot\n                                        v-if=\"showslot(line, index, layeridx, 'gradable')\"\n                                        type='filter'\n                                        v-model=\"line.slots[index].filters\"\n                                        :teachermode='teachermode'\n                                        :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':'')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                + ((index==page.periods)?' rightmost':'')\"\n                                        >\n                                    </r-studyline-slot\n                                ></template\n                            ></template\n                        ></template\n                        ></div\n                    ></div\n                ></div>\n            `,\n        });\n\n        /*\n        * R-STUDYLINE-HEADER\n        */\n        Vue.component('r-studyline-heading', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                },\n                layers: {\n                    type: Number,\n                    default: 1,\n                },\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                    // Listener for the signal that a new connection was made and needs to be drawn\n                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                    ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onLineHeightChange(lineid){\n                    // All layers for this line have the first slot send an update message on layer height change.\n                    // When one of those updates is received, record the height and recalculate the total height of the\n                    // header\n                    if(this.$refs.mainEl && (lineid == this.value.id || lineid === null)){\n                        const items = document.querySelectorAll(\n                            `.r-studyline-slot-0[data-studyline='${this.value.id}']`);\n                        // determine the height of all the lines and add them up.\n                        let heightSum = 0;\n                        items.forEach((el) => {\n                            // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n                            const r = el.getBoundingClientRect();\n                            const height = r.height;\n                            heightSum += height;\n                        });\n\n                        const heightStyle=`${heightSum}px`;\n                        this.$refs.mainEl.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"r-studyline r-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"mainEl\"\n                ><div class=\"r-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"r-studyline-title\">\n                    <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyline-slot', {\n            props: {\n                value: {\n                    type: Array, // item to display\n                    default(){ return [];},\n                },\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: 0,\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                },\n                period: {\n                    type: Object,\n                    default(){ return null;},\n                }\n            },\n            mounted() {\n                const self=this;\n                if(self.type == \"gradable\" && self.slotindex == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.sizeElement){\n                            const height = self.$refs.sizeElement.getBoundingClientRect().height;\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);\n                        }\n                    }).observe(self.$refs.sizeElement);\n                }\n            },\n            computed: {\n                item(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return itm;\n                        }\n                    }\n                    return null;\n                },\n                current(){\n                    if( this.period && this.period.startdate && this.period.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.period.startdate);\n                        const pend = new Date(this.period.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                spanCss(){\n                    if(this.item && this.item.span > 1){\n                        const span = (2 * this.item.span) - 1;\n                        return `width: 100%; grid-column: span ${span};`;\n                    } else {\n                        return \"\";\n                    }\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            `,\n        });\n\n\n        Vue.component('r-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    lines: [],\n                };\n            },\n            methods: {\n                lineColor(){\n                    if(this.teachermode){\n                        return \"var(--gray)\";\n                    }\n                    else{\n                        switch(this.value.completion){\n                            default: // \"incomplete\"\n                                return \"var(--gray)\";\n                            case \"failed\":\n                                return \"var(--danger)\";\n                            case \"progress\":\n                                return \"var(--warning)\";\n                            case \"completed\":\n                                return \"var(--success)\";\n                            case \"good\":\n                                return \"var(--info)\";\n                            case \"excellent\":\n                                return \"var(--blue)\";\n                        }\n                    }\n                },\n                redrawLine(conn){\n                    let lineColor = this.lineColor();\n\n                    // prepare lineinfo link or delete old line\n                    let lineinfo = this.lines[conn.to_id];\n                    if(lineinfo){\n                        if(lineinfo.line){\n                            lineinfo.line.remove();\n                            lineinfo.line = undefined;\n                        }\n                    } else {\n                        lineinfo = {};\n                        this.lines[conn.to_id] = lineinfo;\n                    }\n\n                    // draw new line...\n                    let start = document.getElementById('studyitem-'+conn.from_id);\n                    let end= document.getElementById('studyitem-'+conn.to_id);\n                    if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n                        lineinfo.line = new SimpleLine(start,end,{\n                            color: lineColor,\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    }\n                },\n                redrawLines(){\n                    // Clean all old lines\n                    for(let ix in this.lines){\n                        let lineinfo = this.lines[ix];\n                        if(lineinfo && lineinfo.line){\n                            lineinfo.line.remove();\n                            lineinfo.line = undefined;\n                        }\n                    }\n\n                    // Create new lines\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.redrawLine(conn);\n                    }\n                },\n                onWindowResize(){\n                    this.redrawLines();\n                }\n            },\n            computed: {\n                hasConnectionsOut() {\n                    return !([\"finish\",].includes(this.value.type));\n                },\n                hasConnectionsIn() {\n                    return !([\"start\",].includes(this.value.type));\n                },\n                hasContext() {\n                    return ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n\n                this.redrawLines();\n                setTimeout(()=>{\n                    this.redrawLines();\n                },50);\n\n                // Add resize event listener\n                window.addEventListener('resize',this.onWindowResize);\n            },\n            beforeDestroy(){\n                for(let i in this.value.connections.out){\n                    let conn = this.value.connections.out[i];\n                    let lineinfo = this.lines[conn.to_id];\n                    if(lineinfo){\n                        if(lineinfo.line){\n                            if(lineinfo.lineElm ){\n                                lineinfo.lineElm.parentNode.removeChild(lineinfo.lineElm);\n                                lineinfo.lineElm = undefined;\n                            } else {\n                                lineinfo.line.remove();\n                            }\n                            lineinfo.line = undefined;\n                        }\n                    }\n                }\n                // Remove resize event listener\n                window.removeEventListener('resize',this.onWindowResize);\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"r-item-base\" :id=\"'studyitem-'+value.id\" :data-x='value.type'>\n                <r-item-competency    v-if=\"value.type == 'competency'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-competency>\n                <r-item-course        v-if=\"value.type == 'course' && !teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-course>\n                <r-item-teachercourse v-if=\"value.type == 'course' && teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-teachercourse>\n                <r-item-junction      v-if=\"value.type == 'junction'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-junction>\n                <r-item-start         v-if=\"value.type == 'start'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-start>\n                <r-item-finish        v-if=\"value.type == 'finish'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-finish>\n                <r-item-badge         v-if=\"value.type == 'badge'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-badge>\n                <r-item-invalid       v-if=\"value.type == 'invalid' && teachermode\"\n                    v-model=\"value\" ></r-item-invalid>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-invalid', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    text: strings.invalid,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class=\"r-item-invalid\">\n            <b-card no-body class=\"r-item-invalid\">\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"r-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        //TAG: Item Course\n        Vue.component('r-item-course', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n            },\n            created(){\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n                circle_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return null;\n                        case \"failed\":\n                            return \"times\";\n                        case \"progress\":\n                            return \"exclamation\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n            },\n            template: `\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n        //TAG: Selected activities dispaly\n        Vue.component('r-item-studentgrades',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\n                pendingsubmission(){\n                    let result = false;\n                    for(const ix in this.value.course.grades){\n                        const g = this.value.course.grades[ix];\n                        if(g.pendingsubmission){\n                            result = true;\n                            break;\n                        }\n                    }\n                    return result;\n                },\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in value.course.grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"(!guestmode)?(g.link):undefined\" target=\"_blank\"><span v-html=\"g.name\"></span></a>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + g.completion\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class=\"' r-completion-'+g.completion\">{{g.grade}}</span></td>\n                    <td><i :class=\"'fa fa-'+completion_icon(g.completion)+' r-completion-'+g.completion\"\n                        :title=\"text['completion_'+g.completion]\"></i>\n                        <i v-if='g.pendingsubmission' :title=\"text['completion_pending']\"\n                            class=\"r-pendingsubmission fa fa-clock-o\"></i></td>\n                    <td v-if=\"g.feedback\">\n                        <a  v-b-modal=\"'r-grade-feedback-'+g.id\"\n                            href=\"#\"\n                        >{{ text[\"view_feedback\"]}}</a>\n                        <b-modal\n                            :id=\"'r-grade-feedback-'+g.id\"\n                            size=\"sm\"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class=\"fa fa-graduation-cap\"></i>{{ value.course.fullname }}</h2><br>\n                                <span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span>{{g.name}}\n                            </template>\n                            <span v-html=\"g.feedback\"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            `,\n        });\n\n        //TAG: Core completion version of student course info\n        Vue.component('r-item-studentcompletion',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                course: {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            created(){\n            },\n            computed: {\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"complete\":\n                            return \"check-circle\";\n                        case \"complete-pass\":\n                            return \"check-circle\";\n                        case \"complete-fail\":\n                            return \"times-circle\";\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                    }\n                },\n                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                },\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                requirementHTML(requirements) {\n                    const rqs = requirements.split(/, */);\n                    let html = \"\";\n                    for(const ix in rqs) {\n                        const rq = rqs[ix];\n                        html += `${rq}<br>`;\n                    }\n                    return html;\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'\n                        ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions' v-if='value.enabled && value.tracked'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if=\"cgroup.progress < cgroup.count\"\n                                :value='cgroup.progress'\n                                :max='cgroup.count'\n                                :class=\"'r-completion-'+cgroup.status\"\n                                :title=\"text['completion_'+cgroup.status]\"\n                            ></r-progress-circle>\n                            <i v-else :class=\"'fa fa-check-circle r-completion-'+cgroup.status\"></i>\n                            </th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-if='guestmode'>{{ci.title}}</span>\n                            <span v-else v-html='addTargetBlank(ci.details.criteria)'></span>\n                            <a href=\"#\" v-b-tooltip.click.hover.right.html=\"{ customClass: 'r-tooltip ' + ci.status}\"\n                                :title=\"requirementHTML(ci.details.requirement)\"\n                                class=\"text-primary\"><i  v-if=\"ci.details.requirement\"\n                                class='fa fa-question-circle'\n                                ></i></a>\n                        <td\n                            ><span :class=\"' r-completion-'+ci.status\">{{ci.grade}}</span>\n                            <span v-if=\"ci.warning\"\n                                ><i class=\"text-primary fa fa-exclamation-triangle\"\n                                    v-b-tooltip.hover.right.click=\"{ customClass: 'r-tooltip info' }\"\n                                    :title=\"ci.warning\"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class=\"'fa fa-'+completion_icon(ci.status)+' r-completion-'+ci.status\"\n                            :title=\"text['completion_'+ci.status]\"></i>\n                            <i v-if='ci.pending' :title=\"text['completion_pending']\"\n                                class=\"r-pendingsubmission fa fa-clock-o\"></i>\n                        </td>\n                        <td v-if=\"ci.feedback\">\n                            <a  v-b-modal=\"'r-grade-feedback-'+ci.id\"\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-grade-feedback-'+ci.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-graduation-cap\"></i>{{ course.fullname }}</h2><br>\n                                    <span class=\"r-activity-icon\" :title=\"ci.typename\" v-html=\"ci.icon\"></span>{{ci.name}}\n                                </template>\n                                <span v-html=\"ci.feedback\"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if='! value.enabled'>\n                        <td colspan='4'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan='4'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n        //TAG: Teacher course\n        Vue.component('r-item-teachercourse', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.teachercourse,\n                    txt: {\n                        grading: strings.grading,\n                    }\n                };\n            },\n            computed: {\n                course_grading_needed(){\n                    return this.course_grading_state();\n                },\n                course_grading_icon(){\n                    return this.determine_grading_icon(this.course_grading_state());\n                },\n                filtered_grades(){\n                    return this.value.course.grades.filter(g => g.selected);\n                },\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                isCompletable() {\n                    let completable = false;\n                    if(this.value.course.completion){\n                        if(this.value.course.completion.conditions.length > 0){\n                            completable = true;\n                        }\n                    } else if (this.value.course.grades){\n                        if(this.value.course.grades.length > 0){\n                            completable = true;\n                        }\n                    }\n\n                    return completable;\n                },\n                progress_circle() { //INFO:\n                    const status = {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n\n                    if(this.value.course.completion){\n                        for(const cond of this.value.course.completion.conditions){\n                            for(const itm of cond.items){\n                                if(itm.progress){\n                                    status.students += itm.progress.students;\n                                    status.completed += itm.progress.completed;\n                                    status.completed_pass += itm.progress.completed_pass;\n                                    status.completed_fail += itm.progress.completed_fail;\n                                    status.ungraded += itm.progress.ungraded;\n                                }\n                            }\n                        }\n\n                    } else if (this.value.course.grades){\n                        for( const g of this.value.course.grades){\n                            if(g.grading){\n                                status.students += g.grading.students;\n                                status.completed += g.grading.completed;\n                                status.completed_pass += g.grading.completed_pass;\n                                status.completed_fail += g.grading.completed_fail;\n                                status.ungraded += g.grading.ungraded;\n                            }\n                        }\n                    }\n\n                    return status;\n                },\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n            },\n            created(){\n\n            },\n            methods: {\n                course_grading_state(){\n                    let ungraded = 0;\n                    let unknown = 0;\n                    let graded = 0;\n                    let allgraded = 0;\n                    const grades = this.filtered_grades;\n\n                    if(!Array.isArray(grades) || grades == 0){\n                        return 'nogrades';\n                    }\n\n                    for(const ix in grades){\n                        const grade = grades[ix];\n                        if(grade.grading){\n                            if(Number(grade.grading.ungraded) > 0){\n                                ungraded++;\n                            }\n                            else if(Number(grade.grading.graded) > 0) {\n                                if(Number(grade.grading.graded) == Number(grade.grading.students)){\n                                    allgraded++;\n                                } else {\n                                    graded++;\n                                }\n                            }\n                        } else {\n                            unknown = true;\n                        }\n                    }\n\n                    if(ungraded > 0){\n                        return 'ungraded';\n                    } else if(unknown) {\n                        return 'unknown';\n                    } else if(graded){\n                        return 'graded';\n                    } else if(allgraded){\n                        return 'allgraded';\n                    } else {\n                        return 'unsubmitted';\n                    }\n                },\n                determine_grading_icon(gradingstate){\n                    switch(gradingstate){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case \"ungraded\":\n                            return \"exclamation-circle\";\n                        case \"unknown\":\n                            return \"question-circle-o\";\n                        case \"graded\":\n                            return \"check\";\n                        case \"allgraded\":\n                            return \"check\";\n                        case \"unsubmitted\":\n                            return \"dot-circle-o\";\n                    }\n                },\n            },\n            template: `\n            <div  :class=\"'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')\">\n            <b-card no-body>\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class=\"r-course-graded\" :disabled=\"!isCompletable\"\n                                v-model=\"progress_circle\"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if=\"true\"\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model=\"value\"\n                                    v-if=\"value.course.grades && value.course.grades.length > 0\"\n                                    :useRequiredGrades=\"useRequiredGrades\"\n                                    :plan=\"plan\"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if='!!value.course.completion && value.course.amteacher'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                    :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(\" / \") }}\n                            <div class='mt-1 text-info'>\n                            <span v-if='value.course.numenrolled != 1'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <r-completion-circle class=\"r-progress-circle-popup\" :disabled=\"!isCompletable\"\n                                    v-model=\"progress_circle\"></r-completion-circle>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{ text['coursetiming_'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value.course'\n                        :useRequiredGrades=\"useRequiredGrades\"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            `,\n        });\n\n\n    //TAG: Select activities to use in grade overview\n    Vue.component('r-item-teacher-gradepicker', {\n        props: {\n            value : {\n                type: Object, // Item\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default(){ return null;}\n            }\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n            };\n        },\n        computed: {\n        },\n        methods: {\n            includeChanged(newValue,g){\n                call([{\n                    methodname: 'local_treestudyplan_include_grade',\n                    args: { 'grade_id': g.id,\n                            'item_id': this.value.id,\n                            'include': newValue,\n                            'required': g.required,\n                            }\n                }])[0].fail(notification.exception);\n            },\n            requiredChanged(newValue,g){\n                call([{\n                    methodname: 'local_treestudyplan_include_grade',\n                    args: { 'grade_id': g.id,\n                            'item_id': this.value.id,\n                            'include': g.selected,\n                            'required': newValue,\n                            }\n                }])[0].fail(notification.exception);\n            },\n        },\n        template: `\n            <a  v-if=\"value.course.canselectgradables\" href='#'\n                                        v-b-modal=\"'r-item-course-config-'+value.id\"\n                                        @click.prevent.stop=''\n                                        ><i class='fa fa-cog'></i>\n                <b-modal v-if='value.course.canselectgradables'\n                    :id=\"'r-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.displayname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label=\"text.select_grades\"\n                        ><ul class=\"t-item-module-children\">\n                            <li class=\"t-item-course-gradeinfo\">\n                                <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                                ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                            </li>\n                            <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                                <b-form-checkbox inline\n                                    @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                    @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                    ></b-form-checkbox>\n                                <span :title=\"g.typename\" v-html=\"g.icon\"></span><a\n                                    :href=\"g.link\" target=\"_blank\">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title=\"value.course.fullname\"\n                                    @saved=\"(fd) => g.name = fd.get('name')\"\n                                    v-if=\"g.cmid > 0\"\n                                    :cmid=\"g.cmid\"\n                                    :coursectxid=\"value.course.ctxid\"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        `,\n    });\n\n\n\n    //TAG: Selected activities dispaly\n    Vue.component('r-item-teachergrades',{\n        props: {\n            value : {\n                type: Object,\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n                txt: {\n                    grading: strings.grading,\n                }\n            };\n        },\n        computed: {\n            pendingsubmission(){\n                let result = false;\n                for(const ix in this.value.grades){\n                    const g = this.value.grades[ix];\n                    if(g.pendingsubmission){\n                        result = true;\n                        break;\n                    }\n                }\n                return result;\n            },\n            filtered_grades(){\n                return this.value.grades.filter(g => g.selected);\n            },\n        },\n        methods: {\n            determine_grading_icon(gradingstate){\n                switch(gradingstate){\n                    default: // \"nogrades\":\n                        return \"circle-o\";\n                    case \"ungraded\":\n                        return \"exclamation-circle\";\n                    case \"unknown\":\n                        return \"question-circle-o\";\n                    case \"graded\":\n                        return \"check\";\n                    case \"allgraded\":\n                        return \"check\";\n                    case \"unsubmitted\":\n                        return \"dot-circle-o\";\n                }\n            },\n            grading_icon(grade){\n                return this.determine_grading_icon(this.is_grading_needed(grade));\n            },\n            is_grading_needed(grade){\n                if(grade.grading){\n                    if(grade.grading.ungraded){\n                        return 'ungraded';\n                    }\n                    else if(grade.grading.completed_pass || grade.grading.completed || grade.grading.completed_fail) {\n                        if(Number(grade.grading.completed) + Number(grade.grading.completed_pass)\n                            + Number(grade.grading.completed_fail)\n                             == Number(grade.grading.students)){\n                            return 'allgraded';\n                        }\n                        else {\n                            return 'graded';\n                        }\n                    }\n                    else {\n                        return 'unsubmitted';\n                    }\n                } else {\n                    return 'unknown';\n                }\n            },\n\n        },\n        template: `\n        <div>\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in filtered_grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"g.gradinglink\"\n                        target=\"_blank\" :title=\"g.name\"><span v-html=\"g.name\"></span></a>\n                        <s-edit-mod\n                            :title=\"value.fullname\"\n                            @saved=\"(fd) => g.name = fd.get('name')\"\n                            v-if=\"g.cmid > 0\"\n                            :cmid=\"g.cmid\"\n                            :coursectxid=\"value.ctxid\"\n                            genericonly></s-edit-mod>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + is_grading_needed(g)\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if='g.grading'\n                        ><i :class=\"'r-course-grading fa fa-'+grading_icon(g)+' r-graded-'+is_grading_needed(g)\"\n                        :title=\"txt.grading[is_grading_needed(g)]\"></i>\n                    </td>\n                    <td v-if='g.grading'>\n                        <r-completion-bar v-model=\"g.grading\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        `,\n    });\n\n    //TAG: Core completion version of student course info\n    Vue.component('r-item-teachercompletion',{\n        props: {\n            value : {\n                type: Object,\n                default: function(){ return {};},\n            },\n            guestmode: {\n                type: Boolean,\n                default: false,\n            },\n            course: {\n                type: Object,\n                default: function(){ return {};},\n            },\n        },\n        data() {\n            return {\n                text: strings.completion,\n            };\n        },\n        created(){\n            const self = this;\n            // Get text strings for condition settings\n            let stringkeys = [];\n            for(const key in  this.text){\n                stringkeys.push({ key: key, component: 'local_treestudyplan'});\n            }\n            get_strings(stringkeys).then(function(strings){\n                let i = 0;\n                for(const key in  self.text){\n                    self.text[key] = strings[i];\n                    i++;\n                }\n            });\n        },\n        computed: {\n            completionreport(){\n                return `${Config.wwwroot}/report/completion/index.php?course=${this.course.id}`;\n            }\n        },\n        methods: {\n            hasCompletions() {\n                if(this.value.conditions) {\n                    for(const cgroup of this.value.conditions){\n                        if(cgroup.items && cgroup.items.length > 0){\n                            return true;\n                        }\n                    }\n                }\n                return false;\n            },\n        },\n        template: `\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        `,\n    });\n\n\n        Vue.component('r-grading-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.grading,\n                };\n            },\n            computed: {\n                width_unsubmitted() {\n                    return this.width * this.fraction_unsubmitted();\n                },\n                width_graded() {\n                    return this.width * this.fraction_graded();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_unsubmitted(){\n                    return (this.value.students - this.value.graded - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_unsubmitted() {\n                    if(this.value.students > 0){\n                        return 1 - ((this.value.graded + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_graded() {\n                    if(this.value.students > 0){\n                        return this.value.graded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            computed: {\n                width_incomplete() {\n                    return this.width * this.fraction_incomplete();\n                },\n                width_completed() {\n                    return this.width * this.fraction_completed();\n                },\n                width_completed_pass() {\n                    return this.width * this.fraction_completed_pass();\n                },\n                width_completed_fail() {\n                    return this.width * this.fraction_completed_fail();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_incomplete(){\n                    return (this.value.students - this.value.completed - this.value.completed_pass\n                             - this.value.completed_fail - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                             this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-circle',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 10,\n                        completed: 2,\n                        completed_pass: 2,\n                        completed_fail: 2,\n                        ungraded: 2,\n                    };},\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                disabled: {\n                    type: Boolean,\n                    default: false,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                }\n            },\n            computed: {\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n\n                arcpath_ungraded() {\n                    const begin = 0;\n                    return this.arcpath(begin,this.fraction_ungraded());\n                },\n                arcpath_completed() {\n                    const begin = this.fraction_ungraded();\n                    return this.arcpath(begin,this.fraction_completed());\n                },\n                arcpath_completed_pass() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed();\n                    return this.arcpath(begin,this.fraction_completed_pass());\n                },\n                arcpath_completed_fail() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass();\n                    return this.arcpath(begin,this.fraction_completed_fail());\n                },\n                arcpath_incomplete() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass()\n                                + this.fraction_completed_fail();\n                    return this.arcpath(begin,this.fraction_incomplete());\n                },\n\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 50 - (50*this.stroke);\n\n                    const t1  = start * 2*π;\n                    const Δ = end * 2*π;\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                                this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\">\n                <title>{{title}}</title>\n                <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                    :style=\"'stroke-width: ' + (stroke*100)+'; stroke: #ccc; fill: none;'\"/>\n                <path :d=\"arcpath_ungraded\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--warning); fill: none;'\"/>\n                <path :d=\"arcpath_completed\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--info); fill: none;'\"/>\n                <path :d=\"arcpath_completed_pass\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--success); fill: none;'\"/>\n                <path :d=\"arcpath_completed_fail\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--danger); fill: none;'\"/>\n\n                <circle v-if=\"disabled\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--dark);'\"/>\n                <circle v-else-if=\"value.ungraded > 0\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--warning);'\"/>\n            </g>\n            </svg>\n            `,\n        });\n\n        Vue.component('r-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"'r-item-junction r-item-filter completion-'+completion\">\n                <i v-if=\"value.completion=='incomplete'\" class=\"fa fa-circle-o\"></i>\n                <i v-else-if=\"value.completion=='failed'\" class=\"fa fa-times-circle\"></i>\n                <i v-else-if=\"value.completion=='progress'\" class=\"fa fa-exclamation-circle\"></i>\n                <i v-else class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-finish r-item-filter completion-'+completion\">\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-start r-item-filter completion-'+completion\">\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    text: strings.badge,\n                };\n            },\n            computed: {\n                completion() {\n                    return this.value.badge.issued?\"completed\":\"incomplete\";\n                },\n                issued_icon(){\n                    switch(this.value.badge.issued){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case true:\n                            return \"check\";\n                    }\n                },\n                issuestats(){\n                    // so the r-completion-bar can be used to show issuing stats\n                    return {\n                        students: (this.value.badge.studentcount)?this.value.badge.studentcount:0,\n                        completed: (this.value.badge.issuedcount)?this.value.badge.issuedcount:0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n                },\n                arcpath_issued(){\n                    if(this.value.badge.studentcount){\n                        const fraction = this.value.badge.issuedcount/this.value.badge.studentcount;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                arcpath_progress(){\n                    if(this.value.badge.completion){\n                        const fraction = this.value.badge.completion.progress/this.value.badge.completion.count;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                badgeinprogress(){\n                    return  (  this.value.badge.issued\n                            || this.teachermode\n                            || (this.value.badge.completion \n                                && this.value.badge.completion.progress >= this.value.badge.completion.count)\n                    );\n                }\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 44;\n\n                    const t1  = start * 2*π;\n                    const Δ = (end * 2*π-0.01);\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                },\n                completion_icon_rq(complete) {\n                    if (complete) {\n                        return \"check-square-o\";\n                    } else {\n                        return \"square-o\";\n                    }\n                },\n                completion_icon(complete) {\n                    if (complete) {\n                        return \"check-circle\";\n                    } else {\n                        return \"times-circle\";\n                    }\n                },\n                status(complete) {\n                    if (complete) {\n                        return \"complete\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'r-item-badge r-item-filter r-completion-'+completion\" v-b-tooltip.hover :title=\"value.badge.name\">\n                <a v-b-modal=\"'r-item-badge-details-'+value.id\"\n                ><svg class=\"r-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if=\"teachermode\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_issued\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else-if=\"value.badge.issued\" cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <template v-else-if=\"value.badge.completion\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_progress\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else cx=\"50\" cy=\"50\" r=\"46\"\n                        stroke-dasharray=\"6 9\"\n                        style=\"stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"\n                        :style=\"(badgeinprogress)?'':'opacity: 0.4;'\" />\n                </svg></a>\n\n                <b-modal\n                    :id=\"'r-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"(!guestmode)?(value.badge.infolink):undefined\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class=\"r-course-detail-header-right\" v-if=\"!teachermode\">\n                            <div class=\"r-completion-detail-header\">\n                                {{ text['completion_'+completion] }}\n                                <i v-b-popover.hover :class=\"'fa fa-'+issued_icon+' r-completion-'+completion\"\n                                    :title=\"text['completion_'+completion]\"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if=\"value.badge.issued\" class=\"list-unstyled pt-1 mb-1 border-grey border-top\">\n                                <li><strong><i class=\"fa fa-calendar-check-o r-completion-complete-pass\"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if='value.badge.dateexpired'\n                                ><strong><i class=\"fa fa-calendar-times-o r-completion-complete\"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class=\"fa fa-share-alt r-completion-complete-pass\"></i>\n                                    <a :href=\"value.badge.issuedlink\">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if='value.badge.completion && !value.badge.issued' class=\"r-item-course-grade-details mb-2\">\n                                <tr v-if=\"value.badge.completion.types.length > 1\">\n                                    <th colspan=\"2\"><span v-html=\"value.badge.completion.title\"></span></th>\n                                </tr>\n                                <template v-for='cgroup in value.badge.completion.types' >\n                                    <tr>\n                                        <td colspan=\"2\" v-if=\"value.badge.completion.types.length > 1\"\n                                            ><span v-html=\"cgroup.title\"></span></td>\n                                        <th colspan=\"2\" v-else><span v-html=\"cgroup.title\"></span></th>\n                                    </tr>\n                                    <template v-for='ci in cgroup.criteria'>\n                                        <tr>\n                                            <td class=\"pl-3\"><span v-if='guestmode'><span v-html=\"ci.title\"></span></span>\n                                                <a target='_blank' v-else-if='ci.link' :href='ci.link'\n                                                    ><span v-html=\"ci.title\"></span></a>\n                                                <span v-else><span v-html=\"ci.title\"></span></span>\n                                            <td><i :class=\"'fa fa-'+completion_icon(ci.completed)+' r-completion-'+status(ci.completed)\"\n                                                :title=\"text['completion_'+status(ci.completed)]\"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if=\"ci.requirements.length > 1\">\n                                            <tr v-for=\"rq in ci.requirements\">\n                                                <td class=\"pl-4\" colspan=\"2\"\n                                                    ><i :class=\"'fa fa-'+completion_icon_rq(rq.completed)+' r-completion-incomplete'\"\n                                                    :title=\"text['completion_'+status(rq.completed)]\"></i>\n                                                    <span class=\"t-badge-criteria-requirement\"><span v-html=\"rq.title\"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if=\"!value.badge.active\" class=\"mt-1\">\n                                    <td colspan=\"2\" class=\"alert alert-warning alert-block\">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p v-if=\"(!guestmode)\"><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if=\"teachermode && !guestmode\"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model=\"issuestats\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n    },\n};"],"names":["π","Math","PI","install","Vue","use","TSComponents","Debugger","warn","Config","lastCaller","scrollCurrentIntoView","handle","elCurrentHeader","document","querySelector","scrollIntoView","behavior","block","inline","strings","invalid","error","grading","ungraded","graded","allgraded","unsubmitted","nogrades","unknown","completion","completed","incomplete","completed_pass","completed_fail","aggregation_all","aggregation_any","aggregation_one","aggregation_overall_all","aggregation_overall_any","aggregation_overall_one","completion_not_configured","configure_completion","view_completion_report","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","view_feedback","coursetiming_past","coursetiming_present","coursetiming_future","required_goal","student_not_tracked","completion_not_enabled","badge","share_badge","dateissued","dateexpire","badgeinfo","badgeissuedstats","completioninfo","badgedisabled","course","not_enrolled","teachercourse","select_conditions","select_grades","grade_include","grade_require","student_from_plan_enrolled","students_from_plan_enrolled","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","component","props","value","type","Number","max","default","min","stroke","bgopacity","title","String","icon","data","selectedstudyplan","computed","range","this","fraction","radius","arcpath","r","Δ","methods","template","Array","guestmode","Boolean","teachermode","displayedstudyplan","selectstudyplan","plan","Object","columns","page","periods","columns_stylerule","s","i","pages","countLineLayers","line","maxLayer","slots","ix","courses","item","layer","filters","showslot","index","layeridx","forGradable","show","list","span","mounted","id","updated","$emit","layers","layerHeights","created","$on","onLineHeightChange","lineid","$refs","mainEl","items","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","slotindex","period","self","resizeListener","ResizeObserver","sizeElement","observe","itm","current","startdate","enddate","now","Date","pstart","pend","spanCss","lines","lineColor","redrawLine","conn","lineinfo","to_id","remove","undefined","start","getElementById","from_id","end","SimpleLine","color","gravity","redrawLines","connections","out","onWindowResize","hasConnectionsOut","includes","hasConnectionsIn","hasContext","setTimeout","_this","window","addEventListener","beforeDestroy","lineElm","parentNode","removeChild","removeEventListener","beforeUpdate","dummy","text","noenddate","completion_icon","circle_icon","pendingsubmission","result","grades","useRequiredGrades","aggregation_info","completion_tag","cgroup","hasCompletions","conditions","requirementHTML","requirements","rqs","split","html","rq","addTargetBlank","m","exec","txt","course_grading_needed","course_grading_state","course_grading_icon","determine_grading_icon","filtered_grades","filter","g","selected","isCompletable","completable","progress_circle","status","students","progress","isArray","grade","gradingstate","includeChanged","newValue","methodname","args","required","fail","notification","exception","requiredChanged","grading_icon","is_grading_needed","stringkeys","key","push","then","completionreport","wwwroot","width","width_unsubmitted","fraction_unsubmitted","width_graded","fraction_graded","width_ungraded","fraction_ungraded","count_unsubmitted","width_incomplete","fraction_incomplete","width_completed","fraction_completed","width_completed_pass","fraction_completed_pass","width_completed_fail","fraction_completed_fail","count_incomplete","disabled","arcpath_ungraded","arcpath_completed","begin","arcpath_completed_pass","arcpath_completed_fail","arcpath_incomplete","t1","issued","issued_icon","issuestats","studentcount","issuedcount","arcpath_issued","arcpath_progress","count","badgeinprogress","completion_icon_rq","complete"],"mappings":"4/DAqBMA,EAAIC,KAAKC,aAIA,CACXC,iBAAQC,KACJA,IAAIC,IAAIC,kCACI,IAAIC,kBAAS,wBAEnBC,KAAKC,qBACPC,WAAa,cAKRC,sBAAsBC,YAErBC,gBADoBC,SAASC,cAAc,2BACPA,cAAc,uCAErDF,iBAAsBD,QAAYA,QAAUF,aAC3CA,WAAaE,OACbC,gBAAgBG,eAAe,CAC3BC,SAAU,SACVC,MAAO,QACPC,OAAQ,gBAKhBC,SAAU,8BAAa,CACvBC,QAAS,CACLC,MAAO,SAEXC,QAAS,CACLC,SAAU,WACVC,OAAQ,SACRC,UAAW,YACXC,YAAa,cACbC,SAAU,WACVC,QAAS,WAEbC,WAAY,CACRC,UAAW,uBACXC,WAAY,wBACZC,eAAgB,oBAChBC,eAAgB,oBAChBV,SAAU,WACVW,gBAAiB,kBACjBC,gBAAiB,kBACjBC,gBAAiB,kBACjBC,wBAAyB,0BACzBC,wBAAyB,0BACzBC,wBAAyB,0BACzBC,0BAA2B,4BAC3BC,qBAAsB,uBACtBC,uBAAwB,yBACxBC,sBAAuB,wBACvBC,kBAAmB,oBACnBC,mBAAoB,qBACpBC,oBAAqB,sBACrBC,qBAAsB,uBACtBC,gBAAiB,kBACjBC,qBAAsB,uBACtBC,cAAe,gBACfC,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBC,cAAe,gBACfC,oBAAqB,sBACrBC,uBAAwB,0BAE5BC,MAAO,CACHC,YAAa,cACbC,WAAY,aACZC,WAAY,aACZC,UAAW,YACXC,iBAAkB,mBAClBnB,sBAAuB,8BACvBI,qBAAsB,6BACtBgB,eAAgB,iBAChBC,cAAe,iBAEnBC,OAAQ,CACJtB,sBAAuB,wBACvBC,kBAAmB,oBACnBC,mBAAoB,qBACpBC,oBAAqB,sBACrBC,qBAAsB,uBACtBC,gBAAiB,kBACjBC,qBAAsB,uBACtBC,cAAe,gBACfC,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBC,cAAe,gBACfC,oBAAqB,sBACrBW,aAAc,gBAElBC,cAAe,CACXC,kBAAmB,oBACnBC,cAAe,gBACflB,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBiB,cAAe,gBACfC,cAAe,gBACfjB,cAAe,gBACfkB,2BAA4B,6BAC5BC,4BAA6B,0CAgB5BC,UAAUC,eACJA,KAAKC,aAAeD,KAAKE,cAAgBF,KAAKG,iBAAiBC,YAIxEC,aAAe,IAAI7E,IAEzBA,IAAI8E,UAAU,oBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVC,IAAK,CACDF,KAAMC,OACNE,QAAS,KAEbC,IAAK,CACDJ,KAAMC,OACNE,QAAS,GAEbE,OAAQ,CACJL,KAAMC,OACNE,QAAS,IAEbG,UAAW,CACPN,KAAMC,OACNE,QAAS,IAEbI,MAAO,CACHP,KAAMQ,OACNL,QAAS,IAEbM,KAAM,CACFT,KAAMQ,SAIdE,sBACW,CACHC,kBAAmB,OAG3BC,SAAU,CACNC,wBACWC,KAAKZ,IAAMY,KAAKV,KAE3BW,2BACOD,KAAKZ,IAAMY,KAAKV,KAAO,EACf,GAGCU,KAAKf,MAAQe,KAAKV,MAAMU,KAAKZ,IAAMY,KAAKV,MAGxDY,yBACW,GAAM,GAAGF,KAAKT,QAEzBY,uBACQF,SAAW,EACTG,EAAI,GAAM,GAAGJ,KAAKT,OACrBS,KAAKZ,IAAMY,KAAKV,KAAO,IACtBW,UAAYD,KAAKf,MAAQe,KAAKV,MAAMU,KAAKZ,IAAMY,KAAKV,UAGlDe,EAAe,EAAXJ,SAAapG,SAChB,sBAAW,CAAC,GAAG,IAAI,CAACuG,EAAEA,GAAG,CAAC,EAAEC,GAAI,IAAIxG,KAGnDyG,QAAS,GAETC,ytCAuBJtG,IAAI8E,UAAU,WAAY,CACtBC,MAAO,CACHC,MAAO,CACHC,KAAMsB,OAEVC,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,CACHC,kBAAmB,OAG3BC,SAAU,CACNc,qCACOZ,KAAKH,kBACGG,KAAKH,kBACNG,KAAKf,OAASe,KAAKf,MAAMJ,OAAS,EACjCmB,KAAKf,MAAM,GAEX,OAInBqB,QAAS,CACLO,yBAAgBC,WACPjB,kBAAoBiB,OAGjCP,2uBAgBJtG,IAAI8E,UAAU,cAAe,CACzBC,MAAO,CACHC,MAAO,CACHC,KAAM6B,QAEVN,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,IAGXE,SAAU,CACNkB,0BACW,EAAwB,EAApBhB,KAAKiB,KAAKC,SAEzBC,qCAEQC,EAAI,uDACAC,EAAE,EAAGA,EAAErB,KAAKiB,KAAKC,QAAQG,IAC7BD,GAAI,sEAEDA,EAAE,KAEbH,uBAEWjB,KAAKf,MAAMqC,MAAM,KAGhChB,QAAS,CACLiB,yBAAgBC,cACRC,UAAY,EACRJ,EAAI,EAAGA,GAAKrB,KAAKiB,KAAKC,QAASG,IAAI,CAC1BG,KAAKE,MAAML,OAEpB,IAAMM,MAAMH,KAAKE,MAAML,GAAGO,QAAQ,KAC5BC,KAAOL,KAAKE,MAAML,GAAGO,QAAQD,IAChCE,KAAKC,MAAQL,WACZA,SAAWI,KAAKC,WAGpB,IAAMH,OAAMH,KAAKE,MAAML,GAAGU,QAAQ,KAC5BF,MAAOL,KAAKE,MAAML,GAAGU,QAAQJ,KAChCE,MAAKC,MAAQL,WACZA,SAAWI,MAAKC,eAIpBL,UAAY,EAAIA,SAAS,EAAG,GAExCO,kBAASR,KAAKS,MAAOC,SAAUhD,cAGrBiD,YAAuB,YAARjD,KACfgC,QAAUlB,KAAKiB,KAAKC,QACtBkB,MAAO,EACHf,EAAI,EAAGA,EAAIH,QAASG,OACrBG,KAAKE,MAAMO,MAAMZ,IAAMG,KAAKE,MAAMO,MAAMZ,GAAGO,QAAQ,KAC5CS,KAAOb,KAAKE,MAAMO,MAAMZ,GAAGO,YAC7B,IAAMD,MAAMU,KAAK,KACXR,KAAOQ,KAAKV,IACfE,KAAKC,OAASI,WACVC,YACId,EAAI,GAAMQ,KAAKS,KAAOjB,EAAK,IAC1Be,MAAO,GAGPP,KAAKS,KAAOjB,EAAM,IAClBe,MAAO,YAQxBA,OAGfG,mBACI/H,sBAAsBwF,KAAKf,MAAMuD,KAErCC,mBACIjI,sBAAsBwF,KAAKf,MAAMuD,IACjC1D,aAAa4D,MAAM,mBAAoB,OAG3CnC,0mJA6EJtG,IAAI8E,UAAU,sBAAuB,CACjCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCsD,OAAQ,CACJzD,KAAMC,OACNE,QAAS,IAGjBO,sBACW,CACHgD,aAAc,KAGtBC,mBAGQ/D,aAAagE,IAAI,mBAAoB9C,KAAK+C,qBAElDjD,SAAU,GAGVQ,QAAS,CACLyC,4BAAmBC,WAIZhD,KAAKiD,MAAMC,SAAWF,QAAUhD,KAAKf,MAAMuD,IAAiB,OAAXQ,QAAiB,KAC3DG,MAAQxI,SAASyI,+DACoBpD,KAAKf,MAAMuD,UAElDa,UAAY,EAChBF,MAAMG,SAAQ,SAACC,QAGLC,OADID,GAAGE,wBACID,OACjBH,WAAaG,cAGXE,sBAAeL,qBAChBJ,MAAMC,OAAOS,MAAMH,OAASE,eAI7CnD,kbAWJtG,IAAI8E,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMsB,MACNnB,yBAAkB,KAEtBH,KAAO,CACHA,KAAMQ,OACNL,QAAS,YAEbuE,UAAY,CACR1E,KAAMC,OACNE,QAAS,GAEbmC,KAAO,CACHtC,KAAM6B,OACN1B,0BAAkB,OAEtByC,MAAQ,CACJ5C,KAAMC,QAEV2B,KAAM,CACF5B,KAAM6B,OACN1B,0BAAkB,OAEtB4B,KAAM,CACF/B,KAAM6B,OACN1B,0BAAkB,OAEtBoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,GAEbwE,OAAQ,CACJ3E,KAAM6B,OACN1B,0BAAkB,QAG1BkD,uBACUuB,KAAK9D,KACK,YAAb8D,KAAK5E,MAAwC,GAAlB4E,KAAKF,YAC/BE,KAAKC,eAAiB,IAAIC,gBAAe,cAClCF,KAAKb,MAAMgB,YAAY,KAChBT,OAASM,KAAKb,MAAMgB,YAAYR,wBAAwBD,OAC9D1E,aAAa4D,MAAM,mBAAoBoB,KAAKtC,KAAKgB,GAAIsB,KAAKhC,MAAO0B,YAEtEU,QAAQJ,KAAKb,MAAMgB,eAG9BnE,SAAU,CACN+B,oBACQ,IAAMF,MAAM3B,KAAKf,MAAM,KACjBkF,IAAMnE,KAAKf,MAAM0C,OACpBwC,IAAIrC,OAAS9B,KAAK8B,aACVqC,WAGR,MAEXC,sBACQpE,KAAK6D,QAAU7D,KAAK6D,OAAOQ,WAAarE,KAAK6D,OAAOS,QAAQ,KACtDC,IAAM,IAAIC,KACVC,OAAS,IAAID,KAAKxE,KAAK6D,OAAOQ,WAC9BK,KAAO,IAAIF,KAAKxE,KAAK6D,OAAOS,gBAC1BC,KAAOE,QAAUF,IAAMG,YAGxB,GAGfC,sBACO3E,KAAK6B,MAAQ7B,KAAK6B,KAAKS,KAAO,EAAE,KACzBA,KAAQ,EAAItC,KAAK6B,KAAKS,KAAQ,iDACKA,gBAElC,KAInB1C,sBACW,IAGXU,QAAS,GAGTC,4sBAmBJtG,IAAI8E,UAAU,SAAU,CACpBC,MAAO,CACHC,MAAO,CACHC,KAAM6B,OACN1B,QAAS,kBAAmB,OAEhCyB,KAAM,CACF5B,KAAM6B,OACN1B,0BAAkB,OAEtBoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,CACHgF,MAAO,KAGftE,QAAS,CACLuE,wBACO7E,KAAKW,kBACG,qBAGAX,KAAKf,MAAMtD,0BAEH,kBACN,eACM,oBACN,iBACM,qBACN,kBACM,qBACN,aACM,kBACN,kBACM,gBAIvBmJ,oBAAWC,UACHF,UAAY7E,KAAK6E,YAGjBG,SAAWhF,KAAK4E,MAAMG,KAAKE,OAC5BD,SACIA,SAASxD,OACRwD,SAASxD,KAAK0D,SACdF,SAASxD,UAAO2D,IAGpBH,SAAW,QACNJ,MAAMG,KAAKE,OAASD,cAIzBI,MAAQzK,SAAS0K,eAAe,aAAaN,KAAKO,SAClDC,IAAK5K,SAAS0K,eAAe,aAAaN,KAAKE,OACtC,OAAVG,OAA0B,OAARG,KAAgB/G,UAAU4G,QAAU5G,UAAU+G,OAC/DP,SAASxD,KAAO,IAAIgE,uBAAWJ,MAAMG,IAAI,CACrCE,MAAOZ,UACPa,QAAS,CACLN,MA9pBX,IA+pBWG,IA/pBX,SAoqBLI,2BAEQ,IAAIhE,MAAM3B,KAAK4E,MAAM,KACjBI,SAAWhF,KAAK4E,MAAMjD,IACvBqD,UAAYA,SAASxD,OACpBwD,SAASxD,KAAK0D,SACdF,SAASxD,UAAO2D,OAKpB,IAAI9D,KAAKrB,KAAKf,MAAM2G,YAAYC,IAAI,KAChCd,KAAO/E,KAAKf,MAAM2G,YAAYC,IAAIxE,QACjCyD,WAAWC,QAGxBe,+BACSH,gBAGb7F,SAAU,CACNiG,oCACa,CAAC,UAAWC,SAAShG,KAAKf,MAAMC,OAE7C+G,mCACa,CAAC,SAAUD,SAAShG,KAAKf,MAAMC,OAE5CgH,4BACW,CAAC,QAAQ,WAAW,UAAUF,SAAShG,KAAKf,MAAMC,QAGjE2D,qBAGAN,uCAGSoD,cACLQ,YAAW,WACPC,MAAKT,gBACP,IAGFU,OAAOC,iBAAiB,SAAStG,KAAK8F,iBAE1CS,6BACQ,IAAIlF,KAAKrB,KAAKf,MAAM2G,YAAYC,IAAI,KAChCd,KAAO/E,KAAKf,MAAM2G,YAAYC,IAAIxE,GAClC2D,SAAWhF,KAAK4E,MAAMG,KAAKE,OAC5BD,UACIA,SAASxD,OACLwD,SAASwB,SACRxB,SAASwB,QAAQC,WAAWC,YAAY1B,SAASwB,SACjDxB,SAASwB,aAAUrB,GAEnBH,SAASxD,KAAK0D,SAElBF,SAASxD,UAAO2D,GAK5BkB,OAAOM,oBAAoB,SAAS3G,KAAK8F,iBAE7Cc,0BAEAnE,mBACQzC,KAAK6G,YACAlB,eAGbpF,mjDAsBJtG,IAAI8E,UAAU,iBAAkB,CAC5BC,MAAO,OACM,CACLE,KAAM6B,OACN1B,QAAS,kBAAmB,QAGpCO,sBACW,CACHkH,KAAM7L,QAAQC,UAGtBoF,QAAS,GAETC,onBAmBJtG,IAAI8E,UAAU,gBAAiB,CAC3BC,MAAO,CACHC,MAAO,CACHC,KAAM6B,OACN1B,0BAAkB,OAEtBoB,UAAW,CACPvB,KAAMwB,QACNrB,0BAAkB,IAEtBsB,YAAa,CACTzB,KAAMwB,QACNrB,0BAAkB,IAEtByB,KAAM,CACF5B,KAAM6B,OACN1B,0BAAkB,QAG1BO,sBACW,CACHkH,KAAM7L,QAAQ8C,SAGtB+B,SAAU,CACNuE,4BACW,2BAAYrE,KAAKf,MAAMlB,OAAOsG,YAEzCC,0BACOtE,KAAKf,MAAMlB,OAAOuG,SACV,2BAAYtE,KAAKf,MAAMlB,OAAOuG,SAG9BtE,KAAK8G,KAAKC,YAI7BlE,qBAEAvC,QAAS,CACL0G,yBAAgBrL,mBACLA,0BAEQ,eACN,gBACM,sBACN,eACM,mBACN,iBACM,yBACN,gBAEA,WAEA,kBACM,iBAGnBsL,qBAAYtL,mBACDA,2BAEQ,SACN,eACM,YACN,iBACM,kBACN,gBAEA,WAEA,kBACM,WAIvB4E,opNA6GJtG,IAAI8E,UAAU,uBAAuB,CACjCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,CACHkH,KAAM7L,QAAQ8C,SAGtB+B,SAAU,CACNoH,iCACQC,QAAS,MACT,IAAMxF,MAAM3B,KAAKf,MAAMlB,OAAOqJ,OAAO,IAC3BpH,KAAKf,MAAMlB,OAAOqJ,OAAOzF,IAC9BuF,kBAAkB,CACnBC,QAAS,gBAIVA,QAEXE,sCACOrH,KAAKc,OAAQd,KAAKc,KAAKwG,uBAAqEnC,IAAjDnF,KAAKc,KAAKwG,iBAAiBD,oBAC9DrH,KAAKc,KAAKwG,iBAAiBD,oBAO9C/G,QAAS,CACL0G,yBAAgBrL,mBACLA,0BAEQ,eACN,gBACM,sBACN,eACM,mBACN,iBACM,yBACN,gBAEA,WAEA,kBACM,kBAIvB4E,0jEAwCJtG,IAAI8E,UAAU,2BAA2B,CACrCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbtB,OAAQ,CACJmB,KAAM6B,OACN1B,QAAS,iBAAmB,MAGpCO,sBACW,CACHkH,KAAM7L,QAAQU,aAGtBkH,qBAEA/C,SAAU,GAEVQ,QAAS,CACL0G,yBAAgBrL,mBACLA,gBACE,iBACM,yBACN,eAEA,sBACM,mBACN,sBACM,6BAEA,aAGnB4L,wBAAeC,eACJA,OAAO7L,WAAW,YAAY,cAEzC8L,6BACOzH,KAAKf,MAAMyI,WAAY,gDACF1H,KAAKf,MAAMyI,+DAAW,KAAhCF,sBACHA,OAAOrE,OAASqE,OAAOrE,MAAMtE,OAAS,SAC9B,6DAIZ,GAEX8I,yBAAgBC,kBACNC,IAAMD,aAAaE,MAAM,OAC3BC,KAAO,OACP,IAAMpG,MAAMkG,IAAK,KACXG,GAAKH,IAAIlG,IACfoG,gBAAWC,kBAERD,MAEXE,wBAAeF,UACLG,EAAI,sBAAsBC,KAAKJ,aAClCG,YACWA,EAAE,+BAAsBA,EAAE,IAE7BH,OAInBxH,2qJAqFJtG,IAAI8E,UAAU,uBAAwB,CAClCC,MAAO,CACHC,MAAO,CACHC,KAAM6B,OACN1B,0BAAkB,OAEtBoB,UAAW,CACPvB,KAAMwB,QACNrB,0BAAkB,IAEtBsB,YAAa,CACTzB,KAAMwB,QACNrB,0BAAkB,IAEtByB,KAAM,CACF5B,KAAM6B,OACN1B,0BAAkB,QAG1BO,sBACW,CACHkH,KAAM7L,QAAQgD,cACdmK,IAAK,CACDhN,QAASH,QAAQG,WAI7B0E,SAAU,CACNuI,wCACWrI,KAAKsI,wBAEhBC,sCACWvI,KAAKwI,uBAAuBxI,KAAKsI,yBAE5CG,kCACWzI,KAAKf,MAAMlB,OAAOqJ,OAAOsB,QAAO,SAAAC,UAAKA,EAAEC,aAElDvB,sCACOrH,KAAKc,OAAQd,KAAKc,KAAKwG,uBAAqEnC,IAAjDnF,KAAKc,KAAKwG,iBAAiBD,oBAC9DrH,KAAKc,KAAKwG,iBAAiBD,mBAM1CwB,6BACQC,aAAc,SACf9I,KAAKf,MAAMlB,OAAOpC,WACdqE,KAAKf,MAAMlB,OAAOpC,WAAW+L,WAAW7I,OAAS,IAChDiK,aAAc,GAEX9I,KAAKf,MAAMlB,OAAOqJ,QACtBpH,KAAKf,MAAMlB,OAAOqJ,OAAOvI,OAAS,IACjCiK,aAAc,GAIfA,aAEXC,+BACUC,OAAS,CACXC,SAAU,EACVrN,UAAW,EACXE,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,MAGX2E,KAAKf,MAAMlB,OAAOpC,WAAW,kDACVqE,KAAKf,MAAMlB,OAAOpC,WAAW+L,kEAAW,+DAChCvE,6DAAM,KAAlBgB,iBACHA,IAAI+E,WACHF,OAAOC,UAAY9E,IAAI+E,SAASD,SAChCD,OAAOpN,WAAauI,IAAI+E,SAAStN,UACjCoN,OAAOlN,gBAAkBqI,IAAI+E,SAASpN,eACtCkN,OAAOjN,gBAAkBoI,IAAI+E,SAASnN,eACtCiN,OAAO3N,UAAY8I,IAAI+E,SAAS7N,2HAKzC,GAAI2E,KAAKf,MAAMlB,OAAOqJ,OAAO,kDAChBpH,KAAKf,MAAMlB,OAAOqJ,8DAAO,KAA9BuB,eACJA,EAAEvN,UACD4N,OAAOC,UAAYN,EAAEvN,QAAQ6N,SAC7BD,OAAOpN,WAAa+M,EAAEvN,QAAQQ,UAC9BoN,OAAOlN,gBAAkB6M,EAAEvN,QAAQU,eACnCkN,OAAOjN,gBAAkB4M,EAAEvN,QAAQW,eACnCiN,OAAO3N,UAAYsN,EAAEvN,QAAQC,uEAKlC2N,QAEX3E,4BACW,2BAAYrE,KAAKf,MAAMlB,OAAOsG,YAEzCC,0BACOtE,KAAKf,MAAMlB,OAAOuG,SACV,2BAAYtE,KAAKf,MAAMlB,OAAOuG,SAG9BtE,KAAK8G,KAAKC,YAI7BlE,qBAGAvC,QAAS,CACLgI,oCACQjN,SAAW,EACXK,QAAU,EACVJ,OAAS,EACTC,UAAY,EACV6L,OAASpH,KAAKyI,oBAEhBjI,MAAM2I,QAAQ/B,SAAqB,GAAVA,aAClB,eAGP,IAAMzF,MAAMyF,OAAO,KACbgC,MAAQhC,OAAOzF,IAClByH,MAAMhO,QACF+D,OAAOiK,MAAMhO,QAAQC,UAAY,EAChCA,WAEI8D,OAAOiK,MAAMhO,QAAQE,QAAU,IAChC6D,OAAOiK,MAAMhO,QAAQE,SAAW6D,OAAOiK,MAAMhO,QAAQ6N,UACpD1N,YAEAD,UAIRI,SAAU,SAIfL,SAAW,EACH,WACDK,QACC,UACDJ,OACC,SACDC,UACC,YAEA,eAGfiN,gCAAuBa,qBACZA,4BAEQ,eACN,iBACM,yBACN,gBACM,wBACN,aAEA,kBACM,YACN,oBACM,kBAIvB9I,w0IA+ERtG,IAAI8E,UAAU,6BAA8B,CACxCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCgI,kBAAmB,CACfnI,KAAMwB,QACNrB,0BAAkB,QAG1BO,sBACW,CACHkH,KAAM7L,QAAQgD,gBAGtB6B,SAAU,GAEVQ,QAAS,CACLgJ,wBAAeC,SAASZ,kBACf,CAAC,CACFa,WAAY,oCACZC,KAAM,UAAcd,EAAEnG,WACHxC,KAAKf,MAAMuD,WACX+G,kBACCZ,EAAEe,aAEtB,GAAGC,KAAKC,sBAAaC,YAE7BC,yBAAgBP,SAASZ,kBAChB,CAAC,CACFa,WAAY,oCACZC,KAAM,UAAcd,EAAEnG,WACHxC,KAAKf,MAAMuD,WACXmG,EAAEC,kBACDW,aAEpB,GAAGI,KAAKC,sBAAaC,aAGjCtJ,srGA0DJtG,IAAI8E,UAAU,uBAAuB,CACjCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCgI,kBAAmB,CACfnI,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,CACHkH,KAAM7L,QAAQgD,cACdmK,IAAK,CACDhN,QAASH,QAAQG,WAI7B0E,SAAU,CACNoH,iCACQC,QAAS,MACT,IAAMxF,MAAM3B,KAAKf,MAAMmI,OAAO,IACpBpH,KAAKf,MAAMmI,OAAOzF,IACvBuF,kBAAkB,CACnBC,QAAS,gBAIVA,QAEXsB,kCACWzI,KAAKf,MAAMmI,OAAOsB,QAAO,SAAAC,UAAKA,EAAEC,cAG/CtI,QAAS,CACLkI,gCAAuBa,qBACZA,4BAEQ,eACN,iBACM,yBACN,gBACM,wBACN,aAEA,kBACM,YACN,oBACM,iBAGnBU,sBAAaX,cACFpJ,KAAKwI,uBAAuBxI,KAAKgK,kBAAkBZ,SAE9DY,2BAAkBZ,cACXA,MAAMhO,QACFgO,MAAMhO,QAAQC,SACN,WAEH+N,MAAMhO,QAAQU,gBAAkBsN,MAAMhO,QAAQQ,WAAawN,MAAMhO,QAAQW,eAC1EoD,OAAOiK,MAAMhO,QAAQQ,WAAauD,OAAOiK,MAAMhO,QAAQU,gBACpDqD,OAAOiK,MAAMhO,QAAQW,iBACnBoD,OAAOiK,MAAMhO,QAAQ6N,UAClB,YAGA,SAIJ,cAGJ,YAKnB1I,2iDAkCJtG,IAAI8E,UAAU,2BAA2B,CACrCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbtB,OAAQ,CACJmB,KAAM6B,OACN1B,QAAS,iBAAmB,MAGpCO,sBACW,CACHkH,KAAM7L,QAAQU,aAGtBkH,uBACUiB,KAAO9D,KAETiK,WAAa,OACb,IAAMC,OAAQlK,KAAK8G,KACnBmD,WAAWE,KAAK,CAAED,IAAKA,IAAKnL,UAAW,6CAE/BkL,YAAYG,MAAK,SAASnP,aAC9BoG,EAAI,MACJ,IAAM6I,QAAQpG,KAAKgD,KACnBhD,KAAKgD,KAAKoD,MAAOjP,QAAQoG,GACzBA,QAIZvB,SAAU,CACNuK,4CACc/P,gBAAOgQ,uDAA8CtK,KAAKjC,OAAOyE,MAGnFlC,QAAS,CACLmH,6BACOzH,KAAKf,MAAMyI,WAAY,kDACF1H,KAAKf,MAAMyI,kEAAW,KAAhCF,uBACHA,OAAOrE,OAASqE,OAAOrE,MAAMtE,OAAS,SAC9B,+DAIZ,IAGf0B,6qEA8CAtG,IAAI8E,UAAU,gBAAgB,CAC1BC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCkL,MAAO,CACHrL,KAAMC,OACNE,QAAS,KAEbmE,OAAQ,CACJtE,KAAMC,OACNE,QAAS,KAGjBO,sBACW,CACHkH,KAAM7L,QAAQG,UAGtB0E,SAAU,CACN0K,oCACWxK,KAAKuK,MAAQvK,KAAKyK,wBAE7BC,+BACW1K,KAAKuK,MAAQvK,KAAK2K,mBAE7BC,iCACW5K,KAAKuK,MAAQvK,KAAK6K,qBAE7BC,oCACY9K,KAAKf,MAAMgK,SAAWjJ,KAAKf,MAAM3D,OAAS0E,KAAKf,MAAM5D,WAGrEiF,QAAS,CACLmK,uCACOzK,KAAKf,MAAMgK,SAAW,EACd,GAAMjJ,KAAKf,MAAM3D,OAAS0E,KAAKf,MAAM5D,UAAY2E,KAAKf,MAAMgK,SAE5D,GAGf0B,kCACO3K,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAM3D,OAAS0E,KAAKf,MAAMgK,SAE/B,GAGf4B,oCACO7K,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAM5D,SAAW2E,KAAKf,MAAMgK,SAEjC,IAInB1I,o/BAkBJtG,IAAI8E,UAAU,mBAAmB,CAC7BC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,CACxB4J,SAAU,EACVrN,UAAW,EACXE,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,KAGlBkP,MAAO,CACHrL,KAAMC,OACNE,QAAS,KAEbmE,OAAQ,CACJtE,KAAMC,OACNE,QAAS,KAGjBO,sBACW,CACHkH,KAAM7L,QAAQU,aAGtBmE,SAAU,CACNiL,mCACW/K,KAAKuK,MAAQvK,KAAKgL,uBAE7BC,kCACWjL,KAAKuK,MAAQvK,KAAKkL,sBAE7BC,uCACWnL,KAAKuK,MAAQvK,KAAKoL,2BAE7BC,uCACWrL,KAAKuK,MAAQvK,KAAKsL,2BAE7BV,iCACW5K,KAAKuK,MAAQvK,KAAK6K,qBAE7BU,mCACYvL,KAAKf,MAAMgK,SAAWjJ,KAAKf,MAAMrD,UAAYoE,KAAKf,MAAMnD,eACrDkE,KAAKf,MAAMlD,eAAiBiE,KAAKf,MAAM5D,WAG1DiF,QAAS,CACL0K,sCACOhL,KAAKf,MAAMgK,SAAW,EACd,GACFjJ,KAAKf,MAAMrD,UAAYoE,KAAKf,MAAMnD,eAClCkE,KAAKf,MAAMlD,eAAiBiE,KAAKf,MAAM5D,UAAY2E,KAAKf,MAAMgK,SAE5D,GAGfiC,qCACOlL,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAMrD,UAAYoE,KAAKf,MAAMgK,SAElC,GAGfmC,0CACOpL,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAMnD,eAAiBkE,KAAKf,MAAMgK,SAEvC,GAGfqC,0CACOtL,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAMlD,eAAiBiE,KAAKf,MAAMgK,SAEvC,GAGf4B,oCACO7K,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAM5D,SAAW2E,KAAKf,MAAMgK,SAEjC,IAInB1I,4oDA0BJtG,IAAI8E,UAAU,sBAAsB,CAChCC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,CACxB4J,SAAU,GACVrN,UAAW,EACXE,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,KAGlBkE,OAAQ,CACJL,KAAMC,OACNE,QAAS,IAEbmM,SAAU,CACNtM,KAAMwB,QACNrB,SAAS,GAEbI,MAAO,CACHP,KAAMQ,OACNL,QAAS,KAGjBS,SAAU,CACNI,yBACW,GAAM,GAAGF,KAAKT,QAGzBkM,mCAEWzL,KAAKG,QADE,EACYH,KAAK6K,sBAEnCa,iCACUC,MAAQ3L,KAAK6K,2BACZ7K,KAAKG,QAAQwL,MAAM3L,KAAKkL,uBAEnCU,sCACUD,MAAQ3L,KAAK6K,oBACL7K,KAAKkL,4BACZlL,KAAKG,QAAQwL,MAAM3L,KAAKoL,4BAEnCS,sCACUF,MAAQ3L,KAAK6K,oBACL7K,KAAKkL,qBACLlL,KAAKoL,iCACZpL,KAAKG,QAAQwL,MAAM3L,KAAKsL,4BAEnCQ,kCACUH,MAAQ3L,KAAK6K,oBACL7K,KAAKkL,qBACLlL,KAAKoL,0BACLpL,KAAKsL,iCACZtL,KAAKG,QAAQwL,MAAM3L,KAAKgL,yBAIvC1K,QAAS,CACLH,iBAAQiF,MAAOG,SACLnF,EAAI,GAAM,GAAGJ,KAAKT,OAElBwM,GAAc,EAAR3G,MAAUvL,EAChBwG,EAAU,EAANkF,IAAQ1L,SACX,sBAAW,CAAC,GAAG,IAAI,CAACuG,EAAEA,GAAG,CAAC2L,GAAG1L,GAAI,IAAIxG,IAEhDmR,sCACOhL,KAAKf,MAAMgK,SAAW,EACd,GACFjJ,KAAKf,MAAMrD,UAAYoE,KAAKf,MAAMnD,eAC/BkE,KAAKf,MAAMlD,eAAiBiE,KAAKf,MAAM5D,UAAY2E,KAAKf,MAAMgK,SAE/D,GAGfiC,qCACOlL,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAMrD,UAAYoE,KAAKf,MAAMgK,SAElC,GAGfmC,0CACOpL,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAMnD,eAAiBkE,KAAKf,MAAMgK,SAEvC,GAGfqC,0CACOtL,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAMlD,eAAiBiE,KAAKf,MAAMgK,SAEvC,GAGf4B,oCACO7K,KAAKf,MAAMgK,SAAW,EACdjJ,KAAKf,MAAM5D,SAAW2E,KAAKf,MAAMgK,SAEjC,IAInB1I,ssCAuBJtG,IAAI8E,UAAU,kBAAkB,CAC5BC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,IAGXE,SAAU,CACNnE,6BACOqE,KAAKf,MAAMtD,WACHqE,KAAKf,MAAMtD,WAEX,eAInB2E,QAAS,GAGTC,0dAUJtG,IAAI8E,UAAU,gBAAgB,CAC1BC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,IAGXE,SAAU,CACNnE,6BACOqE,KAAKf,MAAMtD,WACHqE,KAAKf,MAAMtD,WAEX,eAInB2E,QAAS,GAETC,sLAOJtG,IAAI8E,UAAU,eAAe,CACzBC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,IAGXE,SAAU,CACNnE,6BACOqE,KAAKf,MAAMtD,WACHqE,KAAKf,MAAMtD,WAEX,eAInBkH,qBAGAvC,QAAS,GAETC,qLAOJtG,IAAI8E,UAAU,eAAe,CACzBC,MAAO,CACHC,MAAQ,CACJC,KAAM6B,OACN1B,QAAS,iBAAmB,KAEhCoB,UAAW,CACPvB,KAAMwB,QACNrB,SAAS,GAEbsB,YAAa,CACTzB,KAAMwB,QACNrB,SAAS,IAGjBO,sBACW,CACHkH,KAAM7L,QAAQsC,QAGtBuC,SAAU,CACNnE,6BACWqE,KAAKf,MAAM1B,MAAMyO,OAAO,YAAY,cAE/CC,8BAIa,IAHFjM,KAAKf,MAAM1B,MAAMyO,OAIT,QAFA,YAKnBE,4BAEW,CACHjD,SAAWjJ,KAAKf,MAAM1B,MAAM4O,aAAcnM,KAAKf,MAAM1B,MAAM4O,aAAa,EACxEvQ,UAAYoE,KAAKf,MAAM1B,MAAM6O,YAAapM,KAAKf,MAAM1B,MAAM6O,YAAY,EACvEtQ,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,IAGlBgR,6BACOrM,KAAKf,MAAM1B,MAAM4O,aAAa,KACvBlM,SAAWD,KAAKf,MAAM1B,MAAM6O,YAAYpM,KAAKf,MAAM1B,MAAM4O,oBACxDnM,KAAKG,QAAQ,EAAEF,gBAEf,IAGfqM,+BACOtM,KAAKf,MAAM1B,MAAM5B,WAAW,KACrBsE,SAAWD,KAAKf,MAAM1B,MAAM5B,WAAWuN,SAASlJ,KAAKf,MAAM1B,MAAM5B,WAAW4Q,aAC3EvM,KAAKG,QAAQ,EAAEF,gBAEf,IAGfuM,kCACexM,KAAKf,MAAM1B,MAAMyO,QACjBhM,KAAKW,aACJX,KAAKf,MAAM1B,MAAM5B,YACdqE,KAAKf,MAAM1B,MAAM5B,WAAWuN,UAAYlJ,KAAKf,MAAM1B,MAAM5B,WAAW4Q,QAI3FjM,QAAS,CACLH,iBAAQiF,MAAOG,SAGLwG,GAAc,EAAR3G,MAAUvL,EAChBwG,EAAW,EAANkF,IAAQ1L,EAAE,WACd,sBAAW,CAAC,GAAG,IAAI,CAJhB,OAIsB,CAACkS,GAAG1L,GAAI,IAAIxG,IAEhDoO,wBAAeF,UACLG,EAAI,sBAAsBC,KAAKJ,aAClCG,YACWA,EAAE,+BAAsBA,EAAE,IAE7BH,MAGf0E,4BAAmBC,iBACXA,SACO,iBAEA,YAGf1F,yBAAgB0F,iBACRA,SACO,eAEA,gBAGf1D,gBAAO0D,iBACCA,SACO,WAEA,eAInBnM"}
\ No newline at end of file
+{"version":3,"file":"report-viewer-components.min.js","sources":["../src/report-viewer-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from './simpleline/simpleline';\nimport {get_strings} from 'core/str';\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {svgarcpath} from './util/svgarc';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\n\nimport TSComponents from './treestudyplan-components';\n\n// Make π available as a constant\nconst π = Math.PI;\n// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction\nconst LINE_GRAVITY = 1.3;\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        let debug = new Debugger(\"treestudyplan-viewer\");\n\n        debug.warn(Config);\n        let lastCaller = null;\n        /**\n         * Scroll current period into view\n         * @param {*} handle A key to pass so subsequent calls with the same key won't trigger (always triggers when null or undefined)\n         */\n        function scrollCurrentIntoView(handle){\n            const elScrollContainer = document.querySelector(\".r-studyplan-scrollable\");\n            const elCurrentHeader = elScrollContainer.querySelector(\".s-studyline-header-period.current\");\n\n            if(elCurrentHeader && ((!handle) || (handle != lastCaller))){\n                lastCaller = handle;\n                elCurrentHeader.scrollIntoView({\n                    behavior: \"smooth\",\n                    block: \"start\",\n                    inline: \"center\",\n                });\n            }\n        }\n\n        let strings = load_strings({\n            invalid: {\n                error: 'error',\n            },\n            grading: {\n                ungraded: \"ungraded\",\n                graded: \"graded\",\n                allgraded: \"allgraded\",\n                unsubmitted: \"unsubmitted\",\n                nogrades: \"nogrades\",\n                unknown: \"unknown\",\n            },\n            completion: {\n                completed: \"completion_completed\",\n                incomplete: \"completion_incomplete\",\n                completed_pass: \"completion_passed\",\n                completed_fail: \"completion_failed\",\n                ungraded: \"ungraded\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_one: \"aggregation_one\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                aggregation_overall_one: \"aggregation_overall_one\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n                view_completion_report: \"view_completion_report\",\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                completion_not_enabled: \"completion_not_enabled\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n                badgeissuedstats: \"badgeissuedstats\",\n                completion_incomplete: \"completion_incomplete_badge\",\n                completion_completed: \"completion_completed_badge\",\n                completioninfo: \"completioninfo\",\n                badgedisabled: \"badgedisabled\"\n            },\n            course: {\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                not_enrolled: \"not_enrolled\",\n            },\n            teachercourse: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                required_goal: \"required_goal\",\n                student_from_plan_enrolled: \"student_from_plan_enrolled\",\n                students_from_plan_enrolled: \"students_from_plan_enrolled\",\n            },\n            pageinfo: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n                description: 'studyplan_description',\n                duration: 'studyplan_duration'\n            }\n\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('r-progress-circle',{\n            props: {\n                value: {\n                    type: Number,\n                },\n                max: {\n                    type: Number,\n                    default: 100,\n                },\n                min: {\n                    type: Number,\n                    default: 0,\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                bgopacity: {\n                    type: Number,\n                    default: 0.2,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                },\n                icon: {\n                    type: String,\n                }\n\n            },\n            data() {\n                return {\n                    selectedstudyplan: null,\n                };\n            },\n            computed: {\n                range() {\n                    return this.max - this.min;\n                },\n                fraction(){\n                    if(this.max - this.min == 0){\n                        return 0;\n                        // 0 size is always empty :)\n                    } else {\n                        return (this.value - this.min)/(this.max - this.min);\n                    }\n                },\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n                arcpath() {\n                    let fraction = 0;\n                    const r = 50 - (50*this.stroke);\n                    if(this.max - this.min != 0){\n                        fraction = (this.value - this.min)/(this.max - this.min);\n                    }\n\n                    const Δ = fraction * 2*π;\n                    return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);\n                },\n            },\n            methods: {\n            },\n            template: `\n            <div style=\"display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;\">\n                <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\"\n                     style=\"position: absolute;top: 0;left: 0;\">\n                    <title>{{title}}</title>\n                    <circle v-if=\"fraction >= 1.0\" cx=\"50\" cy=\"50\" :r=\"radius\"\n                        :style=\"'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                    <g v-else>\n                        <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                            :style=\"'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                        <path :d=\"arcpath\"\n                            :style=\"'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'\"/>\n                    </g>\n                </svg>\n                <i v-if='icon' :class=\"'fa fa-'+icon\"\n                    style=\" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; \"\n                ></i>\n            </div>\n            `,\n        });\n\n\n        Vue.component('r-report', {\n            props: {\n                value: {\n                    type: Array,\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    selectedstudyplan: null,\n                };\n            },\n            computed: {\n                displayedstudyplan(){\n                    if(this.selectedstudyplan){\n                        return this.selectedstudyplan;\n                    } else if(this.value && this.value.length > 0){\n                        return this.value[0];\n                    } else {\n                        return null;\n                    }\n                }\n            },\n            methods: {\n                selectstudyplan(plan) {\n                    this.selectedstudyplan = plan;\n                },\n            },\n            template: `\n            <div class='t-studyplan-container r-report-tabs'>\n                <b-list-group horizontal>\n                    <b-list-group-item\n                        v-for=\"(studyplan,planindex) in value\"\n                        :key=\"studyplan.id\"\n                        :active=\"displayedstudyplan && studyplan.id == displayedstudyplan.id\"\n                        button\n                        @click=\"selectstudyplan(studyplan)\"\n                        >{{studyplan.name}}</b-list-group-item>\n                </b-list-group>\n                <r-studyplan v-if='displayedstudyplan' v-model='displayedstudyplan' :guestmode='guestmode' :teachermode='teachermode'></r-studyplan>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyplan', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    selectedpageindex: 0,\n                    text: strings.pageinfo,\n                };\n            },\n            computed: {\n\n                selectedpage() {\n                    return this.value.pages[this.selectedpageindex];\n                },\n            },\n            methods: {\n                pageduration(page){\n                    return format_date(page.startdate,false) + \" - \" + format_date(page.enddate,false);\n                },\n                columns(page) {\n                    return 1+ (page.periods * 2);\n                },\n                columns_stylerule(page) {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                countLineLayers(line,page){\n                    let maxLayer = -1;\n                    for(let i = 0; i <= page.periods; i++){\n                        const slot = line.slots[i];\n                        // Determine the amount of used layers in a studyline slit\n                        for(const ix in line.slots[i].courses){\n                            const item = line.slots[i].courses[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                        for(const ix in line.slots[i].filters){\n                            const item = line.slots[i].filters[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                    }\n                    return (maxLayer >= 0)?(maxLayer+1):1;\n                },\n                showslot(page,line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                selectedpageChanged(newTabIndex,prevTabIndex) {\n                    const page = this.value.pages[newTabIndex];\n                    scrollCurrentIntoView(this.value.id);\n                }\n            },\n            mounted() {\n                scrollCurrentIntoView(this.value.id);\n            },\n            updated() {\n                scrollCurrentIntoView(this.value.id);\n                ItemEventBus.$emit('lineHeightChange', null);\n\n            },\n            template: `\n            <div>\n            <b-card no-body>\n                <b-tabs \n                    v-model='selectedpageindex' \n                    @activate-tab='selectedpageChanged'\n                    content-class=\"mt-1\">\n                    <b-tab\n                        v-for=\"(page,pageindex) in value.pages\"\n                        :key=\"page.id\"\n                        :title-item-class=\"'s-studyplanpage-tab '+ page.timing\"\n                        ><template #title>\n                            <span v-b-tooltip.hover :title='page.fullname'>{{page.shortname}}</span>\n                            <a href=\"#\" v-b-modal=\"'studyplanpage-info-'+page.id\" variant='info'\n                             v-if='pageindex == selectedpageindex'\n                            ><i class='fa fa-info-circle'></i></a>\n                        </template>\n                        \n                        <b-modal\n                            :id=\"'studyplanpage-info-'+page.id\"\n                            scrollable\n                            ok-only\n                            >\n                            <template #modal-title>\n                                {{page.fullname}}\n                            </template>\n                            <b-container>\n                                <b-row>\n                                    <b-col cols=\"4\"><b>{{ text.shortname}}</b></b-col>\n                                    <b-col cols=\"8\">\n                                        {{ page.shortname }}\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"4\"><b>{{ text.duration}}</b></b-col>\n                                    <b-col cols=\"8\">\n                                        {{ pageduration(page) }}\n                                    </b-col>\n                                </b-row>\n                                <b-row v-if=\"page.description\">\n                                    <b-col cols=\"12\"><b>{{ text.description}}</b></b-col>\n                                </b-row>\n                                <b-row v-if=\"page.description\">\n                                    <b-col cols=\"12\">\n                                        <span v-html=\"page.description\"></span>\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <div v-if=\"page.studylines.length > 0\" class='r-studyplan-content'>\n                            <!-- First paint the headings-->\n                            <div class='r-studyplan-headings'\n                                ><s-studyline-header-heading :identifier=\"Number(page.id)\"></s-studyline-header-heading>\n                                <r-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                                    :key=\"line.id\"\n                                    v-model=\"page.studylines[lineindex]\"\n                                    :layers='countLineLayers(page,line)+1'\n                                    :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                            + ((lineindex==0)?' first ':' ')\n                                            + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                ></r-studyline-heading\n                            ></div>\n                            <!-- Next, paint all the cells in the scrollable -->\n                            <div class=\"r-studyplan-scrollable\" >\n                                <div class=\"r-studyplan-timeline\" :style=\"columns_stylerule(page)\">\n                                <!-- add period information -->\n                                <template v-for=\"(n,index) in (page.periods+1)\">\n                                    <s-studyline-header-period\n                                        v-if=\"index > 0\"\n                                        v-model=\"page.perioddesc[index-1]\"\n                                        :identifier=\"Number(page.id)\"\n                                        ></s-studyline-header-period>\n                                    <div class=\"s-studyline-header-filter\"></div>\n                                </template>\n\n                                <!-- Line by line add the items -->\n                                <!-- The grid layout handles putting it in rows and columns -->\n                                <template v-for=\"(line,lineindex) in page.studylines\"\n                                    ><template v-for=\"(layernr,layeridx) in countLineLayers(page,line)\"\n                                        ><template v-for=\"(n,index) in (page.periods+1)\"\n                                            ><r-studyline-slot\n                                                v-if=\"index > 0 && showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='gradable'\n                                                v-model=\"line.slots[index].courses\"\n                                                :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                                :slotindex=\"index\"\n                                                :line=\"line\"\n                                                :plan=\"value\"\n                                                :page=\"page\"\n                                                :period=\"page.perioddesc[index-1]\"\n                                                :guestmode='guestmode'\n                                                :teachermode='teachermode'\n                                                :layer=\"layeridx\"\n                                                :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                        + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='filter'\n                                                v-model=\"line.slots[index].filters\"\n                                                :teachermode='teachermode'\n                                                :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                                :slotindex=\"index\"\n                                                :line=\"line\"\n                                                :plan=\"value\"\n                                                :page=\"page\"\n                                                :layer=\"layeridx\"\n                                                :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                        + ((lineindex==0 && layernr==1)?' first ':'')\n                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                        + ((index==page.periods)?' rightmost':'')\"\n                                                >\n                                            </r-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div\n                            ></div\n                        ></div>\n                    </b-tab>\n                </b-tabs>\n            </b-card>\n            </div>\n            `,\n        });\n\n        /*\n        * R-STUDYLINE-HEADER\n        */\n        Vue.component('r-studyline-heading', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                },\n                layers: {\n                    type: Number,\n                    default: 1,\n                },\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                    // Listener for the signal that a new connection was made and needs to be drawn\n                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                    ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onLineHeightChange(lineid){\n                    // All layers for this line have the first slot send an update message on layer height change.\n                    // When one of those updates is received, record the height and recalculate the total height of the\n                    // header\n                    if(this.$refs.mainEl && (lineid == this.value.id || lineid === null)){\n                        const items = document.querySelectorAll(\n                            `.r-studyline-slot-0[data-studyline='${this.value.id}']`);\n                        // determine the height of all the lines and add them up.\n                        let heightSum = 0;\n                        items.forEach((el) => {\n                            // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n                            const r = el.getBoundingClientRect();\n                            const height = r.height;\n                            heightSum += height;\n                        });\n\n                        const heightStyle=`${heightSum}px`;\n                        this.$refs.mainEl.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"r-studyline r-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"mainEl\"\n                ><div class=\"r-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"r-studyline-title\">\n                    <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyline-slot', {\n            props: {\n                value: {\n                    type: Array, // item to display\n                    default(){ return [];},\n                },\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: 0,\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                },\n                period: {\n                    type: Object,\n                    default(){ return null;},\n                }\n            },\n            mounted() {\n                const self=this;\n                if(self.type == \"gradable\" && self.slotindex == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.sizeElement){\n                            const height = self.$refs.sizeElement.getBoundingClientRect().height;\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);\n                        }\n                    }).observe(self.$refs.sizeElement);\n                }\n            },\n            computed: {\n                item(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return itm;\n                        }\n                    }\n                    return null;\n                },\n                current(){\n                    if( this.period && this.period.startdate && this.period.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.period.startdate);\n                        const pend = new Date(this.period.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                spanCss(){\n                    if(this.item && this.item.span > 1){\n                        const span = (2 * this.item.span) - 1;\n                        return `width: 100%; grid-column: span ${span};`;\n                    } else {\n                        return \"\";\n                    }\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            `,\n        });\n\n\n        Vue.component('r-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    lines: [],\n                };\n            },\n            methods: {\n                lineColor(){\n                    if(this.teachermode){\n                        return \"var(--gray)\";\n                    }\n                    else{\n                        switch(this.value.completion){\n                            default: // \"incomplete\"\n                                return \"var(--gray)\";\n                            case \"failed\":\n                                return \"var(--danger)\";\n                            case \"progress\":\n                                return \"var(--warning)\";\n                            case \"completed\":\n                                return \"var(--success)\";\n                            case \"good\":\n                                return \"var(--info)\";\n                            case \"excellent\":\n                                return \"var(--blue)\";\n                        }\n                    }\n                },\n                redrawLine(conn){\n                    let lineColor = this.lineColor();\n\n                    // prepare lineinfo link or delete old line\n                    let lineinfo = this.lines[conn.to_id];\n                    if(lineinfo){\n                        if(lineinfo.line){\n                            lineinfo.line.remove();\n                            lineinfo.line = undefined;\n                        }\n                    } else {\n                        lineinfo = {};\n                        this.lines[conn.to_id] = lineinfo;\n                    }\n\n                    // draw new line...\n                    let start = document.getElementById('studyitem-'+conn.from_id);\n                    let end= document.getElementById('studyitem-'+conn.to_id);\n                    if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n                        lineinfo.line = new SimpleLine(start,end,{\n                            color: lineColor,\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    }\n                },\n                redrawLines(){\n                    // Clean all old lines\n                    for(let ix in this.lines){\n                        let lineinfo = this.lines[ix];\n                        if(lineinfo && lineinfo.line){\n                            lineinfo.line.remove();\n                            lineinfo.line = undefined;\n                        }\n                    }\n\n                    // Create new lines\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.redrawLine(conn);\n                    }\n                },\n                onWindowResize(){\n                    this.redrawLines();\n                }\n            },\n            computed: {\n                hasConnectionsOut() {\n                    return !([\"finish\",].includes(this.value.type));\n                },\n                hasConnectionsIn() {\n                    return !([\"start\",].includes(this.value.type));\n                },\n                hasContext() {\n                    return ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n\n                this.redrawLines();\n                setTimeout(()=>{\n                    this.redrawLines();\n                },50);\n\n                // Add resize event listener\n                window.addEventListener('resize',this.onWindowResize);\n            },\n            beforeDestroy(){\n                for(let i in this.value.connections.out){\n                    let conn = this.value.connections.out[i];\n                    let lineinfo = this.lines[conn.to_id];\n                    if(lineinfo){\n                        if(lineinfo.line){\n                            if(lineinfo.lineElm ){\n                                lineinfo.lineElm.parentNode.removeChild(lineinfo.lineElm);\n                                lineinfo.lineElm = undefined;\n                            } else {\n                                lineinfo.line.remove();\n                            }\n                            lineinfo.line = undefined;\n                        }\n                    }\n                }\n                // Remove resize event listener\n                window.removeEventListener('resize',this.onWindowResize);\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"r-item-base\" :id=\"'studyitem-'+value.id\" :data-x='value.type'>\n                <r-item-competency    v-if=\"value.type == 'competency'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-competency>\n                <r-item-course        v-if=\"value.type == 'course' && !teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-course>\n                <r-item-teachercourse v-if=\"value.type == 'course' && teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-teachercourse>\n                <r-item-junction      v-if=\"value.type == 'junction'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-junction>\n                <r-item-start         v-if=\"value.type == 'start'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-start>\n                <r-item-finish        v-if=\"value.type == 'finish'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-finish>\n                <r-item-badge         v-if=\"value.type == 'badge'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-badge>\n                <r-item-invalid       v-if=\"value.type == 'invalid' && teachermode\"\n                    v-model=\"value\" ></r-item-invalid>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-invalid', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    text: strings.invalid,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class=\"r-item-invalid\">\n            <b-card no-body class=\"r-item-invalid\">\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"r-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        //TAG: Item Course\n        Vue.component('r-item-course', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n            },\n            created(){\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n                circle_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return null;\n                        case \"failed\":\n                            return \"times\";\n                        case \"progress\":\n                            return \"exclamation\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n            },\n            template: `\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n        //TAG: Selected activities dispaly\n        Vue.component('r-item-studentgrades',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\n                pendingsubmission(){\n                    let result = false;\n                    for(const ix in this.value.course.grades){\n                        const g = this.value.course.grades[ix];\n                        if(g.pendingsubmission){\n                            result = true;\n                            break;\n                        }\n                    }\n                    return result;\n                },\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in value.course.grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"(!guestmode)?(g.link):undefined\" target=\"_blank\"><span v-html=\"g.name\"></span></a>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + g.completion\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class=\"' r-completion-'+g.completion\">{{g.grade}}</span></td>\n                    <td><i :class=\"'fa fa-'+completion_icon(g.completion)+' r-completion-'+g.completion\"\n                        :title=\"text['completion_'+g.completion]\"></i>\n                        <i v-if='g.pendingsubmission' :title=\"text['completion_pending']\"\n                            class=\"r-pendingsubmission fa fa-clock-o\"></i></td>\n                    <td v-if=\"g.feedback\">\n                        <a  v-b-modal=\"'r-grade-feedback-'+g.id\"\n                            href=\"#\"\n                        >{{ text[\"view_feedback\"]}}</a>\n                        <b-modal\n                            :id=\"'r-grade-feedback-'+g.id\"\n                            size=\"sm\"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class=\"fa fa-graduation-cap\"></i>{{ value.course.fullname }}</h2><br>\n                                <span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span>{{g.name}}\n                            </template>\n                            <span v-html=\"g.feedback\"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            `,\n        });\n\n        //TAG: Core completion version of student course info\n        Vue.component('r-item-studentcompletion',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                course: {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            created(){\n            },\n            computed: {\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"complete\":\n                            return \"check-circle\";\n                        case \"complete-pass\":\n                            return \"check-circle\";\n                        case \"complete-fail\":\n                            return \"times-circle\";\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                    }\n                },\n                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                },\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                requirementHTML(requirements) {\n                    const rqs = requirements.split(/, */);\n                    let html = \"\";\n                    for(const ix in rqs) {\n                        const rq = rqs[ix];\n                        html += `${rq}<br>`;\n                    }\n                    return html;\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'\n                        ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions' v-if='value.enabled && value.tracked'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if=\"cgroup.progress < cgroup.count\"\n                                :value='cgroup.progress'\n                                :max='cgroup.count'\n                                :class=\"'r-completion-'+cgroup.status\"\n                                :title=\"text['completion_'+cgroup.status]\"\n                            ></r-progress-circle>\n                            <i v-else :class=\"'fa fa-check-circle r-completion-'+cgroup.status\"></i>\n                            </th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-if='guestmode'>{{ci.title}}</span>\n                            <span v-else v-html='addTargetBlank(ci.details.criteria)'></span>\n                            <a href=\"#\" v-b-tooltip.click.hover.right.html=\"{ customClass: 'r-tooltip ' + ci.status}\"\n                                :title=\"requirementHTML(ci.details.requirement)\"\n                                class=\"text-primary\"><i  v-if=\"ci.details.requirement\"\n                                class='fa fa-question-circle'\n                                ></i></a>\n                        <td\n                            ><span :class=\"' r-completion-'+ci.status\">{{ci.grade}}</span>\n                            <span v-if=\"ci.warning\"\n                                ><i class=\"text-primary fa fa-exclamation-triangle\"\n                                    v-b-tooltip.hover.right.click=\"{ customClass: 'r-tooltip info' }\"\n                                    :title=\"ci.warning\"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class=\"'fa fa-'+completion_icon(ci.status)+' r-completion-'+ci.status\"\n                            :title=\"text['completion_'+ci.status]\"></i>\n                            <i v-if='ci.pending' :title=\"text['completion_pending']\"\n                                class=\"r-pendingsubmission fa fa-clock-o\"></i>\n                        </td>\n                        <td v-if=\"ci.feedback\">\n                            <a  v-b-modal=\"'r-grade-feedback-'+ci.id\"\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-grade-feedback-'+ci.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-graduation-cap\"></i>{{ course.fullname }}</h2><br>\n                                    <span class=\"r-activity-icon\" :title=\"ci.typename\" v-html=\"ci.icon\"></span>{{ci.name}}\n                                </template>\n                                <span v-html=\"ci.feedback\"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if='! value.enabled'>\n                        <td colspan='4'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan='4'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n        //TAG: Teacher course\n        Vue.component('r-item-teachercourse', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.teachercourse,\n                    txt: {\n                        grading: strings.grading,\n                    }\n                };\n            },\n            computed: {\n                course_grading_needed(){\n                    return this.course_grading_state();\n                },\n                course_grading_icon(){\n                    return this.determine_grading_icon(this.course_grading_state());\n                },\n                filtered_grades(){\n                    return this.value.course.grades.filter(g => g.selected);\n                },\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                isCompletable() {\n                    let completable = false;\n                    if(this.value.course.completion){\n                        if(this.value.course.completion.conditions.length > 0){\n                            completable = true;\n                        }\n                    } else if (this.value.course.grades){\n                        if(this.value.course.grades.length > 0){\n                            completable = true;\n                        }\n                    }\n\n                    return completable;\n                },\n                progress_circle() { //INFO:\n                    const status = {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n\n                    if(this.value.course.completion){\n                        for(const cond of this.value.course.completion.conditions){\n                            for(const itm of cond.items){\n                                if(itm.progress){\n                                    status.students += itm.progress.students;\n                                    status.completed += itm.progress.completed;\n                                    status.completed_pass += itm.progress.completed_pass;\n                                    status.completed_fail += itm.progress.completed_fail;\n                                    status.ungraded += itm.progress.ungraded;\n                                }\n                            }\n                        }\n\n                    } else if (this.value.course.grades){\n                        for( const g of this.value.course.grades){\n                            if(g.grading){\n                                status.students += g.grading.students;\n                                status.completed += g.grading.completed;\n                                status.completed_pass += g.grading.completed_pass;\n                                status.completed_fail += g.grading.completed_fail;\n                                status.ungraded += g.grading.ungraded;\n                            }\n                        }\n                    }\n\n                    return status;\n                },\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n            },\n            created(){\n\n            },\n            methods: {\n                course_grading_state(){\n                    let ungraded = 0;\n                    let unknown = 0;\n                    let graded = 0;\n                    let allgraded = 0;\n                    const grades = this.filtered_grades;\n\n                    if(!Array.isArray(grades) || grades == 0){\n                        return 'nogrades';\n                    }\n\n                    for(const ix in grades){\n                        const grade = grades[ix];\n                        if(grade.grading){\n                            if(Number(grade.grading.ungraded) > 0){\n                                ungraded++;\n                            }\n                            else if(Number(grade.grading.graded) > 0) {\n                                if(Number(grade.grading.graded) == Number(grade.grading.students)){\n                                    allgraded++;\n                                } else {\n                                    graded++;\n                                }\n                            }\n                        } else {\n                            unknown = true;\n                        }\n                    }\n\n                    if(ungraded > 0){\n                        return 'ungraded';\n                    } else if(unknown) {\n                        return 'unknown';\n                    } else if(graded){\n                        return 'graded';\n                    } else if(allgraded){\n                        return 'allgraded';\n                    } else {\n                        return 'unsubmitted';\n                    }\n                },\n                determine_grading_icon(gradingstate){\n                    switch(gradingstate){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case \"ungraded\":\n                            return \"exclamation-circle\";\n                        case \"unknown\":\n                            return \"question-circle-o\";\n                        case \"graded\":\n                            return \"check\";\n                        case \"allgraded\":\n                            return \"check\";\n                        case \"unsubmitted\":\n                            return \"dot-circle-o\";\n                    }\n                },\n            },\n            template: `\n            <div  :class=\"'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')\">\n            <b-card no-body>\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class=\"r-course-graded\" :disabled=\"!isCompletable\"\n                                v-model=\"progress_circle\"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if=\"true\"\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model=\"value\"\n                                    v-if=\"value.course.grades && value.course.grades.length > 0\"\n                                    :useRequiredGrades=\"useRequiredGrades\"\n                                    :plan=\"plan\"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if='!!value.course.completion && value.course.amteacher'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                    :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(\" / \") }}\n                            <div class='mt-1 text-info'>\n                            <span v-if='value.course.numenrolled != 1'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <r-completion-circle class=\"r-progress-circle-popup\" :disabled=\"!isCompletable\"\n                                    v-model=\"progress_circle\"></r-completion-circle>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{ text['coursetiming_'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value.course'\n                        :useRequiredGrades=\"useRequiredGrades\"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            `,\n        });\n\n\n    //TAG: Select activities to use in grade overview\n    Vue.component('r-item-teacher-gradepicker', {\n        props: {\n            value : {\n                type: Object, // Item\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default(){ return null;}\n            }\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n            };\n        },\n        computed: {\n        },\n        methods: {\n            includeChanged(newValue,g){\n                call([{\n                    methodname: 'local_treestudyplan_include_grade',\n                    args: { 'grade_id': g.id,\n                            'item_id': this.value.id,\n                            'include': newValue,\n                            'required': g.required,\n                            }\n                }])[0].fail(notification.exception);\n            },\n            requiredChanged(newValue,g){\n                call([{\n                    methodname: 'local_treestudyplan_include_grade',\n                    args: { 'grade_id': g.id,\n                            'item_id': this.value.id,\n                            'include': g.selected,\n                            'required': newValue,\n                            }\n                }])[0].fail(notification.exception);\n            },\n        },\n        template: `\n            <a  v-if=\"value.course.canselectgradables\" href='#'\n                                        v-b-modal=\"'r-item-course-config-'+value.id\"\n                                        @click.prevent.stop=''\n                                        ><i class='fa fa-cog'></i>\n                <b-modal v-if='value.course.canselectgradables'\n                    :id=\"'r-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.displayname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label=\"text.select_grades\"\n                        ><ul class=\"t-item-module-children\">\n                            <li class=\"t-item-course-gradeinfo\">\n                                <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                                ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                            </li>\n                            <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                                <b-form-checkbox inline\n                                    @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                    @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                    ></b-form-checkbox>\n                                <span :title=\"g.typename\" v-html=\"g.icon\"></span><a\n                                    :href=\"g.link\" target=\"_blank\">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title=\"value.course.fullname\"\n                                    @saved=\"(fd) => g.name = fd.get('name')\"\n                                    v-if=\"g.cmid > 0\"\n                                    :cmid=\"g.cmid\"\n                                    :coursectxid=\"value.course.ctxid\"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        `,\n    });\n\n\n\n    //TAG: Selected activities dispaly\n    Vue.component('r-item-teachergrades',{\n        props: {\n            value : {\n                type: Object,\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n                txt: {\n                    grading: strings.grading,\n                }\n            };\n        },\n        computed: {\n            pendingsubmission(){\n                let result = false;\n                for(const ix in this.value.grades){\n                    const g = this.value.grades[ix];\n                    if(g.pendingsubmission){\n                        result = true;\n                        break;\n                    }\n                }\n                return result;\n            },\n            filtered_grades(){\n                return this.value.grades.filter(g => g.selected);\n            },\n        },\n        methods: {\n            determine_grading_icon(gradingstate){\n                switch(gradingstate){\n                    default: // \"nogrades\":\n                        return \"circle-o\";\n                    case \"ungraded\":\n                        return \"exclamation-circle\";\n                    case \"unknown\":\n                        return \"question-circle-o\";\n                    case \"graded\":\n                        return \"check\";\n                    case \"allgraded\":\n                        return \"check\";\n                    case \"unsubmitted\":\n                        return \"dot-circle-o\";\n                }\n            },\n            grading_icon(grade){\n                return this.determine_grading_icon(this.is_grading_needed(grade));\n            },\n            is_grading_needed(grade){\n                if(grade.grading){\n                    if(grade.grading.ungraded){\n                        return 'ungraded';\n                    }\n                    else if(grade.grading.completed_pass || grade.grading.completed || grade.grading.completed_fail) {\n                        if(Number(grade.grading.completed) + Number(grade.grading.completed_pass)\n                            + Number(grade.grading.completed_fail)\n                             == Number(grade.grading.students)){\n                            return 'allgraded';\n                        }\n                        else {\n                            return 'graded';\n                        }\n                    }\n                    else {\n                        return 'unsubmitted';\n                    }\n                } else {\n                    return 'unknown';\n                }\n            },\n\n        },\n        template: `\n        <div>\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in filtered_grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"g.gradinglink\"\n                        target=\"_blank\" :title=\"g.name\"><span v-html=\"g.name\"></span></a>\n                        <s-edit-mod\n                            :title=\"value.fullname\"\n                            @saved=\"(fd) => g.name = fd.get('name')\"\n                            v-if=\"g.cmid > 0\"\n                            :cmid=\"g.cmid\"\n                            :coursectxid=\"value.ctxid\"\n                            genericonly></s-edit-mod>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + is_grading_needed(g)\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if='g.grading'\n                        ><i :class=\"'r-course-grading fa fa-'+grading_icon(g)+' r-graded-'+is_grading_needed(g)\"\n                        :title=\"txt.grading[is_grading_needed(g)]\"></i>\n                    </td>\n                    <td v-if='g.grading'>\n                        <r-completion-bar v-model=\"g.grading\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        `,\n    });\n\n    //TAG: Core completion version of student course info\n    Vue.component('r-item-teachercompletion',{\n        props: {\n            value : {\n                type: Object,\n                default: function(){ return {};},\n            },\n            guestmode: {\n                type: Boolean,\n                default: false,\n            },\n            course: {\n                type: Object,\n                default: function(){ return {};},\n            },\n        },\n        data() {\n            return {\n                text: strings.completion,\n            };\n        },\n        created(){\n            const self = this;\n            // Get text strings for condition settings\n            let stringkeys = [];\n            for(const key in  this.text){\n                stringkeys.push({ key: key, component: 'local_treestudyplan'});\n            }\n            get_strings(stringkeys).then(function(strings){\n                let i = 0;\n                for(const key in  self.text){\n                    self.text[key] = strings[i];\n                    i++;\n                }\n            });\n        },\n        computed: {\n            completionreport(){\n                return `${Config.wwwroot}/report/completion/index.php?course=${this.course.id}`;\n            }\n        },\n        methods: {\n            hasCompletions() {\n                if(this.value.conditions) {\n                    for(const cgroup of this.value.conditions){\n                        if(cgroup.items && cgroup.items.length > 0){\n                            return true;\n                        }\n                    }\n                }\n                return false;\n            },\n        },\n        template: `\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        `,\n    });\n\n\n        Vue.component('r-grading-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.grading,\n                };\n            },\n            computed: {\n                width_unsubmitted() {\n                    return this.width * this.fraction_unsubmitted();\n                },\n                width_graded() {\n                    return this.width * this.fraction_graded();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_unsubmitted(){\n                    return (this.value.students - this.value.graded - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_unsubmitted() {\n                    if(this.value.students > 0){\n                        return 1 - ((this.value.graded + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_graded() {\n                    if(this.value.students > 0){\n                        return this.value.graded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            computed: {\n                width_incomplete() {\n                    return this.width * this.fraction_incomplete();\n                },\n                width_completed() {\n                    return this.width * this.fraction_completed();\n                },\n                width_completed_pass() {\n                    return this.width * this.fraction_completed_pass();\n                },\n                width_completed_fail() {\n                    return this.width * this.fraction_completed_fail();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_incomplete(){\n                    return (this.value.students - this.value.completed - this.value.completed_pass\n                             - this.value.completed_fail - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                             this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-circle',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 10,\n                        completed: 2,\n                        completed_pass: 2,\n                        completed_fail: 2,\n                        ungraded: 2,\n                    };},\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                disabled: {\n                    type: Boolean,\n                    default: false,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                }\n            },\n            computed: {\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n\n                arcpath_ungraded() {\n                    const begin = 0;\n                    return this.arcpath(begin,this.fraction_ungraded());\n                },\n                arcpath_completed() {\n                    const begin = this.fraction_ungraded();\n                    return this.arcpath(begin,this.fraction_completed());\n                },\n                arcpath_completed_pass() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed();\n                    return this.arcpath(begin,this.fraction_completed_pass());\n                },\n                arcpath_completed_fail() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass();\n                    return this.arcpath(begin,this.fraction_completed_fail());\n                },\n                arcpath_incomplete() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass()\n                                + this.fraction_completed_fail();\n                    return this.arcpath(begin,this.fraction_incomplete());\n                },\n\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 50 - (50*this.stroke);\n\n                    const t1  = start * 2*π;\n                    const Δ = end * 2*π;\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                                this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\">\n                <title>{{title}}</title>\n                <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                    :style=\"'stroke-width: ' + (stroke*100)+'; stroke: #ccc; fill: none;'\"/>\n                <path :d=\"arcpath_ungraded\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--warning); fill: none;'\"/>\n                <path :d=\"arcpath_completed\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--info); fill: none;'\"/>\n                <path :d=\"arcpath_completed_pass\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--success); fill: none;'\"/>\n                <path :d=\"arcpath_completed_fail\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--danger); fill: none;'\"/>\n\n                <circle v-if=\"disabled\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--dark);'\"/>\n                <circle v-else-if=\"value.ungraded > 0\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--warning);'\"/>\n            </g>\n            </svg>\n            `,\n        });\n\n        Vue.component('r-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"'r-item-junction r-item-filter completion-'+completion\">\n                <i v-if=\"value.completion=='incomplete'\" class=\"fa fa-circle-o\"></i>\n                <i v-else-if=\"value.completion=='failed'\" class=\"fa fa-times-circle\"></i>\n                <i v-else-if=\"value.completion=='progress'\" class=\"fa fa-exclamation-circle\"></i>\n                <i v-else class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-finish r-item-filter completion-'+completion\">\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-start r-item-filter completion-'+completion\">\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    text: strings.badge,\n                };\n            },\n            computed: {\n                completion() {\n                    return this.value.badge.issued?\"completed\":\"incomplete\";\n                },\n                issued_icon(){\n                    switch(this.value.badge.issued){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case true:\n                            return \"check\";\n                    }\n                },\n                issuestats(){\n                    // so the r-completion-bar can be used to show issuing stats\n                    return {\n                        students: (this.value.badge.studentcount)?this.value.badge.studentcount:0,\n                        completed: (this.value.badge.issuedcount)?this.value.badge.issuedcount:0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n                },\n                arcpath_issued(){\n                    if(this.value.badge.studentcount){\n                        const fraction = this.value.badge.issuedcount/this.value.badge.studentcount;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                arcpath_progress(){\n                    if(this.value.badge.completion){\n                        const fraction = this.value.badge.completion.progress/this.value.badge.completion.count;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                badgeinprogress(){\n                    return  (  this.value.badge.issued\n                            || this.teachermode\n                            || (this.value.badge.completion \n                                && this.value.badge.completion.progress >= this.value.badge.completion.count)\n                    );\n                }\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 44;\n\n                    const t1  = start * 2*π;\n                    const Δ = (end * 2*π-0.01);\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                },\n                completion_icon_rq(complete) {\n                    if (complete) {\n                        return \"check-square-o\";\n                    } else {\n                        return \"square-o\";\n                    }\n                },\n                completion_icon(complete) {\n                    if (complete) {\n                        return \"check-circle\";\n                    } else {\n                        return \"times-circle\";\n                    }\n                },\n                status(complete) {\n                    if (complete) {\n                        return \"complete\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'r-item-badge r-item-filter r-completion-'+completion\" v-b-tooltip.hover :title=\"value.badge.name\">\n                <a v-b-modal=\"'r-item-badge-details-'+value.id\"\n                ><svg class=\"r-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if=\"teachermode\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_issued\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else-if=\"value.badge.issued\" cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <template v-else-if=\"value.badge.completion\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_progress\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else cx=\"50\" cy=\"50\" r=\"46\"\n                        stroke-dasharray=\"6 9\"\n                        style=\"stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"\n                        :style=\"(badgeinprogress)?'':'opacity: 0.4;'\" />\n                </svg></a>\n\n                <b-modal\n                    :id=\"'r-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"(!guestmode)?(value.badge.infolink):undefined\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class=\"r-course-detail-header-right\" v-if=\"!teachermode\">\n                            <div class=\"r-completion-detail-header\">\n                                {{ text['completion_'+completion] }}\n                                <i v-b-popover.hover :class=\"'fa fa-'+issued_icon+' r-completion-'+completion\"\n                                    :title=\"text['completion_'+completion]\"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if=\"value.badge.issued\" class=\"list-unstyled pt-1 mb-1 border-grey border-top\">\n                                <li><strong><i class=\"fa fa-calendar-check-o r-completion-complete-pass\"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if='value.badge.dateexpired'\n                                ><strong><i class=\"fa fa-calendar-times-o r-completion-complete\"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class=\"fa fa-share-alt r-completion-complete-pass\"></i>\n                                    <a :href=\"value.badge.issuedlink\">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if='value.badge.completion && !value.badge.issued' class=\"r-item-course-grade-details mb-2\">\n                                <tr v-if=\"value.badge.completion.types.length > 1\">\n                                    <th colspan=\"2\"><span v-html=\"value.badge.completion.title\"></span></th>\n                                </tr>\n                                <template v-for='cgroup in value.badge.completion.types' >\n                                    <tr>\n                                        <td colspan=\"2\" v-if=\"value.badge.completion.types.length > 1\"\n                                            ><span v-html=\"cgroup.title\"></span></td>\n                                        <th colspan=\"2\" v-else><span v-html=\"cgroup.title\"></span></th>\n                                    </tr>\n                                    <template v-for='ci in cgroup.criteria'>\n                                        <tr>\n                                            <td class=\"pl-3\"><span v-if='guestmode'><span v-html=\"ci.title\"></span></span>\n                                                <a target='_blank' v-else-if='ci.link' :href='ci.link'\n                                                    ><span v-html=\"ci.title\"></span></a>\n                                                <span v-else><span v-html=\"ci.title\"></span></span>\n                                            <td><i :class=\"'fa fa-'+completion_icon(ci.completed)+' r-completion-'+status(ci.completed)\"\n                                                :title=\"text['completion_'+status(ci.completed)]\"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if=\"ci.requirements.length > 1\">\n                                            <tr v-for=\"rq in ci.requirements\">\n                                                <td class=\"pl-4\" colspan=\"2\"\n                                                    ><i :class=\"'fa fa-'+completion_icon_rq(rq.completed)+' r-completion-incomplete'\"\n                                                    :title=\"text['completion_'+status(rq.completed)]\"></i>\n                                                    <span class=\"t-badge-criteria-requirement\"><span v-html=\"rq.title\"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if=\"!value.badge.active\" class=\"mt-1\">\n                                    <td colspan=\"2\" class=\"alert alert-warning alert-block\">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p v-if=\"(!guestmode)\"><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if=\"teachermode && !guestmode\"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model=\"issuestats\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n    },\n};"],"names":["π","Math","PI","install","Vue","use","TSComponents","Debugger","warn","Config","lastCaller","scrollCurrentIntoView","handle","elCurrentHeader","document","querySelector","scrollIntoView","behavior","block","inline","strings","invalid","error","grading","ungraded","graded","allgraded","unsubmitted","nogrades","unknown","completion","completed","incomplete","completed_pass","completed_fail","aggregation_all","aggregation_any","aggregation_one","aggregation_overall_all","aggregation_overall_any","aggregation_overall_one","completion_not_configured","configure_completion","view_completion_report","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","view_feedback","coursetiming_past","coursetiming_present","coursetiming_future","required_goal","student_not_tracked","completion_not_enabled","badge","share_badge","dateissued","dateexpire","badgeinfo","badgeissuedstats","completioninfo","badgedisabled","course","not_enrolled","teachercourse","select_conditions","select_grades","grade_include","grade_require","student_from_plan_enrolled","students_from_plan_enrolled","pageinfo","edit","fullname","shortname","startdate","enddate","description","duration","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","component","props","value","type","Number","max","default","min","stroke","bgopacity","title","String","icon","data","selectedstudyplan","computed","range","this","fraction","radius","arcpath","r","Δ","methods","template","Array","guestmode","Boolean","teachermode","displayedstudyplan","selectstudyplan","plan","Object","selectedpageindex","text","selectedpage","pages","pageduration","page","columns","periods","columns_stylerule","s","i","countLineLayers","line","maxLayer","slots","ix","courses","item","layer","filters","showslot","index","layeridx","forGradable","show","list","span","selectedpageChanged","newTabIndex","prevTabIndex","id","mounted","updated","$emit","layers","layerHeights","created","$on","onLineHeightChange","lineid","$refs","mainEl","items","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","slotindex","period","self","resizeListener","ResizeObserver","sizeElement","observe","itm","current","now","Date","pstart","pend","spanCss","lines","lineColor","redrawLine","conn","lineinfo","to_id","remove","undefined","start","getElementById","from_id","end","SimpleLine","color","gravity","redrawLines","connections","out","onWindowResize","hasConnectionsOut","includes","hasConnectionsIn","hasContext","setTimeout","window","addEventListener","beforeDestroy","lineElm","parentNode","removeChild","removeEventListener","beforeUpdate","dummy","noenddate","completion_icon","circle_icon","pendingsubmission","result","grades","useRequiredGrades","aggregation_info","completion_tag","cgroup","hasCompletions","conditions","requirementHTML","requirements","rqs","split","html","addTargetBlank","m","exec","txt","course_grading_needed","course_grading_state","course_grading_icon","determine_grading_icon","filtered_grades","filter","g","selected","isCompletable","completable","progress_circle","status","students","cond","progress","isArray","grade","gradingstate","includeChanged","newValue","methodname","args","required","fail","notification","exception","requiredChanged","grading_icon","is_grading_needed","stringkeys","key","push","then","completionreport","wwwroot","width","width_unsubmitted","fraction_unsubmitted","width_graded","fraction_graded","width_ungraded","fraction_ungraded","count_unsubmitted","width_incomplete","fraction_incomplete","width_completed","fraction_completed","width_completed_pass","fraction_completed_pass","width_completed_fail","fraction_completed_fail","count_incomplete","disabled","arcpath_ungraded","arcpath_completed","begin","arcpath_completed_pass","arcpath_completed_fail","arcpath_incomplete","t1","issued","issued_icon","issuestats","studentcount","issuedcount","arcpath_issued","arcpath_progress","count","badgeinprogress","completion_icon_rq","complete"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/build/studyplan-editor-components.min.js b/amd/build/studyplan-editor-components.min.js
index e21ee75..98acda7 100644
--- a/amd/build/studyplan-editor-components.min.js
+++ b/amd/build/studyplan-editor-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/studyplan-editor-components",["exports","./simpleline/simpleline","core/ajax","core/notification","core/str","./util/string-helper","./util/date-helper","./studyplan-processor","./util/debugger","./downloader","./treestudyplan-components","./util/mform-helper"],(function(_exports,_simpleline,_ajax,_notification,_str,_stringHelper,_dateHelper,_studyplanProcessor,_debugger,_downloader,_treestudyplanComponents,_mformHelper){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents),_mformHelper=_interopRequireDefault(_mformHelper);const STUDYPLAN_EDITOR_FIELDS=["name","shortname","description","idnumber","context_id","aggregation","aggregation_config"],PERIOD_EDITOR_FIELDS=["fullname","shortname","startdate","enddate"],datechanger_globals={default:!1,defaultchoice:!1,hidewarn:!1};var _default={STUDYPLAN_EDITOR_FIELDS:STUDYPLAN_EDITOR_FIELDS,install(Vue){Vue.use(_treestudyplanComponents.default),Vue.use(_mformHelper.default);let debug=new _debugger.default("treestudyplan-editor");function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}const ItemEventBus=new Vue;let string_keys=(0,_stringHelper.load_stringkeys)({conditions:[{value:"ALL",textkey:"condition_all"},{value:"ANY",textkey:"condition_any"}]}),strings=(0,_stringHelper.load_strings)({studyplan_text:{studyline_editmode:"studyline_editmode",toolbox_toggle:"toolbox_toggle",editmode_modules_hidden:"editmode_modules_hidden",studyline_add:"studyline_add",add$core:"add$core",edit$core:"edit$core",studyline_name:"studyline_name",studyline_name_ph:"studyline_name_ph",studyline_shortname:"studyline_shortname",studyline_shortname_ph:"studyline_shortname_ph",studyline_color:"studyline_color",associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",studyline_edit:"studyline_edit",studyplan_name:"studyplan_name",studyplan_name_ph:"studyplan_name_ph",studyplan_shortname:"studyplan_shortname",studyplan_shortname_ph:"studyplan_shortname_ph",studyplan_description:"studyplan_description",studyplan_description_ph:"studyplan_description_ph",studyplan_idnumber:"studyplan_idnumber",studyplan_idnumber_ph:"studyplan_idnumber_ph",studyplan_slots:"studyplan_slots",studyplan_startdate:"studyplan_startdate",studyplan_enddate:"studyplan_enddate"},studyplan_advanced:{advanced_tools:"advanced_tools",confirm_cancel:"confirm_cancel",confirm_ok:"confirm_ok",success$core:"success$core",error$core:"failed$core",advanced_converted:"advanced_converted",advanced_skipped:"advanced_skipped",advanced_failed:"advanced_failed",advanced_locked:"advanced_locked",advanced_multiple:"advanced_multiple",advanced_error:"advanced_error",advanced_tools_heading:"advanced_tools_heading",advanced_warning_title:"advanced_warning_title",advanced_warning:"advanced_warning",advanced_pick_scale:"advanced_pick_scale",advanced_course_manipulation_title:"advanced_course_manipulation_title",advanced_force_scale_title:"advanced_force_scale_title",advanced_force_scale_desc:"advanced_force_scale_desc",advanced_force_scale_button:"advanced_force_scale_button",advanced_disable_autoenddate_title:"advanced_disable_autoenddate_title",advanced_disable_autoenddate_desc:"advanced_disable_autoenddate_desc",advanced_disable_autoenddate_button:"advanced_disable_autoenddate_button",advanced_confirm_header:"advanced_confirm_header",advanced_force_scale_confirm:"advanced_force_scale_confirm",advanced_import:"advanced_import",advanced_export:"advanced_export",advanced_export_csv:"advanced_export_csv",advanced_import_from_file:"advanced_import_from_file",advanced_purge:"advanced_purge",advanced_purge_expl:"advanced_purge_expl",advanced_cascade_cohortsync_title:"advanced_cascade_cohortsync_title",advanced_cascade_cohortsync_desc:"advanced_cascade_cohortsync_desc",advanced_cascade_cohortsync:"advanced_cascade_cohortsync"},studyplan_edit:{studyplan_edit:"studyplan_edit",studyplan_add:"studyplan_add"},period_edit:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate"},course_timing:{title:"course_timing_title",desc:"course_timing_desc",question:"course_timing_question",warning:"course_timing_warning",timing_ok:"course_timing_ok",timing_off:"course_timing_off",course:"course@core",period:"period",yes:"yes$core",no:"no$core",duration:"duration",years:"years$core",year:"year$core",weeks:"weeks$core",week:"week$core",days:"days$core",day:"day$core",rememberchoice:"course_timing_rememberchoice",hidewarning:"course_timing_hidewarning",periodspan:"course_period_span",periods:"periods",periodspan_desc:"course_period_span_desc"},studyplan_associate:{associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",associate_cohorts:"associate_cohorts",associate_users:"associate_users",add_association:"add_association",delete_association:"delete_association",associations_empty:"associations_empty",associations_search:"associations_search",cohorts:"cohorts",users:"users",selected:"selected",name:"name",context:"context"},item_text:{select_conditions:"select_conditions",item_configuration:"item_configuration",ok:"ok@core",delete:"delete@core",item_delete_message:"item_delete_message",type_course:"course@core",type_junction:"tool-junction",type_start:"tool-start",type_finish:"tool-finish",type_badge:"tool-badge",type_invalid:"course-invalid"},item_course_text:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",ok:"ok@core",cancel:"cancel@core",delete:"delete@core"},invalid:{error:"error"},completion:{completion_completed:"completion_completed",completion_incomplete:"completion_incomplete",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo"}});Vue.component("t-studyplan-advanced",{props:{value:{type:Object,default:()=>null}},data:()=>({force_scales:{selected_scale:null,result:[]},text:strings.studyplan_advanced}),created(){},mounted(){},updated(){},computed:{scales(){return[{id:null,disabled:!0,name:this.text.advanced_pick_scale}].concat(this.value.advanced.force_scales.scales)}},methods:{disable_autoenddate(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disable_autoenddate",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)+"\n"+response.msg)})).fail(_notification.default.exception)},force_scales_start(){const self=this;this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{title:this.text.advanced_force_scale_confirm,okVariant:"danger",okTitle:this.text.confirm_ok,cancelTitle:this.text.confirm_cancel}).then((value=>{1==value&&(0,_ajax.call)([{methodname:"local_treestudyplan_force_studyplan_scale",args:{studyplan_id:this.value.id,scale_id:this.force_scales.selected_scale}}])[0].done((function(response){self.force_scales.result=response})).fail(_notification.default.exception)}))},export_plan(format){const self=this;null!=format&&["json","csv"].includes(format)||(format="json"),(0,_ajax.call)([{methodname:"local_treestudyplan_export_plan",args:{studyplan_id:this.value.id,format:format}}])[0].done((function(response){(0,_downloader.download)(self.value.shortname+"."+format,response.content,response.format)})).fail(_notification.default.exception)},import_studylines(){(0,_downloader.upload)(((filename,content)=>{(0,_ajax.call)([{methodname:"local_treestudyplan_import_studylines",args:{studyplan_id:this.value.id,content:content,format:"application/json"}}])[0].done((function(response){response.success?location.reload():debug.error("Import failed: ",response.msg)})).fail(_notification.default.exception)}),"application/json")},purge_studyline(){(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:this.value.id,force:!0}}])[0].done((function(response){response.success?location.reload():debug.error("Could not delete plan: ",response.msg)})).fail(_notification.default.exception)},cascade_cohortsync(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_cascade_cohortsync",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,{title:self.text.advanced_cascade_cohortsync})})).fail(_notification.default.exception)},modal_close(){this.force_scales.result=[]}},template:'\n            <span>\n                <a  v-if="value.advanced"\n                    href=\'#\'\n                    @click.prevent=\'\'\n                    class=\'text-danger\'\n                    v-b-modal="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    ><i class=\'fa fa-wrench\'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if="value.advanced"\n                    :id="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    size="lg"\n                    :title="text.advanced_tools_heading"\n                    ok-only\n                    @hide="modal_close"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title="text.advanced_warning_title" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title="text.advanced_course_manipulation_title" >\n                            <b-container>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="info"\n                                    @click="cascade_cohortsync"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model="force_scales.selected_scale"\n                                    :options="scales" text-field="name" value-field="id"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols="4">\n                                    <b-button\n                                        variant="danger"\n                                        :disabled="force_scales.selected_scale == null"\n                                        @click="force_scales_start"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <ul class=\'t-advanced-scrollable\' v-if="force_scales.result.length > 0">\n                                    <li v-for="c in force_scales.result">\n                                        <span class=\'t-advanced-coursename\'>{{c.course.fullname}}</span>\n                                        <ul v-if="c.grades.length > 0">\n                                            <li v-for=\'g in c.grades\'>\n                                                <span class=\'t-advanced-gradename\'><span v-html="g.name"></span></span>\n                                                <span v-if="g.changed == \'converted\'" class=\'t-advanced-status changed\'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if="g.changed == \'skipped\'" class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="danger"\n                                    @click="disable_autoenddate"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_export\'>\n                            <b-button\n                                    variant="primary"\n                                    @click="export_plan"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant="danger"\n                                    @click="import_studylines"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant="primary"\n                                @click="export_plan(\'csv\')"\n                            >{{ text.advanced_export_csv}}</b-button>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_purge\'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant="danger"\n                                    @click="purge_studyline"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>\n                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan-edit",{props:{value:{type:Object,default:()=>null},mode:{type:String,default:()=>"edit"},type:{type:String,default:()=>"link"},variant:{type:String,default:()=>""},contextid:{type:Number,default:1}},data:()=>({text:strings.studyplan_edit}),computed:{},methods:{planSaved(updatedplan){const self=this;if(debug.info("Got new plan data",updatedplan),"create"==self.mode)self.$emit("created",updatedplan);else{const moved_from=self.value.context_id,moved_to=updatedplan.context_id,moved=moved_from!=moved_to;updatedplan.pages[0].periods!=self.value.pages[0].periods?(0,_ajax.call)([{methodname:"local_treestudyplan_get_studyplan_map",args:{id:self.value.id}}])[0].done((function(response){self.value=(0,_studyplanProcessor.ProcessStudyplan)(response,!0),debug.info("studyplan processed"),self.$emit("input",self.value)})).fail((function(error){_notification.default.exception(error)})):((0,_studyplanProcessor.objCopy)(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS),self.$emit("input",self.value),moved&&self.$emit("moved",self.value,moved_from,moved_to))}}},template:'\n            <span class=\'s-studyplan-edit\'>\n                <mform \n                    name="studyplan_editform" \n                    :params="{studyplan_id: value.id, mode: mode, contextid: contextid }" \n                    @saved="planSaved"\n                    :variant="variant"\n                    :type="type"\n                    :title="(mode == \'create\')?text.studyplan_add:text.studyplan_edit"\n                    ><slot><i class=\'fa fa-gear\'></i></slot></mform>\n            </span>\n            '}),Vue.component("t-studyplan-page-edit",{props:{value:{type:Object,default:()=>null},mode:{type:String,default:()=>"edit"},type:{type:String,default:()=>"link"},variant:{type:String,default:()=>""},studyplan:{type:Object}},data:()=>({text:strings.studyplan_edit}),computed:{},methods:{planSaved(updatedpage){const self=this;if(debug.info("Got new page data",updatedpage),"create"==self.mode)self.$emit("created",updatedpage);else{const page=(0,_studyplanProcessor.ProcessStudyplanPage)(updatedpage);debug.info("studyplan page processed"),self.$emit("input",page)}}},template:'\n            <span class=\'s-studyplan-page-edit\'>\n                <mform \n                    name="studyplanpage_editform" \n                    :params="{page_id: value.id, studyplan_id: studyplan.id, mode: mode }" \n                    @saved="planSaved"\n                    :variant="variant"\n                    :type="type"\n                    :title="(mode == \'create\')?text.studyplan_add:text.studyplan_edit"\n                    ><slot><i class=\'fa fa-gear\'></i></slot></mform>\n            </span>\n            '}),Vue.component("t-studyplan-associate",{props:["value"],data:()=>({show:!1,config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},association:{cohorts:[],users:[]},loading:{cohorts:!1,users:!1},search:{users:[],cohorts:[]},selected:{search:{users:[],cohorts:[]},associated:{users:[],cohorts:[]}},text:strings.studyplan_associate}),created(){},mounted(){},updated(){},methods:{showModal(){this.show=!0,this.loadAssociations()},cohortOptionModel:c=>({value:c.id,text:c.name+" ("+c.context.path.join(" / ")+")"}),userOptionModel:u=>({value:u.id,text:u.firstname+" "+u.lastname}),loadAssociations(){const self=this;self.loading.cohorts=!0,self.loading.users=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_associated_users",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.users=response.map(self.userOptionModel),self.loading.users=!1})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_associated_cohorts",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.cohorts=response.map(self.cohortOptionModel),self.loading.cohorts=!1})).fail(_notification.default.exception)},searchCohorts(searchtext){const self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_list_cohort",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.cohorts=response.map(self.cohortOptionModel)})).fail(_notification.default.exception):self.search.cohorts=[]},cohortAssociate(){const self=this;let requests=[];const associated=self.association.cohorts,search=self.search.cohorts,searchselected=self.selected.search.cohorts;for(const i in searchselected){const r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})}(0,_ajax.call)(requests)},cohortDisassociate(){const self=this;let requests=[];const associatedselected=self.selected.associated.cohorts,associated=self.association.cohorts,search=self.search.cohorts;for(const i in associatedselected){const r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})}(0,_ajax.call)(requests)},searchUsers(searchtext){const self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_find_user",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.users=response.map(self.userOptionModel)})).fail(_notification.default.exception):self.search.users=[]},userAssociate(){const self=this;let requests=[];const associated=self.association.users,search=self.search.users,searchselected=self.selected.search.users;for(const i in searchselected){const r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})}(0,_ajax.call)(requests)},userDisassociate(){const self=this;let requests=[];const associated=self.association.users,associatedselected=self.selected.associated.users,search=self.search.users;for(const i in associatedselected){const r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})}(0,_ajax.call)(requests)}},template:'\n<span class=\'s-studyplan-associate\'\n    ><a href=\'#\' @click.prevent="showModal" ><slot><i class=\'fa fa-users\'></i></slot></a>\n    <b-modal\n        v-model="show"\n        size="lg"\n        ok-variant="primary"\n        :title="text.associations + \' - \' + value.name"\n        ok-only>\n        <b-tabs class=\'s-studyplan-associate-window\'>\n            <b-tab :title="text.cohorts">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text" @input="searchCohorts($event)"\n                                :placeholder="text.search"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.cohorts"\n                                :options="association.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.cohorts"\n                                :options="search.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                            <b-button variant=\'danger\' @click="cohortDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="cohortAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title="text.users">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text"\n                                @input="searchUsers($event)"\n                                placeholder="Search users"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.users"\n                                :options="association.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.users"\n                                :options="search.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                                <b-button variant=\'danger\' @click="userDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="userAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n'}),Vue.component("t-period-edit",{props:{value:{type:Object,default:()=>null},type:{type:String,default:()=>"link"},variant:{type:String,default:()=>""},minstart:{type:String,default:()=>null},maxend:{type:String,default:()=>null}},data:()=>({show:!1,editdata:{fullname:"",shortname:"",startdate:(new Date).getFullYear()+"-08-01",enddate:(new Date).getFullYear()+1+"-08-01"},text:strings.period_edit}),created(){},mounted(){},updated(){},computed:{},methods:{editStart(){(0,_studyplanProcessor.objCopy)(this.editdata,this.value,PERIOD_EDITOR_FIELDS),this.show=!0},editFinish(){const self=this;let args={id:this.value.id};(0,_studyplanProcessor.objCopy)(args,this.editdata,PERIOD_EDITOR_FIELDS),(0,_ajax.call)([{methodname:"local_treestudyplan_edit_period",args:args}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value),self.$emit("edited",self.value)})).fail(_notification.default.exception)},refresh(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_get_period",args:{id:this.value.id}}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value)})).fail(_notification.default.exception)},add_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)),sub_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days))},template:'\n            <span class=\'t-period-edit\'>\n                <b-button :variant="variant" v-if=\'type == "button"\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></b-button>\n                <a variant="variant" v-else href=\'#\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></a>\n                <b-modal\n                    v-model="show"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.edit"\n                    @ok="editFinish()"\n                    :ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4">{{ text.fullname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.fullname"\n                                :state=\'editdata.fullname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.shortname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.shortname"\n                                :state=\'editdata.shortname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.startdate"\n                                    :min="(minstart ? minstart : \'\')"\n                                    :max="sub_day(value.enddate)"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.enddate"\n                                    :min="add_day(value.startdate)"\n                                    :max="(maxend ? maxend : \'\')"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan",{props:["value","index"],data:()=>({config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},create:{studyline:{name:"",shortname:"",color:"#DDDDDD"},page:{id:-1,name:"",shortname:""}},edit:{toolbox_shown:!1,studyline:{editmode:!1,data:{name:"",shortname:"",color:"#DDDDDD"},original:{}},studyplan:{data:{name:"",shortname:"",description:"",slots:4,startdate:"2020-08-01",enddate:"",aggregation:"",aggregation_config:"",aggregation_info:{useRequiredGrades:!0,useItemCondition:!1}},original:{}}},text:strings.studyplan_text,cache:{linelayers:{}}}),created(){},mounted(){0==this.value.pages[0].studylines.length&&(this.edit.studyline.editmode=!0),this.$root.$emit("redrawLines")},updated(){this.$root.$emit("redrawLines"),ItemEventBus.$emit("redrawLines")},computed:{},methods:{columns:page=>1+2*page.periods,columns_stylerule(page){let s="grid-template-columns: var(--studyplan-filter-width)";for(let i=0;i<page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},trashbin_accepts:type=>!!type.item,countLineLayers(line,page){if(this.cache.linelayers[line.id]&&new Date-this.cache.linelayers[line.id].timestamp<1e3)return this.cache.linelayers[line.id].value;{let maxLayer=-1;for(let i=0;i<=page.periods;i++)if(line.slots[i]){line.slots[i];for(const ix in line.slots[i].courses){const item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(const ix in line.slots[i].filters){const item=line.slots[i].filters[ix];item.layer>maxLayer&&(maxLayer=item.layer)}}return this.cache.linelayers[line.id]={value:maxLayer+1,timestamp:new Date},maxLayer+1}},slotsempty(slots){if(Array.isArray(slots)){let count=0;for(let i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},movedStudyplan(plan,from,to){this.$emit("moved",plan,from,to)},addStudyLine(page,newlineinfo){(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyline",args:{page_id:page.id,name:newlineinfo.name,shortname:newlineinfo.shortname,color:newlineinfo.color,sequence:page.studylines.length}}])[0].done((function(response){page.studylines.push(response),newlineinfo.name="",newlineinfo.shortname="",newlineinfo.color="#dddddd"})).fail(_notification.default.exception)},editLineStart(line){Object.assign(this.edit.studyline.data,line),this.edit.studyline.original=line,this.$bvModal.show("modal-edit-studyline-"+this.value.id)},editLineFinish(){let editedline=this.edit.studyline.data,originalline=this.edit.studyline.original;(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyline",args:{id:editedline.id,name:editedline.name,shortname:editedline.shortname,color:editedline.color}}])[0].done((function(response){originalline.name=response.name,originalline.shortname=response.shortname,originalline.color=response.color})).fail(_notification.default.exception)},deleteLine(page,line){const self=this;(0,_str.get_strings)([{key:"studyline_confirm_remove",param:line.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyline",args:{id:line.id}}])[0].done((function(response){if(1==response.success){let index=page.studylines.indexOf(line);page.studylines.splice(index,1)}})).fail(_notification.default.exception)}))}))},reorderLines(event,lines){event.apply(lines);let sequence=[];for(let idx in lines)sequence.push({id:lines[idx].id,sequence:idx});(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studylines",args:{sequence:sequence}}])[0].done((function(response){})).fail(_notification.default.exception)},deletePlan(studyplan){const self=this;(0,_str.get_strings)([{key:"studyplan_confirm_remove",param:studyplan.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:studyplan.id,force:!0}}])[0].done((function(response){1==response.success&&self.$root.$emit("studyplanRemoved",studyplan)})).fail(_notification.default.exception)}))}))},deleteStudyItem(event){let item=event.data;(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:item.id}}])[0].done((function(response){1==response.success&&event.source.$emit("cut",event)})).fail(_notification.default.exception)},showslot(page,line,index,layeridx,type){const forGradable="gradable"==type,periods=page.periods;let show=!0;for(let i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){const list=line.slots[index-i].courses;for(const ix in list){const item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},periodEdited(pi){const prev=this.$refs["periodeditor-"+(pi.period-1)][0];prev&&prev.refresh();const next=this.$refs["periodeditor-"+(pi.period+1)][0];next&&next.refresh()},add_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)),sub_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days)),toolbox_switched(event){this.$emit("toggletoolbox",event)},pagecreated(page){this.value.pages.push(page)}},template:'\n            <div>\n                <div class=\'controlbox t-studyplan-controlbox\'>\n                    <div class="controlbox-group">\n                        <b-form-checkbox v-model="edit.studyline.editmode" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); "\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if="!edit.studyline.editmode" v-model="edit.toolbox_shown" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode=\'copy\'\n                            class=\'t-item-deletebox text-danger border-danger\'\n                            @drop=\'deleteStudyItem\'\n                            :accepts-type="trashbin_accepts"\n                            ><i class=\'fa fa-trash\'></i>\n                        </drop>\n                    </div>\n                    <div class="controlbox-group">\n                        <span class=\'control editable\'>\n                            <t-studyplan-advanced v-model="value"></t-studyplan-advanced>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-associate\n                                v-model="value"><i class=\'fa fa-users\'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-edit v-model="value" @moved="movedStudyplan" \n                                ><i class=\'fa fa-gear\'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class=\'control deletable\'>\n                            <a v-if=\'value.pages.length == 0\' href=\'#\' @click=\'deletePlan(value)\'\n                                ><i class=\'text-danger fa fa-trash\'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <b-tabs content-class="mt-1">\n                    \x3c!-- New Tab Button (Using tabs-end slot) --\x3e\n                    <template #tabs-end>\n                        <t-studyplan-page-edit \n                            :studyplan="value"\n                            v-model="create.page"\n                            type="link"\n                            mode="create"\n                            @created="pagecreated"\n                        ><i class=\'fa fa-plus\'></i></t-studyplan-page-edit>\n                    </template>\n                    <b-tab\n                        v-for="(page,pageindex) in value.pages"\n                        :key="page.id"\n                        >\n                        <template #title>\n                            {{page.shortname}}\n                            <t-studyplan-page-edit \n                                v-model="value.pages[pageindex]"\n                                :studyplan="value"\n                                type="link"\n                            ></t-studyplan-page-edit>\n                        </template>\n                        <div class=\'t-studyplan-content-edit\' v-if="edit.studyline.editmode">\n                            <drop-list\n                                :items="page.studylines"\n                                class="t-slot-droplist"\n                                :accepts-type="\'studyline-\'+page.id"\n                                xreorder="$event.apply(page.studylines)"\n                                @reorder="reorderLines($event,page.studylines)"\n                                mode="copy"\n                                row\n                            >\n                                <template v-slot:item="{item}">\n                                    <drag\n                                        :key="item.id"\n                                        class=\'t-studyline-drag\'\n                                        :data="item"\n                                        :type="\'studyline-\'+page.id"\n                                        >\n                                        <template v-slot:drag-image>\n                                            <i class="fa fa-arrows text-primary"></i>\n                                        </template>\n                                        <t-studyline-edit\n                                            v-model="item"\n                                            @edit=\'editLineStart(item)\'\n                                            @delete=\'deleteLine(page,item)\'\n                                            >\n                                            <div v-if="!slotsempty(item.slots)"> {{ text.editmode_modules_hidden}} </div>\n                                        </t-studyline-edit>\n                                    </drag>\n                                </template>\n                            </drop-list>\n                        </div>\n                        <div class=\'t-studyplan-content\' v-else>\n\n                            \x3c!-- Now paint the headings column --\x3e\n                            <div class=\'t-studyplan-headings\'>\n                                <s-studyline-header-heading :identifier=\'Number(page.id)\'></s-studyline-header-heading>\n                                <t-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                                    :key="line.id"\n                                    @resize="headingresized(lineindex,$event)"\n                                    v-model="page.studylines[lineindex]"\n                                    :layers=\'countLineLayers(line,page)+1\'\n                                    :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                            + ((lineindex==0)?\' first \':\' \')\n                                            + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                                ></t-studyline-heading>\n                            </div>\n                            \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                            <div class="t-studyplan-scrollable" >\n                                <div class="t-studyplan-timeline" :style="columns_stylerule(page)">\n                                \x3c!-- add period information --\x3e \n                                <template v-for="(n,index) in (page.periods+1)">\n                                    <s-studyline-header-period\n                                        :identifier=\'Number(page.id)\'\n                                        v-if="index > 0"\n                                        v-model="page.perioddesc[index-1]"\n                                        ><t-period-edit\n                                            :ref="\'periodeditor-\'+index"\n                                            @edited="periodEdited"\n                                            v-model="page.perioddesc[index-1]"\n                                            :minstart="(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null"\n                                            :maxend="(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null"\n                                        ></t-period-edit\n                                    ></s-studyline-header-period>\n                                    <div class="s-studyline-header-filter"></div>\n                                </template>\n\n                                \x3c!-- Line by line add the items --\x3e\n                                \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                                <template v-for="(line,lineindex) in page.studylines"\n                                    ><template v-for="(layernr,layeridx) in countLineLayers(line,page)+1"\n                                        ><template v-for="(n,index) in (page.periods+1)"\n                                            >\n                                            <t-studyline-slot\n                                                v-if="index > 0 && showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'gradable\'\n                                                v-model="line.slots[index].courses"\n                                                :key="\'c-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                :slotindex="index"\n                                                :line="line"\n                                                :plan="value"\n                                                :page="page"\n                                                :period="page.perioddesc[index-1]"\n                                                :layer="layeridx"\n                                                :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                        + ((lineindex==0 && layernr==1)?\' first \':\' \')\n                                                        + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                        + ((layernr == countLineLayers(line,page))?\' lastlyr \':\' \')\n                                                        + ((layernr == countLineLayers(line,page)+1)?\' newlyr \':\' \')"\n                                            ></t-studyline-slot\n                                            ><t-studyline-slot\n                                                type=\'filter\'\n                                                v-if="showslot(page,line, index, layeridx, \'filter\')"\n                                                v-model="line.slots[index].filters"\n                                                :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                :slotindex="index"\n                                                :line="line"\n                                                :plan="value"\n                                                :page="page"\n                                                :layer="layeridx"\n                                                :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                        + ((lineindex==0 && layernr==1)?\' first \':\'\')\n                                                        + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                        + ((index==page.periods)?\' rightmost\':\'\')\n                                                        + ((layernr == countLineLayers(line,page))?\' lastlyr \':\' \')\n                                                        + ((layernr == countLineLayers(line,page)+1)?\' newlyr \':\' \')"\n                                                >\n                                            </t-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div>\n                            </div>\n                        </div>\n                        <div v-if="edit.studyline.editmode" class=\'t-studyline-add\'>\n                            <a href="#" v-b-modal="\'modal-add-studyline-\'+page.id" @click="false;"\n                                ><i class=\'fa fa-plus\'></i>{{ text.studyline_add }}</a>\n                        </div>\n                        <b-modal\n                            :id="\'modal-add-studyline-\'+page.id"\n                            size="lg"\n                            :ok-title="text.add$core"\n                            ok-variant="primary"\n                            :title="text.studyline_add"\n                            @ok="addStudyLine(page,create.studyline)"\n                            :ok-disabled="Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0"\n                            >\n                            <b-container>\n                                <b-row>\n                                    <b-col cols="3">{{text.studyline_name}}</b-col>\n                                    <b-col>\n                                        <b-form-input v-model="create.studyline.name" :placeholder="text.studyline_name_ph"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="3">{{text.studyline_shortname}}</b-col>\n                                    <b-col>\n                                    <b-form-input\n                                        v-model="create.studyline.shortname"\n                                        :placeholder="text.studyline_shortname_ph"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="3">{{text.studyline_color}}</b-col>\n                                    <b-col>\n                                        <input type="color" v-model="create.studyline.color" />\n                                        \x3c!-- hsluv-picker v-model="create.studyline.color" horizontal displaysize="175" ></hsluv-picker --\x3e\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <b-modal\n                            :id="\'modal-edit-studyline-\'+page.id"\n                            size="lg"\n                            ok-variant="primary"\n                            :title="text.studyline_edit"\n                            @ok="editLineFinish()"\n                            :ok-disabled="Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0"\n                            >\n                            <b-container>\n                                <b-row>\n                                    <b-col cols="3">{{ text.studyline_name}}</b-col>\n                                    <b-col>\n                                        <b-form-input\n                                            v-model="edit.studyline.data.name"\n                                            :placeholder="text.studyline_name_ph"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="3">{{ text.studyline_shortname}}</b-col>\n                                    <b-col>\n                                    <b-form-input\n                                        v-model="edit.studyline.data.shortname"\n                                        :placeholder="text.studyline_shortname_ph"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="3">{{ text.studyline_color}}</b-col>\n                                    <b-col>\n                                        <input type="color" v-model="edit.studyline.data.color" />\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                    </b-tab>\n                </b-tabs>\n            </div>\n            '}),Vue.component("t-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange(lineid,layerid,newheight){if(this.$refs.main&&lineid==this.value.id){const items=document.querySelectorAll(`.t-studyline-slot-0[data-studyline='${this.value.id}']`);let heightSum=0;items.forEach((el=>{const height=el.getBoundingClientRect().height;heightSum+=height}));const heightStyle=`${heightSum}px`;this.$refs.main.style.height=heightStyle}}},template:'\n            <div class="t-studyline t-studyline-heading "\n                :data-studyline="value.id" ref="main"\n                ><div class="t-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="t-studyline-title">\n                    <abbr v-b-tooltip.hover.right :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("t-studyline-edit",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({}),computed:{deletable(){const slots=this.value.slots;if(Array.isArray(slots)){let count=0;for(let i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},editable:()=>!0},methods:{onEdit(){this.$emit("edit",this.value)},onDelete(){this.$emit("delete",this.value)}},template:"\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            "}),Vue.component("t-studyline-slot",{props:{type:{type:String,default:"gradable"},slotindex:{type:Number,default:""},line:{type:Object,default:()=>null},layer:{type:Number},value:{type:Array,default:()=>[]},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},period:{type:Object,default:()=>null}},mounted(){const self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.main){const size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,size.height)}})).observe(self.$refs.main))},unmounted(){this.resizeListener&&this.resizeListener.disconnect()},computed:{slotkey(){return`${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`},itemidx(){for(const ix in this.value){if(this.value[ix].layer==this.layer)return ix}return null},item(){for(const ix in this.value){const itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},listtype(){return this.type},dragacceptlist(){return"gradable"==this.type?["course","gradable-item"]:["filter","filter-item"]},courseHoverDummy(){return{course:this.hover.component}},current(){if(this.period&&this.period.startdate&&this.period.enddate){const now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss(){if(this.item&&this.item.span>1){return`width: 100%; grid-column: span ${2*this.item.span-1};`}return""}},data:()=>({text:strings.course_timing,resizeListener:null,hover:{component:null,type:null},datechanger:{coursespan:null,periodspan:null,default:!1,defaultchoice:!1,hidewarn:!1}}),methods:{onDrop(event){this.hover.component=null,this.hover.type=null,debug.info(event);const self=this;if(event.type.item){let item=event.data;item.layer=this.layer,item.slot=this.slotindex,self.value.push(item),self.$emit("input",self.value),self.relocateStudyItem(item).done((()=>{this.$refs.timingChecker&&this.$refs.timingChecker.validate_course_period()}))}else event.type.component&&(debug.info("Adding new component"),"gradable"==event.type.type?(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,layer:self.layer,type:"course",details:{competency_id:null,conditions:"",course_id:event.data.id,badge_id:null,continuation_id:null}}}])[0].done((response=>{let item=response;self.relocateStudyItem(item).done((()=>{self.value.push(item),self.$emit("input",self.value),this.$nextTick((()=>{this.$refs.timingChecker&&this.$refs.timingChecker.validate_course_period()}))}))})).fail(_notification.default.exception):"filter"==event.type.type&&(debug.info("Adding new filter compenent"),(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,type:event.data.type,details:{badge_id:event.data.badge?event.data.badge.id:void 0}}}])[0].done((response=>{let item=response;self.relocateStudyItem(item).done((()=>{item.layer=this.layer,self.value.push(item),self.$emit("input",self.value)}))})).fail(_notification.default.exception)))},onCut(event){const self=this;let id=event.data.id;for(let i=0;i<self.value.length;i++)if(self.value[i].id==id){self.value.splice(i,1),i--;break}this.$emit("input",this.value)},relocateStudyItem(item){const iteminfo={id:item.id,layer:this.layer,slot:this.slotindex,line_id:this.line.id};return(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studyitems",args:{items:[iteminfo]}}])[0].fail(_notification.default.exception)},onDragEnter(event){this.hover.component=event.data,this.hover.type=event.type},onDragLeave(){this.hover.component=null,this.hover.type=null},maxSpan(){let freeIndex=this.slotindex;for(let i=this.slotindex+1;i<=this.page.periods&&(this.line.slots&&this.line.slots[i]&&this.line.slots[i].courses);i++){const clist=this.line.slots[i].courses,flist=this.line.slots[i-1].filters;let busy=!1;for(const ix in clist)if(clist[ix].layer==this.layer){busy=!0;break}for(const ix in flist)if(flist[ix].layer==this.layer){busy=!0;break}if(busy)break;freeIndex=i}return freeIndex-this.slotindex+1},makeType(item){return{item:!0,component:!1,span:item.span,type:this.type}},checkType(type){return type.type==this.type&&("filter"==type||type.span<=this.maxSpan())}},template:'\n            <div :class="\'t-studyline-slot \'+type + \' t-studyline-slot-\'+slotindex + \' \' + ((slotindex==0)?\' t-studyline-firstcolumn \':\' \')\n                         + (current?\'current \':\' \')"\n                :data-studyline="line.id" ref="main"\n                :style=\'spanCss\'\n                ><drag v-if="item"\n\n                    :key="item.id"\n                    class="t-slot-item"\n                    :data="item"\n                    :type="makeType(item)"\n                    @cut="onCut"\n                        ><t-item\n                            @deleted="onCut"\n                            v-model="value[itemidx]"\n                            :plan="plan"\n                            :line=\'line\'\n                            :page=\'page\'\n                            :period=\'period\'\n                            :maxspan=\'maxSpan()\'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class="\'t-slot-drop \'+type + (layer > 0?\' secondary\':\' primary\')"\n                    :accepts-type="checkType"\n                    @drop="onDrop"\n                    mode="cut"\n                    @dragenter="onDragEnter"\n                    @dragleave="onDragLeave"\n                ><template v-if="hover.component">\n                        <div v-if="hover.type.item"\n                            class="t-slot-item feedback"\n                            :key="hover.component.id"\n                            ><t-item v-model="hover.component" dummy></t-item\n                            ></div\n                        ><div v-else-if="hover.type.type == \'gradable\'"\n                            class="t-slot-item feedback"\n                            :key="\'course-\'+hover.component.id"\n                            ><t-item-course v-model="courseHoverDummy"></t-item-course></div\n                        ><div v-else-if="hover.type.type == \'filter\'"\n                            class="t-slot-item feedback"\n                            key="tooldrop"\n                            ><t-item-junction    v-if="hover.component.type == \'junction\'" ></t-item-junction\n                            ><t-item-start       v-else-if="hover.component.type == \'start\'"    ></t-item-start\n                            ><t-item-finish      v-else-if="hover.component.type == \'finish\'"   ></t-item-finish\n                            ><t-item-badge       v-else-if="hover.component.type == \'badge\'"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class="t-slot-item feedback"\n                            :key="hover.type">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if="value && value[itemidx] && value[itemidx].course"\n                    ref="timingChecker"\n                    :maxspan="maxSpan()"\n                    :page="page"\n                    :period="period"\n                    v-model="value[itemidx]"\n                    ></t-item-timing-checker>\n            </div>\n            '}),Vue.component("t-item-timing-checker",{props:{value:{type:Object},page:{type:Object},period:{type:Object},maxspan:{type:Number},hidden:{type:Boolean,default:!1}},computed:{endperiod(){const endperiodnr=Math.min(this.page.periods,this.period.period+(this.value.span-1));return this.page.perioddesc[endperiodnr-1]},course_period_matches(){const self=this;return self.value&&"course"==self.value.type?(self.datechanger.coursespan=(0,_dateHelper.datespaninfo)(self.value.course.startdate,self.value.course.enddate),self.datechanger.periodspan=(0,_dateHelper.datespaninfo)(self.period.startdate,self.endperiod.enddate),self.datechanger.coursespan.first.getTime()==self.datechanger.periodspan.first.getTime()&&self.datechanger.coursespan.last.getTime()==self.datechanger.periodspan.last.getTime()):(debug.warn("Timing thing not proper configured",self.value,self.period,self.maxspan),!1)}},data:()=>({id:Math.floor(Math.random()*Date.now()).toString(16),text:strings.course_timing,datechanger:{coursespan:null,periodspan:null,globals:datechanger_globals}}),methods:{validate_course_period(force){const self=this;debug.info("Validating course and period"),self.course_period_matches?debug.info("Course timing matches period",self.datechanger):(debug.info("Course timing does not match period timing"),self.value.course.canupdatecourse?self.hidden&&self.datechanger.globals.default?self.datechanger.globals.defaultvalue&&self.change_course_period():this.$bvModal.show("t-course-timing-matching-"+this.id):self.hidden&&self.datechanger.globals.hidewarn||this.$bvModal.show("t-course-timing-warning-"+this.id))},change_course_period(){const self=this;return self.datechanger.globals.default&&(self.datechanger.globals.defaultvalue=!0),(0,_ajax.call)([{methodname:"local_treestudyplan_course_period_timing",args:{period_id:self.period.id,course_id:this.value.course.id,span:this.value.span}}])[0].fail(_notification.default.exception).done((response=>{self.value.course.startdate=response.startdate,self.value.course.enddate=response.enddate,self.value.course.timing=response.timing,self.$emit("input",self.value)}))},change_span(span){const self=this;return(0,_ajax.call)([{methodname:"local_treestudyplan_set_studyitem_span",args:{id:self.value.id,span:span}}])[0].fail(_notification.default.exception).done((response=>{self.value.span=response.span,self.$emit("input",self.value),self.$nextTick((()=>{self.validate_course_period()}))}))},format_duration(dsi){let s="";return 1==dsi.years?s+=`1 ${this.text.year}, `:dsi.years>1&&(s+=`${dsi.years} ${this.text.years}, `),1==dsi.weeks?s+=`1 ${this.text.week}, `:dsi.weeks>1&&(s+=`${dsi.weeks} ${this.text.weeks}, `),1==dsi.days?s+=`1 ${this.text.day}, `:dsi.days>1&&(s+=`${dsi.days} ${this.text.days}, `),s.toLocaleLowerCase()}},template:'\n            <div :class="\'t-item-timing-checker\'" :style="hidden?\'display: none \':\'\'">\n                <template v-if="!hidden" >\n                    <span class="mr-1" v-if="course_period_matches">\n                        <i  class="text-success fa fa-calendar-check-o"\n                            v-b-tooltip.hover.topright :title="text.timing_ok"\n                        ></i>\n                    </span>\n                    <span class="mr-1" v-else>\n                        <a  href=\'#\' @click="validate_course_period()" class="text-warning"\n                            v-b-tooltip.hover.bottomleft :title="text.timing_off"\n                            ><i class="fa fa-calendar-times-o"\n                            ></i\n                            ><i class="fa fa-question-circle text-black-50"\n                                style="font-size: 0.8em; top: -0.3em; position: relative;"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class="ml-1" v-b-tooltip.hover.bottomleft :title="text.periodspan_desc"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=""\n                            size="sm" @change="change_span" v-model="value.span">\n                            <b-form-select-option v-for="(n,i) in maxspan" :value=\'n\' :key=\'i\'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class="fa fa-question-circle text-black-50"\n                            style="font-size: 0.8em; top: -0.3em; position: relative;"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id="\'t-course-timing-matching-\'+this.id"\n                    size="lg"\n                    :title="text.title"\n                    @ok="change_course_period"\n                    :ok-title="text.yes"\n                    ok-variant="danger"\n                    :cancel-title="text.no"\n                    cancel-variant="primary"\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols="6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.default">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id="\'t-course-timing-warning-\'+this.id"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.title"\n                    :ok-title="text.yes"\n                    ok-only\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>"6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.hidewarn">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item",{props:{value:{type:Object,default:()=>null},dummy:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null},line:{type:Object,default:()=>null},page:{type:Object,default:()=>null},period:{type:Object,default:()=>null},maxspan:{type:Number,default:()=>0}},data:()=>({dragLine:null,dragEventListener:null,deleteMode:!1,condition_options:string_keys.conditions,text:strings.item_text,showContext:!1,lines:[]}),methods:{dragStart(event){this.deleteMode=!1;let start=document.getElementById("studyitem-"+this.value.id),dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.position.x+"px",dragelement.style.top=event.position.y+"px",this.dragLine=new _simpleline.SimpleLine(start,dragelement,{color:"#777",gravity:{start:1.3,end:1.3}}),document.addEventListener("mousemove",this.onMouseMove)},dragEnd(){null!==this.dragLine&&this.dragLine.remove();let dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.removeProperty("left"),dragelement.style.removeProperty("top"),dragelement.style.removeProperty("position"),document.removeEventListener("mousemove",this.onMouseMove)},onMouseMove:function(event){let dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.clientX+"px",dragelement.style.top=event.clientY+"px"},onDrop(event){let from_id=event.data.id,to_id=this.value.id;this.redrawLines(),(0,_ajax.call)([{methodname:"local_treestudyplan_connect_studyitems",args:{from_id:from_id,to_id:to_id}}])[0].done((response=>{let conn={id:response.id,from_id:response.from_id,to_id:response.to_id};ItemEventBus.$emit("createdConnection",conn),this.value.connections.in.push(conn)})).fail(_notification.default.exception)},redrawLine(conn){const start=document.getElementById(`studyitem-${conn.from_id}`),end=document.getElementById(`studyitem-${conn.to_id}`);this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id]),null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(this.lines[conn.to_id]=new _simpleline.SimpleLine(start,end,{color:"var(--success)",gravity:{start:1.3,end:1.3}}))},deleteLine(conn){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disconnect_studyitems",args:{from_id:conn.from_id,to_id:conn.to_id}}])[0].done((response=>{if(response.success){this.removeLine(conn),ItemEventBus.$emit("connectionDisconnected",conn);let index=self.value.connections.out.indexOf(conn);self.value.connections.out.splice(index,1)}})).fail(_notification.default.exception)},highlight(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--danger)"})},normalize(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--success)"})},updateItem(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions,continuation_id:this.value.continuation_id}}])[0].fail(_notification.default.exception)},doShowContext(event){this.hasContext&&(this.showContext=!0,event.preventDefault())},redrawLines(){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onCreatedConnection(conn){conn.from_id==this.value.id&&(this.value.connections.out.push(conn),this.redrawLine(conn))},onRemovedConnection(conn){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.in){let c_in=this.value.connections.in[i];conn.id==c_in.id&&self.value.connections.out.splice(i,1)}},onRePositioned(){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onDisPositioned(re_id){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.out){let conn=this.value.connections.out[i];conn.to_id==re_id&&this.removeLine(conn)}},onItemDeleted(item_id){const self=this;if(this.value.connections&&this.value.connections.out)for(const i in this.value.connections.out){let conn=this.value.connections.out[i];conn.to_id==item_id&&(self.removeLine(conn),self.value.connections.out.splice(i,1))}if(this.value.connections&&this.value.connections.in)for(const i in this.value.connections.in){this.value.connections.in[i].from_id==item_id&&self.value.connections.out.splice(i,1)}},onRedrawLines(){this.redrawLines()},removeLine(conn){this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id])},deleteItem(){const self=this,msgparams={item:this.text["type_"+this.value.type].toLocaleLowerCase(),name:"course"==this.value.type?this.value.course.displayname:"",line:this.line?this.line.name:"",period:this.period?this.period.fullname:this.plan.name};this.$bvModal.msgBoxConfirm((0,_stringHelper.strformat)(this.text.item_delete_message,msgparams),{okVariant:"danger",okTitle:this.text.ok,cancelTitle:this.text.cancel}).then((value=>{value&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:self.value.id}}])[0].done((function(response){1==response.success&&self.$emit("deleted",{data:self.value})})).fail(_notification.default.exception)})).catch((err=>{debug.console.error(err)}))}},computed:{hasConnectionsOut(){return!["finish"].includes(this.value.type)},hasConnectionsIn(){return!["start"].includes(this.value.type)},hasContext(){return["start","junction","finish"].includes(this.value.type)}},created(){this.dummy||(ItemEventBus.$on("createdConnection",this.onCreatedConnection),ItemEventBus.$on("removedConnection",this.onRemovedConnection),ItemEventBus.$on("rePositioned",this.onRePositioned),ItemEventBus.$on("disPositioned",this.onDisPositioned),ItemEventBus.$on("itemDeleted",this.onItemDeleted),ItemEventBus.$on("redrawLines",this.onRedrawLines))},mounted(){this.dummy||(this.redrawLines(),setTimeout((()=>{ItemEventBus.$emit("rePositioned",this.value.id)}),10))},beforeDestroy(){if(!this.dummy){for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.removeLine(conn)}ItemEventBus.$emit("disPositioned",this.value.id),ItemEventBus.$off("createdConnection",this.onCreatedConnection),ItemEventBus.$off("removedConnection",this.onRemovedConnection),ItemEventBus.$off("rePositioned",this.onRePositioned),ItemEventBus.$off("disPositioned",this.onDisPositioned),ItemEventBus.$off("itemDeleted",this.onItemDeleted),ItemEventBus.$off("redrawLines",this.onRedrawLines)}},beforeUpdate(){},updated(){this.dummy||this.redrawLines()},template:'\n            <div class="t-item-base" :id="\'studyitem-\'+value.id">\n                <t-item-course\n                    v-if="value.type == \'course\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                    :plan=\'plan\'\n                    :page=\'page\'\n                    :period=\'period\'\n                    :maxspan=\'maxspan\'\n                ></t-item-course>\n                <t-item-junction\n                    v-if="value.type == \'junction\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-junction>\n                <t-item-start\n                    v-if="value.type == \'start\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-start>\n                <t-item-finish\n                    v-if="value.type == \'finish\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if="value.type == \'badge\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if="value.type == \'invalid\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-invalid>\n                <drop v-if=\'!dummy && hasConnectionsIn\' accepts-type="linestart"\n                    :id="\'t-item-cend-\'+value.id"\n                    class="t-item-connector-end"\n                    mode="copy"\n                    @drop="onDrop"\n                    ><svg width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg></drop>\n                <drag v-if=\'!dummy && hasConnectionsOut\' type="linestart"\n                    :id="\'t-item-cstart-\'+value.id"\n                    :class="\'t-item-connector-start \' + ((deleteMode&&value.connections.out.length)?\'deleteMode\':\'\')"\n                    :data="value"\n                    @dragstart="dragStart"\n                    @dragend="dragEnd"\n                    @click="deleteMode = (value.connections.out.length)?(!deleteMode):false"\n                    >\n                    <svg  width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg>\n                    <template v-slot:drag-image="{data}"> <i :id="\'t-item-cdrag-\'+value.id" class="fa"></i>\n                    </template>\n                </drag>\n                <div class="deletebox" v-if="deleteMode && value.connections.out.length > 0"\n                    >\n                    <a v-for="conn in value.connections.out"\n                        @click="deleteLine(conn)"\n                        @mouseenter="highlight(conn)"\n                        @mouseleave="normalize(conn)"\n                        class="t-connection-delete text-danger"\n                        :title="conn.id">\n                        <i class="fa fa-trash"></i>\n                    </a>\n                </div>\n                <a  v-if="hasContext" class="t-item-config"\n                    v-b-modal="\'t-item-config-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal no-body class=""\n                    :id="\'t-item-config-\'+value.id"\n                    :title="text[\'item_configuration\']"\n                    scrollable\n                    ok-only\n                    class="t-item-contextview b-modal-justify-footer-between"\n                >\n                    <b-form-group\n                        v-if="value.type != \'start\'"\n                        :label="text.select_conditions"\n                    >\n                        <b-form-select size="sm"\n                            @input="updateItem"\n                            v-model="value.conditions"\n                            :options="condition_options"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer="{ ok, cancel, hide }" >\n                    <a href=\'#\' @click=\'deleteItem()\' class="text-danger"\n                        ><i class="fa fa-trash"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size="sm" variant="primary" @click="ok()">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:()=>({text:strings.invalid}),methods:{},template:'\n            <div class="t-item-invalid">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="t-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{text.error}}\n                            <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("t-item-course",{props:{value:{type:Object,default:()=>null},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},period:{type:Object,default:()=>null},maxspan:{type:Number,default:()=>0}},data:()=>({condition_options:string_keys.conditions,text:strings.item_course_text}),computed:{useItemConditions(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useItemConditions)&&this.plan.aggregation_info.useItemConditions},configurationState(){return this.hasGrades()||this.hasCompletions()?"t-configured-ok":"t-configured-alert"},configurationIcon(){return this.hasGrades()||this.hasCompletions()?"check":"exclamation-circle"},startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},methods:{hasGrades(){if(this.value.course.grades&&this.value.course.grades.length>0)for(const g of this.value.course.grades)if(g.selected)return!0;return!1},hasCompletions(){if(this.value.course.completion&&this.value.course.completion.conditions)for(const cgroup of this.value.course.completion.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)},updateConditions(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions}}])[0].fail(_notification.default.exception)}},created(){},template:'\n            <div class="t-item-course">\n            <b-card no-body >\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'t-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body >\n                            <a  class="t-item-course-config"\n                                v-b-modal="\'t-item-course-config-\'+value.id"\n                                href="#" @click.prevent=""\n                                ><i :class="\'fa fa-\'+configurationIcon+\' \' + configurationState"></i></a>\n                            <a  v-b-modal="\'t-item-course-config-\'+value.id"\n                                :id="\'t-item-course-details-\'+value.id"\n                                :href="\'/course/view.php?id=\'+value.course.id"\n                                @click.prevent.stop="">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=""\n                    :id="\'t-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    size="lg"\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <a v-if=\'!!value.course.completion\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.shortname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class="mt-1"\n                                :maxspan="maxspan"\n                                :page="page"\n                                :period="period"\n                                v-model="value"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value\' :plan="plan"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            '}),Vue.component("t-item-course-grades",{props:{value:{type:Object,default:()=>null},plan:{type:Object,default:()=>null}},data:()=>({condition_options:string_keys.conditions,text:strings.item_course_text}),computed:{useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},selectedgrades(){let list=[];for(let ix in this.value.course.grades){let g=this.value.course.grades[ix];g.selected&&list.push(g)}return list}},methods:{includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},created(){},template:'\n            <div>\n                <b-form-group\n                    :label="text.select_grades"\n                    ><ul class="t-item-module-children">\n                        <li class="t-item-course-gradeinfo">\n                            <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                            ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                        </li>\n                        <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                            <b-form-checkbox inline\n                                @change="includeChanged($event,g)" v-model="g.selected"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                @change="requiredChanged($event,g)" v-model="g.required"\n                                ></b-form-checkbox>\n                            <span :title="g.typename" v-html="g.icon"></span>\n                            <s-edit-mod\n                                :title="value.course.fullname"\n                                @saved="(fd) => g.name = fd.get(\'name\')"\n                                v-if="g.cmid > 0"\n                                :cmid="g.cmid"\n                                :coursectxid="value.course.ctxid"\n                                genericonly><span v-html="g.name"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            '}),Vue.component("t-item-course-completion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){const self=this;let stringkeys=[];for(const key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){let i=0;for(const key in self.text)self.text[key]=strings[i],i++}))},computed:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1}},methods:{completion_icon(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:cgroup=>cgroup.completion?"completed":"incomplete"},template:"\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            "}),Vue.component("t-item-junction",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({condition_options:string_keys.conditions}),methods:{},template:"\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-finish",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({}),methods:{},template:"\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-start",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({}),created(){},methods:{},template:"\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-badge",{props:{value:{type:Object,default:function(){return{badge:{}}}}},data:()=>({txt:strings,text:strings.item_text}),methods:{},template:'\n            <div class=\'t-item-badge t-item-filter\' v-b-tooltip.hover :title="value.badge.name">\n                <svg class="t-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"/>\n                </svg>\n                <a class="t-item-config badge"\n                v-b-modal="\'t-item-badge-details-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal class=""\n                    :id="\'t-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            '}),Vue.component("t-coursecat-list",{props:{value:{type:Array,default:function(){return{}}}},data:()=>({}),methods:{},template:'\n            <ul class="t-coursecat-list">\n                <t-coursecat-list-item\n                    v-for="coursecat,idx in value"\n                    v-model="value[idx]"\n                    :key="coursecat.id"></t-coursecat-list-item>\n            </ul>\n            '}),Vue.component("t-coursecat-list-item",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({loading:!1}),computed:{showSpinner(){return this.canLoadMore()},hasDetails(){return this.value.haschildren||this.value.hascourses}},methods:{canLoadMore(){return this.value.haschildren&&(!this.value.children||0==this.value.children.length)||this.value.hascourses&&(!this.value.courses||0==this.value.courses.length)},onShowDetails(){const self=this;this.canLoadMore()&&(0,_ajax.call)([{methodname:"local_treestudyplan_get_category",args:{id:this.value.id}}])[0].done((function(response){self.$emit("input",response)})).fail(_notification.default.exception)}},template:'\n            <li class="t-coursecat-list-item">\n                <span v-if="hasDetails" v-b-toggle="\'coursecat-\'+value.id">\n                    <i class="when-closed fa fa-caret-right"></i>\n                    <i class="when-open fa fa-caret-down"></i>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if="hasDetails" :id="\'coursecat-\'+value.id"\n                    @show="onShowDetails" :visible="!!(value.children) || !!(value.courses)">\n                    <b-spinner class="ml-4" v-if="showSpinner" small variant="primary"></b-spinner>\n                    <t-coursecat-list v-if="value.children" v-model="value.children"></t-coursecat-list>\n                    <t-course-list v-if="value.courses" v-model="value.courses"></t-course-list>\n                </b-collapse>\n            </li>\n            '}),Vue.component("t-course-list",{props:{value:{type:Array,default:function(){return{}}}},data:()=>({}),methods:{makeType:()=>({item:!1,component:!0,span:1,type:"gradable"})},template:'\n            <ul class="t-course-list">\n                <li class="t-course-list-item" v-for="course in value" :key="course.id">\n                    <drag\n                        class="draggable-course"\n                        :data="course"\n                        :type="makeType()"\n                        @cut=""\n                    >\n                    <i class="t-course-list-item fa fa-book"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            '})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/studyplan-editor-components",["exports","./simpleline/simpleline","core/ajax","core/notification","core/str","./util/string-helper","./util/date-helper","./studyplan-processor","./util/debugger","./downloader","./treestudyplan-components","./util/mform-helper"],(function(_exports,_simpleline,_ajax,_notification,_str,_stringHelper,_dateHelper,_studyplanProcessor,_debugger,_downloader,_treestudyplanComponents,_mformHelper){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents),_mformHelper=_interopRequireDefault(_mformHelper);const STUDYPLAN_EDITOR_FIELDS=["name","shortname","description","idnumber","context_id","aggregation","aggregation_config"],PERIOD_EDITOR_FIELDS=["fullname","shortname","startdate","enddate"],datechanger_globals={default:!1,defaultchoice:!1,hidewarn:!1};var _default={STUDYPLAN_EDITOR_FIELDS:STUDYPLAN_EDITOR_FIELDS,install(Vue){Vue.use(_treestudyplanComponents.default),Vue.use(_mformHelper.default);let debug=new _debugger.default("treestudyplan-editor");function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}const ItemEventBus=new Vue;let string_keys=(0,_stringHelper.load_stringkeys)({conditions:[{value:"ALL",textkey:"condition_all"},{value:"ANY",textkey:"condition_any"}]}),strings=(0,_stringHelper.load_strings)({studyplan_text:{studyline_editmode:"studyline_editmode",toolbox_toggle:"toolbox_toggle",editmode_modules_hidden:"editmode_modules_hidden",studyline_add:"studyline_add",add$core:"add$core",edit$core:"edit$core",studyline_name:"studyline_name",studyline_name_ph:"studyline_name_ph",studyline_shortname:"studyline_shortname",studyline_shortname_ph:"studyline_shortname_ph",studyline_color:"studyline_color",associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",studyline_edit:"studyline_edit",studyplan_name:"studyplan_name",studyplan_name_ph:"studyplan_name_ph",studyplan_shortname:"studyplan_shortname",studyplan_shortname_ph:"studyplan_shortname_ph",studyplan_description:"studyplan_description",studyplan_description_ph:"studyplan_description_ph",studyplan_idnumber:"studyplan_idnumber",studyplan_idnumber_ph:"studyplan_idnumber_ph",studyplan_slots:"studyplan_slots",studyplan_startdate:"studyplan_startdate",studyplan_enddate:"studyplan_enddate"},studyplan_advanced:{advanced_tools:"advanced_tools",confirm_cancel:"confirm_cancel",confirm_ok:"confirm_ok",success$core:"success$core",error$core:"failed$core",advanced_converted:"advanced_converted",advanced_skipped:"advanced_skipped",advanced_failed:"advanced_failed",advanced_locked:"advanced_locked",advanced_multiple:"advanced_multiple",advanced_error:"advanced_error",advanced_tools_heading:"advanced_tools_heading",advanced_warning_title:"advanced_warning_title",advanced_warning:"advanced_warning",advanced_pick_scale:"advanced_pick_scale",advanced_course_manipulation_title:"advanced_course_manipulation_title",advanced_force_scale_title:"advanced_force_scale_title",advanced_force_scale_desc:"advanced_force_scale_desc",advanced_force_scale_button:"advanced_force_scale_button",advanced_disable_autoenddate_title:"advanced_disable_autoenddate_title",advanced_disable_autoenddate_desc:"advanced_disable_autoenddate_desc",advanced_disable_autoenddate_button:"advanced_disable_autoenddate_button",advanced_confirm_header:"advanced_confirm_header",advanced_force_scale_confirm:"advanced_force_scale_confirm",advanced_import:"advanced_import",advanced_export:"advanced_export",advanced_export_csv:"advanced_export_csv",advanced_import_from_file:"advanced_import_from_file",advanced_purge:"advanced_purge",advanced_purge_expl:"advanced_purge_expl",advanced_cascade_cohortsync_title:"advanced_cascade_cohortsync_title",advanced_cascade_cohortsync_desc:"advanced_cascade_cohortsync_desc",advanced_cascade_cohortsync:"advanced_cascade_cohortsync"},studyplan_edit:{studyplan_edit:"studyplan_edit",studyplan_add:"studyplan_add",studyplanpage_add:"studyplanpage_add",studyplanpage_edit:"studyplanpage_edit"},period_edit:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate"},course_timing:{title:"course_timing_title",desc:"course_timing_desc",question:"course_timing_question",warning:"course_timing_warning",timing_ok:"course_timing_ok",timing_off:"course_timing_off",course:"course@core",period:"period",yes:"yes$core",no:"no$core",duration:"duration",years:"years$core",year:"year$core",weeks:"weeks$core",week:"week$core",days:"days$core",day:"day$core",rememberchoice:"course_timing_rememberchoice",hidewarning:"course_timing_hidewarning",periodspan:"course_period_span",periods:"periods",periodspan_desc:"course_period_span_desc"},studyplan_associate:{associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",associate_cohorts:"associate_cohorts",associate_users:"associate_users",add_association:"add_association",delete_association:"delete_association",associations_empty:"associations_empty",associations_search:"associations_search",cohorts:"cohorts",users:"users",selected:"selected",name:"name",context:"context"},item_text:{select_conditions:"select_conditions",item_configuration:"item_configuration",ok:"ok@core",delete:"delete@core",item_delete_message:"item_delete_message",type_course:"course@core",type_junction:"tool-junction",type_start:"tool-start",type_finish:"tool-finish",type_badge:"tool-badge",type_invalid:"course-invalid"},item_course_text:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",ok:"ok@core",cancel:"cancel@core",delete:"delete@core"},invalid:{error:"error"},completion:{completion_completed:"completion_completed",completion_incomplete:"completion_incomplete",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo"}});Vue.component("t-studyplan-advanced",{props:{value:{type:Object,default:()=>null}},data:()=>({force_scales:{selected_scale:null,result:[]},text:strings.studyplan_advanced}),created(){},mounted(){},updated(){},computed:{scales(){return[{id:null,disabled:!0,name:this.text.advanced_pick_scale}].concat(this.value.advanced.force_scales.scales)}},methods:{disable_autoenddate(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disable_autoenddate",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)+"\n"+response.msg)})).fail(_notification.default.exception)},force_scales_start(){const self=this;this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{title:this.text.advanced_force_scale_confirm,okVariant:"danger",okTitle:this.text.confirm_ok,cancelTitle:this.text.confirm_cancel}).then((value=>{1==value&&(0,_ajax.call)([{methodname:"local_treestudyplan_force_studyplan_scale",args:{studyplan_id:this.value.id,scale_id:this.force_scales.selected_scale}}])[0].done((function(response){self.force_scales.result=response})).fail(_notification.default.exception)}))},export_plan(format){const self=this;null!=format&&["json","csv"].includes(format)||(format="json"),(0,_ajax.call)([{methodname:"local_treestudyplan_export_plan",args:{studyplan_id:this.value.id,format:format}}])[0].done((function(response){(0,_downloader.download)(self.value.shortname+"."+format,response.content,response.format)})).fail(_notification.default.exception)},import_studylines(){(0,_downloader.upload)(((filename,content)=>{(0,_ajax.call)([{methodname:"local_treestudyplan_import_studylines",args:{studyplan_id:this.value.id,content:content,format:"application/json"}}])[0].done((function(response){response.success?location.reload():debug.error("Import failed: ",response.msg)})).fail(_notification.default.exception)}),"application/json")},purge_studyline(){(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:this.value.id,force:!0}}])[0].done((function(response){response.success?location.reload():debug.error("Could not delete plan: ",response.msg)})).fail(_notification.default.exception)},cascade_cohortsync(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_cascade_cohortsync",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,{title:self.text.advanced_cascade_cohortsync})})).fail(_notification.default.exception)},modal_close(){this.force_scales.result=[]}},template:'\n            <span>\n                <a  v-if="value.advanced"\n                    href=\'#\'\n                    @click.prevent=\'\'\n                    class=\'text-danger\'\n                    v-b-modal="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    ><i class=\'fa fa-wrench\'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if="value.advanced"\n                    :id="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    size="lg"\n                    :title="text.advanced_tools_heading"\n                    ok-only\n                    @hide="modal_close"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title="text.advanced_warning_title" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title="text.advanced_course_manipulation_title" >\n                            <b-container>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="info"\n                                    @click="cascade_cohortsync"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model="force_scales.selected_scale"\n                                    :options="scales" text-field="name" value-field="id"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols="4">\n                                    <b-button\n                                        variant="danger"\n                                        :disabled="force_scales.selected_scale == null"\n                                        @click="force_scales_start"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <ul class=\'t-advanced-scrollable\' v-if="force_scales.result.length > 0">\n                                    <li v-for="c in force_scales.result">\n                                        <span class=\'t-advanced-coursename\'>{{c.course.fullname}}</span>\n                                        <ul v-if="c.grades.length > 0">\n                                            <li v-for=\'g in c.grades\'>\n                                                <span class=\'t-advanced-gradename\'><span v-html="g.name"></span></span>\n                                                <span v-if="g.changed == \'converted\'" class=\'t-advanced-status changed\'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if="g.changed == \'skipped\'" class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="danger"\n                                    @click="disable_autoenddate"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_export\'>\n                            <b-button\n                                    variant="primary"\n                                    @click="export_plan"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant="danger"\n                                    @click="import_studylines"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant="primary"\n                                @click="export_plan(\'csv\')"\n                            >{{ text.advanced_export_csv}}</b-button>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_purge\'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant="danger"\n                                    @click="purge_studyline"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>\n                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan-edit",{props:{value:{type:Object,default:()=>null},mode:{type:String,default:()=>"edit"},type:{type:String,default:()=>"link"},variant:{type:String,default:()=>""},contextid:{type:Number,default:1}},data:()=>({text:strings.studyplan_edit}),computed:{},methods:{planSaved(updatedplan){const self=this;if(debug.info("Got new plan data",updatedplan),"create"==self.mode)self.$emit("created",updatedplan);else{const moved_from=self.value.context_id,moved_to=updatedplan.context_id,moved=moved_from!=moved_to;updatedplan.pages[0].periods!=self.value.pages[0].periods?(0,_ajax.call)([{methodname:"local_treestudyplan_get_studyplan_map",args:{id:self.value.id}}])[0].done((function(response){self.value=(0,_studyplanProcessor.ProcessStudyplan)(response,!0),debug.info("studyplan processed"),self.$emit("input",self.value)})).fail((function(error){_notification.default.exception(error)})):((0,_studyplanProcessor.objCopy)(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS),self.$emit("input",self.value),moved&&self.$emit("moved",self.value,moved_from,moved_to))}}},template:'\n            <span class=\'s-studyplan-edit\'>\n                <mform \n                    name="studyplan_editform" \n                    :params="{studyplan_id: value.id, mode: mode, contextid: contextid }" \n                    @saved="planSaved"\n                    :variant="variant"\n                    :type="type"\n                    :title="(mode == \'create\')?text.studyplan_add:text.studyplan_edit"\n                    ><slot><i class=\'fa fa-gear\'></i></slot></mform>\n            </span>\n            '}),Vue.component("t-studyplan-page-edit",{props:{value:{type:Object,default:()=>null},mode:{type:String,default:()=>"edit"},type:{type:String,default:()=>"link"},variant:{type:String,default:()=>""},studyplan:{type:Object}},data:()=>({text:strings.studyplan_edit}),computed:{},methods:{planSaved(updatedpage){const self=this;if(debug.info("Got new page data",updatedpage),"create"==self.mode)self.$emit("created",updatedpage);else{const page=(0,_studyplanProcessor.ProcessStudyplanPage)(updatedpage);debug.info("studyplan page processed"),self.$emit("input",page)}}},template:'\n            <span class=\'s-studyplan-page-edit\'>\n                <mform \n                    name="studyplanpage_editform" \n                    :params="{page_id: value.id, studyplan_id: studyplan.id, mode: mode }" \n                    @saved="planSaved"\n                    :variant="variant"\n                    :type="type"\n                    :title="(mode == \'create\')?text.studyplanpage_add:text.studyplanpage_edit"\n                    ><slot><i class=\'fa fa-gear\'></i></slot></mform>\n            </span>\n            '}),Vue.component("t-studyplan-associate",{props:["value"],data:()=>({show:!1,config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},association:{cohorts:[],users:[]},loading:{cohorts:!1,users:!1},search:{users:[],cohorts:[]},selected:{search:{users:[],cohorts:[]},associated:{users:[],cohorts:[]}},text:strings.studyplan_associate}),created(){},mounted(){},updated(){},methods:{showModal(){this.show=!0,this.loadAssociations()},cohortOptionModel:c=>({value:c.id,text:c.name+" ("+c.context.path.join(" / ")+")"}),userOptionModel:u=>({value:u.id,text:u.firstname+" "+u.lastname}),loadAssociations(){const self=this;self.loading.cohorts=!0,self.loading.users=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_associated_users",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.users=response.map(self.userOptionModel),self.loading.users=!1})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_associated_cohorts",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.cohorts=response.map(self.cohortOptionModel),self.loading.cohorts=!1})).fail(_notification.default.exception)},searchCohorts(searchtext){const self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_list_cohort",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.cohorts=response.map(self.cohortOptionModel)})).fail(_notification.default.exception):self.search.cohorts=[]},cohortAssociate(){const self=this;let requests=[];const associated=self.association.cohorts,search=self.search.cohorts,searchselected=self.selected.search.cohorts;for(const i in searchselected){const r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})}(0,_ajax.call)(requests)},cohortDisassociate(){const self=this;let requests=[];const associatedselected=self.selected.associated.cohorts,associated=self.association.cohorts,search=self.search.cohorts;for(const i in associatedselected){const r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})}(0,_ajax.call)(requests)},searchUsers(searchtext){const self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_find_user",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.users=response.map(self.userOptionModel)})).fail(_notification.default.exception):self.search.users=[]},userAssociate(){const self=this;let requests=[];const associated=self.association.users,search=self.search.users,searchselected=self.selected.search.users;for(const i in searchselected){const r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})}(0,_ajax.call)(requests)},userDisassociate(){const self=this;let requests=[];const associated=self.association.users,associatedselected=self.selected.associated.users,search=self.search.users;for(const i in associatedselected){const r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})}(0,_ajax.call)(requests)}},template:'\n<span class=\'s-studyplan-associate\'\n    ><a href=\'#\' @click.prevent="showModal" ><slot><i class=\'fa fa-users\'></i></slot></a>\n    <b-modal\n        v-model="show"\n        size="lg"\n        ok-variant="primary"\n        :title="text.associations + \' - \' + value.name"\n        ok-only>\n        <b-tabs class=\'s-studyplan-associate-window\'>\n            <b-tab :title="text.cohorts">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text" @input="searchCohorts($event)"\n                                :placeholder="text.search"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.cohorts"\n                                :options="association.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.cohorts"\n                                :options="search.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                            <b-button variant=\'danger\' @click="cohortDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="cohortAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title="text.users">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text"\n                                @input="searchUsers($event)"\n                                placeholder="Search users"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.users"\n                                :options="association.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.users"\n                                :options="search.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                                <b-button variant=\'danger\' @click="userDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="userAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n'}),Vue.component("t-period-edit",{props:{value:{type:Object,default:()=>null},type:{type:String,default:()=>"link"},variant:{type:String,default:()=>""},minstart:{type:String,default:()=>null},maxend:{type:String,default:()=>null}},data:()=>({show:!1,editdata:{fullname:"",shortname:"",startdate:(new Date).getFullYear()+"-08-01",enddate:(new Date).getFullYear()+1+"-08-01"},text:strings.period_edit}),created(){},mounted(){},updated(){},computed:{},methods:{editStart(){(0,_studyplanProcessor.objCopy)(this.editdata,this.value,PERIOD_EDITOR_FIELDS),this.show=!0},editFinish(){const self=this;let args={id:this.value.id};(0,_studyplanProcessor.objCopy)(args,this.editdata,PERIOD_EDITOR_FIELDS),(0,_ajax.call)([{methodname:"local_treestudyplan_edit_period",args:args}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value),self.$emit("edited",self.value)})).fail(_notification.default.exception)},refresh(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_get_period",args:{id:this.value.id}}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value)})).fail(_notification.default.exception)},add_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)),sub_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days))},template:'\n            <span class=\'t-period-edit\'>\n                <b-button :variant="variant" v-if=\'type == "button"\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></b-button>\n                <a variant="variant" v-else href=\'#\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></a>\n                <b-modal\n                    v-model="show"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.edit"\n                    @ok="editFinish()"\n                    :ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4">{{ text.fullname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.fullname"\n                                :state=\'editdata.fullname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.shortname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.shortname"\n                                :state=\'editdata.shortname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.startdate"\n                                    :min="(minstart ? minstart : \'\')"\n                                    :max="sub_day(value.enddate)"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.enddate"\n                                    :min="add_day(value.startdate)"\n                                    :max="(maxend ? maxend : \'\')"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan",{props:["value","index"],data:()=>({config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},create:{studyline:{name:"",shortname:"",color:"#DDDDDD"},page:{id:-1,name:"",shortname:""}},edit:{toolbox_shown:!1,studyline:{editmode:!1,data:{name:"",shortname:"",color:"#DDDDDD"},original:{}},studyplan:{data:{name:"",shortname:"",description:"",slots:4,startdate:"2020-08-01",enddate:"",aggregation:"",aggregation_config:"",aggregation_info:{useRequiredGrades:!0,useItemCondition:!1}},original:{}}},text:strings.studyplan_text,cache:{linelayers:{}},selectedpageindex:0,emptyline:{id:-1,name:"<No study lines defined>",shortname:"<No study lines>",color:"#FF0000",filterslots:[{}],courseslots:[{}]}}),created(){},mounted(){0==this.value.pages[0].studylines.length&&(this.edit.studyline.editmode=!0),this.$root.$emit("redrawLines")},updated(){this.$root.$emit("redrawLines"),ItemEventBus.$emit("redrawLines")},computed:{selectedpage(){return this.value.pages[this.selectedpageindex]}},methods:{columns:page=>1+2*page.periods,columns_stylerule(page){let s="grid-template-columns: var(--studyplan-filter-width)";for(let i=0;i<page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},trashbin_accepts:type=>!!type.item,countLineLayers(line,page){if(this.cache.linelayers[line.id]&&new Date-this.cache.linelayers[line.id].timestamp<1e3)return this.cache.linelayers[line.id].value;{let maxLayer=-1;for(let i=0;i<=page.periods;i++)if(line.slots[i]){line.slots[i];for(const ix in line.slots[i].courses){const item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(const ix in line.slots[i].filters){const item=line.slots[i].filters[ix];item.layer>maxLayer&&(maxLayer=item.layer)}}return this.cache.linelayers[line.id]={value:maxLayer+1,timestamp:new Date},maxLayer+1}},slotsempty(slots){if(Array.isArray(slots)){let count=0;for(let i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},movedStudyplan(plan,from,to){this.$emit("moved",plan,from,to)},addStudyLine(page,newlineinfo){(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyline",args:{page_id:page.id,name:newlineinfo.name,shortname:newlineinfo.shortname,color:newlineinfo.color,sequence:page.studylines.length}}])[0].done((function(response){page.studylines.push(response),newlineinfo.name="",newlineinfo.shortname="",newlineinfo.color="#dddddd"})).fail(_notification.default.exception)},editLineStart(line){Object.assign(this.edit.studyline.data,line),this.edit.studyline.original=line,this.$bvModal.show("modal-edit-studyline-"+this.value.id)},editLineFinish(){let editedline=this.edit.studyline.data,originalline=this.edit.studyline.original;(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyline",args:{id:editedline.id,name:editedline.name,shortname:editedline.shortname,color:editedline.color}}])[0].done((function(response){originalline.name=response.name,originalline.shortname=response.shortname,originalline.color=response.color})).fail(_notification.default.exception)},deleteLine(page,line){const self=this;(0,_str.get_strings)([{key:"studyline_confirm_remove",param:line.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyline",args:{id:line.id}}])[0].done((function(response){if(1==response.success){let index=page.studylines.indexOf(line);page.studylines.splice(index,1)}})).fail(_notification.default.exception)}))}))},reorderLines(event,lines){event.apply(lines);let sequence=[];for(let idx in lines)sequence.push({id:lines[idx].id,sequence:idx});(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studylines",args:{sequence:sequence}}])[0].done((function(response){})).fail(_notification.default.exception)},deletePlan(studyplan){const self=this;(0,_str.get_strings)([{key:"studyplan_confirm_remove",param:studyplan.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:studyplan.id,force:!0}}])[0].done((function(response){1==response.success&&self.$root.$emit("studyplanRemoved",studyplan)})).fail(_notification.default.exception)}))}))},deleteStudyItem(event){let item=event.data;(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:item.id}}])[0].done((function(response){1==response.success&&event.source.$emit("cut",event)})).fail(_notification.default.exception)},showslot(page,line,index,layeridx,type){const forGradable="gradable"==type,periods=page.periods;let show=!0;for(let i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){const list=line.slots[index-i].courses;for(const ix in list){const item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},periodEdited(pi){const prev=this.$refs["periodeditor-"+(pi.period-1)][0];prev&&prev.refresh();const next=this.$refs["periodeditor-"+(pi.period+1)][0];next&&next.refresh()},add_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)),sub_day:(date,days)=>(void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days)),toolbox_switched(event){this.$emit("toggletoolbox",event)},pagecreated(page){this.value.pages.push(page)},selectedpageChanged(newTabIndex,prevTabIndex){0==this.value.pages[newTabIndex].studylines.length?this.edit.studyline.editmode=!0:this.edit.studyline.editmode=!1}},template:'\n            <div>\n                <div class=\'controlbox t-studyplan-controlbox\'>\n                    <div class="controlbox-group">\n                        <b-form-checkbox v-model="edit.studyline.editmode" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); "\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if="!edit.studyline.editmode" v-model="edit.toolbox_shown" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode=\'copy\'\n                            class=\'t-item-deletebox text-danger border-danger\'\n                            @drop=\'deleteStudyItem\'\n                            :accepts-type="trashbin_accepts"\n                            ><i class=\'fa fa-trash\'></i>\n                        </drop>\n                    </div>\n                    <div class="controlbox-group">\n                        <span class=\'control editable\'>\n                            <t-studyplan-advanced v-model="value"></t-studyplan-advanced>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-associate\n                                v-model="value"><i class=\'fa fa-users\'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-edit v-model="value" @moved="movedStudyplan" \n                                ><i class=\'fa fa-gear\'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class=\'control deletable\'>\n                            <a v-if=\'value.pages.length == 0\' href=\'#\' @click=\'deletePlan(value)\'\n                                ><i class=\'text-danger fa fa-trash\'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <b-card no-body>\n                    <b-tabs \n                        v-model=\'selectedpageindex\' \n                        @activate-tab=\'selectedpageChanged\'\n                        content-class="mt-1">\n                        \x3c!-- New Tab Button (Using tabs-end slot) --\x3e\n                        <template #tabs-end>\n                            <t-studyplan-page-edit \n                                :studyplan="value"\n                                v-model="create.page"\n                                type="link"\n                                mode="create"\n                                @created="pagecreated"\n                            ><i class=\'fa fa-plus\'></i></t-studyplan-page-edit>\n                        </template>\n                        <b-tab\n                            v-for="(page,pageindex) in value.pages"\n                            :key="page.id"\n                            >\n                            <template #title>\n                                {{page.shortname}}\n                                <t-studyplan-page-edit \n                                    v-if="pageindex == selectedpageindex"\n                                    v-model="value.pages[pageindex]"\n                                    :studyplan="value"\n                                    type="link"\n                                ></t-studyplan-page-edit>\n                            </template>\n                            <div class=\'t-studyplan-content-edit\' \n                                v-if="edit.studyline.editmode">\n                                <drop-list\n                                    :items="page.studylines"\n                                    class="t-slot-droplist"\n                                    :accepts-type="\'studyline-\'+page.id"\n                                    xreorder="$event.apply(page.studylines)"\n                                    @reorder="reorderLines($event,page.studylines)"\n                                    mode="copy"\n                                    row\n                                >\n                                    <template v-slot:item="{item}">\n                                        <drag\n                                            :key="item.id"\n                                            class=\'t-studyline-drag\'\n                                            :data="item"\n                                            :type="\'studyline-\'+page.id"\n                                            >\n                                            <template v-slot:drag-image>\n                                                <i class="fa fa-arrows text-primary"></i>\n                                            </template>\n                                            <t-studyline-edit\n                                                v-model="item"\n                                                @edit=\'editLineStart(item)\'\n                                                @delete=\'deleteLine(page,item)\'\n                                                >\n                                                <div v-if="!slotsempty(item.slots)"> {{ text.editmode_modules_hidden}} </div>\n                                            </t-studyline-edit>\n                                        </drag>\n                                    </template>\n                                </drop-list>\n                            </div>\n                            <div class=\'t-studyplan-content\' v-else>\n                                \x3c!-- Now paint the headings column --\x3e\n                                <div class=\'t-studyplan-headings\'>\n                                    <s-studyline-header-heading :identifier=\'Number(page.id)\'></s-studyline-header-heading>\n                                    <template v-if="page.studylines.length > 0">\n                                        <t-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                                            :key="line.id"\n                                            @resize="headingresized(lineindex,$event)"\n                                            v-model="page.studylines[lineindex]"\n                                            :layers=\'countLineLayers(line,page)+1\'\n                                            :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                                    + ((lineindex==0)?\' first \':\' \')\n                                                    + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                                        ></t-studyline-heading>\n                                    </template>\n                                    <t-studyline-heading v-else\n                                        @resize="headingresized(0,$event)"\n                                        \n                                        :layers="1"\n                                        :class="\'odd first last\'"\n                                    ></t-studyline-heading>\n                                </div>\n                                \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                                <div class="t-studyplan-scrollable" >\n                                    <div class="t-studyplan-timeline" :style="columns_stylerule(page)">\n                                    \x3c!-- add period information --\x3e \n                                    <template v-for="(n,index) in (page.periods+1)">\n                                        <s-studyline-header-period\n                                            :identifier=\'Number(page.id)\'\n                                            v-if="index > 0"\n                                            v-model="page.perioddesc[index-1]"\n                                            ><t-period-edit\n                                                :ref="\'periodeditor-\'+index"\n                                                @edited="periodEdited"\n                                                v-model="page.perioddesc[index-1]"\n                                                :minstart="(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null"\n                                                :maxend="(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null"\n                                            ></t-period-edit\n                                        ></s-studyline-header-period>\n                                        <div class="s-studyline-header-filter"></div>\n                                    </template>\n\n                                    \x3c!-- Line by line add the items --\x3e\n                                    \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                                    <template v-for="(line,lineindex) in page.studylines"\n                                        ><template v-for="(layernr,layeridx) in countLineLayers(line,page)+1"\n                                            ><template v-for="(n,index) in (page.periods+1)"\n                                                >\n                                                <t-studyline-slot\n                                                    v-if="index > 0 && showslot(page,line, index, layeridx, \'gradable\')"\n                                                    type=\'gradable\'\n                                                    v-model="line.slots[index].courses"\n                                                    :key="\'c-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                    :slotindex="index"\n                                                    :line="line"\n                                                    :plan="value"\n                                                    :page="page"\n                                                    :period="page.perioddesc[index-1]"\n                                                    :layer="layeridx"\n                                                    :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                            + ((lineindex==0 && layernr==1)?\' first \':\' \')\n                                                            + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                            + ((layernr == countLineLayers(line,page))?\' lastlyr \':\' \')\n                                                            + ((layernr == countLineLayers(line,page)+1)?\' newlyr \':\' \')"\n                                                ></t-studyline-slot\n                                                ><t-studyline-slot\n                                                    type=\'filter\'\n                                                    v-if="showslot(page,line, index, layeridx, \'filter\')"\n                                                    v-model="line.slots[index].filters"\n                                                    :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                    :slotindex="index"\n                                                    :line="line"\n                                                    :plan="value"\n                                                    :page="page"\n                                                    :layer="layeridx"\n                                                    :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                            + ((lineindex==0 && layernr==1)?\' first \':\'\')\n                                                            + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                            + ((index==page.periods)?\' rightmost\':\'\')\n                                                            + ((layernr == countLineLayers(line,page))?\' lastlyr \':\' \')\n                                                            + ((layernr == countLineLayers(line,page)+1)?\' newlyr \':\' \')"\n                                                ></t-studyline-slot\n                                            ></template\n                                        ></template\n                                    ></template\n                                    ></div>\n                                </div>\n                            </div>\n                            <div v-if="edit.studyline.editmode" class=\'t-studyline-add ml-2 mt-1\'>\n                                <a href="#" v-b-modal="\'modal-add-studyline-\'+page.id" @click="false;"\n                                    ><i class=\'fa fa-plus\'></i>{{ text.studyline_add }}</a>\n                            </div>\n                            <b-modal\n                                :id="\'modal-add-studyline-\'+page.id"\n                                size="lg"\n                                :ok-title="text.add$core"\n                                ok-variant="primary"\n                                :title="text.studyline_add"\n                                @ok="addStudyLine(page,create.studyline)"\n                                :ok-disabled="Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0"\n                                >\n                                <b-container>\n                                    <b-row>\n                                        <b-col cols="3">{{text.studyline_name}}</b-col>\n                                        <b-col>\n                                            <b-form-input v-model="create.studyline.name" :placeholder="text.studyline_name_ph"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols="3">{{text.studyline_shortname}}</b-col>\n                                        <b-col>\n                                        <b-form-input\n                                            v-model="create.studyline.shortname"\n                                            :placeholder="text.studyline_shortname_ph"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols="3">{{text.studyline_color}}</b-col>\n                                        <b-col>\n                                            <input type="color" v-model="create.studyline.color" />\n                                            \x3c!-- hsluv-picker v-model="create.studyline.color" horizontal displaysize="175" ></hsluv-picker --\x3e\n                                        </b-col>\n                                    </b-row>\n                                </b-container>\n                            </b-modal>\n                            <b-modal\n                                :id="\'modal-edit-studyline-\'+page.id"\n                                size="lg"\n                                ok-variant="primary"\n                                :title="text.studyline_edit"\n                                @ok="editLineFinish()"\n                                :ok-disabled="Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0"\n                                >\n                                <b-container>\n                                    <b-row>\n                                        <b-col cols="3">{{ text.studyline_name}}</b-col>\n                                        <b-col>\n                                            <b-form-input\n                                                v-model="edit.studyline.data.name"\n                                                :placeholder="text.studyline_name_ph"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols="3">{{ text.studyline_shortname}}</b-col>\n                                        <b-col>\n                                        <b-form-input\n                                            v-model="edit.studyline.data.shortname"\n                                            :placeholder="text.studyline_shortname_ph"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols="3">{{ text.studyline_color}}</b-col>\n                                        <b-col>\n                                            <input type="color" v-model="edit.studyline.data.color" />\n                                        </b-col>\n                                    </b-row>\n                                </b-container>\n                            </b-modal>\n                        </b-tab>\n                    </b-tabs>\n                </b-card>\n            </div>\n            '}),Vue.component("t-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange(lineid,layerid,newheight){if(this.$refs.main&&lineid==this.value.id){const items=document.querySelectorAll(`.t-studyline-slot-0[data-studyline='${this.value.id}']`);let heightSum=0;items.forEach((el=>{const height=el.getBoundingClientRect().height;heightSum+=height}));const heightStyle=`${heightSum}px`;this.$refs.main.style.height=heightStyle}}},template:'\n            <div class="t-studyline t-studyline-heading "\n                :data-studyline="value.id" ref="main"\n                ><div class="t-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="t-studyline-title">\n                    <abbr v-b-tooltip.hover.right :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("t-studyline-edit",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({}),computed:{deletable(){const slots=this.value.slots;if(Array.isArray(slots)){let count=0;for(let i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},editable:()=>!0},methods:{onEdit(){this.$emit("edit",this.value)},onDelete(){this.$emit("delete",this.value)}},template:"\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            "}),Vue.component("t-studyline-slot",{props:{type:{type:String,default:"gradable"},slotindex:{type:Number,default:""},line:{type:Object,default:()=>null},layer:{type:Number},value:{type:Array,default:()=>[]},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},period:{type:Object,default:()=>null}},mounted(){const self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.main){const size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,size.height)}})).observe(self.$refs.main))},unmounted(){this.resizeListener&&this.resizeListener.disconnect()},computed:{slotkey(){return`${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`},itemidx(){for(const ix in this.value){if(this.value[ix].layer==this.layer)return ix}return null},item(){for(const ix in this.value){const itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},listtype(){return this.type},dragacceptlist(){return"gradable"==this.type?["course","gradable-item"]:["filter","filter-item"]},courseHoverDummy(){return{course:this.hover.component}},current(){if(this.period&&this.period.startdate&&this.period.enddate){const now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss(){if(this.item&&this.item.span>1){return`width: 100%; grid-column: span ${2*this.item.span-1};`}return""}},data:()=>({text:strings.course_timing,resizeListener:null,hover:{component:null,type:null},datechanger:{coursespan:null,periodspan:null,default:!1,defaultchoice:!1,hidewarn:!1}}),methods:{onDrop(event){this.hover.component=null,this.hover.type=null,debug.info(event);const self=this;if(event.type.item){let item=event.data;item.layer=this.layer,item.slot=this.slotindex,self.value.push(item),self.$emit("input",self.value),self.relocateStudyItem(item).done((()=>{this.$refs.timingChecker&&this.$refs.timingChecker.validate_course_period()}))}else event.type.component&&(debug.info("Adding new component"),"gradable"==event.type.type?(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,layer:self.layer,type:"course",details:{competency_id:null,conditions:"",course_id:event.data.id,badge_id:null,continuation_id:null}}}])[0].done((response=>{let item=response;self.relocateStudyItem(item).done((()=>{self.value.push(item),self.$emit("input",self.value),this.$nextTick((()=>{this.$refs.timingChecker&&this.$refs.timingChecker.validate_course_period()}))}))})).fail(_notification.default.exception):"filter"==event.type.type&&(debug.info("Adding new filter compenent"),(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,type:event.data.type,details:{badge_id:event.data.badge?event.data.badge.id:void 0}}}])[0].done((response=>{let item=response;self.relocateStudyItem(item).done((()=>{item.layer=this.layer,self.value.push(item),self.$emit("input",self.value)}))})).fail(_notification.default.exception)))},onCut(event){const self=this;let id=event.data.id;for(let i=0;i<self.value.length;i++)if(self.value[i].id==id){self.value.splice(i,1),i--;break}this.$emit("input",this.value)},relocateStudyItem(item){const iteminfo={id:item.id,layer:this.layer,slot:this.slotindex,line_id:this.line.id};return(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studyitems",args:{items:[iteminfo]}}])[0].fail(_notification.default.exception)},onDragEnter(event){this.hover.component=event.data,this.hover.type=event.type},onDragLeave(){this.hover.component=null,this.hover.type=null},maxSpan(){let freeIndex=this.slotindex;for(let i=this.slotindex+1;i<=this.page.periods&&(this.line.slots&&this.line.slots[i]&&this.line.slots[i].courses);i++){const clist=this.line.slots[i].courses,flist=this.line.slots[i-1].filters;let busy=!1;for(const ix in clist)if(clist[ix].layer==this.layer){busy=!0;break}for(const ix in flist)if(flist[ix].layer==this.layer){busy=!0;break}if(busy)break;freeIndex=i}return freeIndex-this.slotindex+1},makeType(item){return{item:!0,component:!1,span:item.span,type:this.type}},checkType(type){return type.type==this.type&&("filter"==type||type.span<=this.maxSpan())}},template:'\n            <div :class="\'t-studyline-slot \'+type + \' t-studyline-slot-\'+slotindex + \' \' + ((slotindex==0)?\' t-studyline-firstcolumn \':\' \')\n                         + (current?\'current \':\' \')"\n                :data-studyline="line.id" ref="main"\n                :style=\'spanCss\'\n                ><drag v-if="item"\n                    :key="item.id"\n                    class="t-slot-item"\n                    :data="item"\n                    :type="makeType(item)"\n                    @cut="onCut"\n                        ><t-item\n                            @deleted="onCut"\n                            v-model="value[itemidx]"\n                            :plan="plan"\n                            :line=\'line\'\n                            :page=\'page\'\n                            :period=\'period\'\n                            :maxspan=\'maxSpan()\'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class="\'t-slot-drop \'+type + (layer > 0?\' secondary\':\' primary\')"\n                    :accepts-type="checkType"\n                    @drop="onDrop"\n                    mode="cut"\n                    @dragenter="onDragEnter"\n                    @dragleave="onDragLeave"\n                ><template v-if="hover.component">\n                        <div v-if="hover.type.item"\n                            class="t-slot-item feedback"\n                            :key="hover.component.id"\n                            ><t-item v-model="hover.component" dummy></t-item\n                            ></div\n                        ><div v-else-if="hover.type.type == \'gradable\'"\n                            class="t-slot-item feedback"\n                            :key="\'course-\'+hover.component.id"\n                            ><t-item-course v-model="courseHoverDummy"></t-item-course></div\n                        ><div v-else-if="hover.type.type == \'filter\'"\n                            class="t-slot-item feedback"\n                            key="tooldrop"\n                            ><t-item-junction    v-if="hover.component.type == \'junction\'" ></t-item-junction\n                            ><t-item-start       v-else-if="hover.component.type == \'start\'"    ></t-item-start\n                            ><t-item-finish      v-else-if="hover.component.type == \'finish\'"   ></t-item-finish\n                            ><t-item-badge       v-else-if="hover.component.type == \'badge\'"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class="t-slot-item feedback"\n                            :key="hover.type">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if="value && value[itemidx] && value[itemidx].course"\n                    ref="timingChecker"\n                    :maxspan="maxSpan()"\n                    :page="page"\n                    :period="period"\n                    v-model="value[itemidx]"\n                    ></t-item-timing-checker>\n            </div>\n            '}),Vue.component("t-item-timing-checker",{props:{value:{type:Object},page:{type:Object},period:{type:Object},maxspan:{type:Number},hidden:{type:Boolean,default:!1}},computed:{endperiod(){const endperiodnr=Math.min(this.page.periods,this.period.period+(this.value.span-1));return this.page.perioddesc[endperiodnr-1]},course_period_matches(){const self=this;return self.value&&"course"==self.value.type?(self.datechanger.coursespan=(0,_dateHelper.datespaninfo)(self.value.course.startdate,self.value.course.enddate),self.datechanger.periodspan=(0,_dateHelper.datespaninfo)(self.period.startdate,self.endperiod.enddate),self.datechanger.coursespan.first.getTime()==self.datechanger.periodspan.first.getTime()&&self.datechanger.coursespan.last.getTime()==self.datechanger.periodspan.last.getTime()):(debug.warn("Timing thing not proper configured",self.value,self.period,self.maxspan),!1)}},data:()=>({id:Math.floor(Math.random()*Date.now()).toString(16),text:strings.course_timing,datechanger:{coursespan:null,periodspan:null,globals:datechanger_globals}}),methods:{validate_course_period(force){const self=this;debug.info("Validating course and period"),self.course_period_matches?debug.info("Course timing matches period",self.datechanger):(debug.info("Course timing does not match period timing"),self.value.course.canupdatecourse?self.hidden&&self.datechanger.globals.default?self.datechanger.globals.defaultvalue&&self.change_course_period():this.$bvModal.show("t-course-timing-matching-"+this.id):self.hidden&&self.datechanger.globals.hidewarn||this.$bvModal.show("t-course-timing-warning-"+this.id))},change_course_period(){const self=this;return self.datechanger.globals.default&&(self.datechanger.globals.defaultvalue=!0),(0,_ajax.call)([{methodname:"local_treestudyplan_course_period_timing",args:{period_id:self.period.id,course_id:this.value.course.id,span:this.value.span}}])[0].fail(_notification.default.exception).done((response=>{self.value.course.startdate=response.startdate,self.value.course.enddate=response.enddate,self.value.course.timing=response.timing,self.$emit("input",self.value)}))},change_span(span){const self=this;return(0,_ajax.call)([{methodname:"local_treestudyplan_set_studyitem_span",args:{id:self.value.id,span:span}}])[0].fail(_notification.default.exception).done((response=>{self.value.span=response.span,self.$emit("input",self.value),self.$nextTick((()=>{self.validate_course_period()}))}))},format_duration(dsi){let s="";return 1==dsi.years?s+=`1 ${this.text.year}, `:dsi.years>1&&(s+=`${dsi.years} ${this.text.years}, `),1==dsi.weeks?s+=`1 ${this.text.week}, `:dsi.weeks>1&&(s+=`${dsi.weeks} ${this.text.weeks}, `),1==dsi.days?s+=`1 ${this.text.day}, `:dsi.days>1&&(s+=`${dsi.days} ${this.text.days}, `),s.toLocaleLowerCase()}},template:'\n            <div :class="\'t-item-timing-checker\'" :style="hidden?\'display: none \':\'\'">\n                <template v-if="!hidden" >\n                    <span class="mr-1" v-if="course_period_matches">\n                        <i  class="text-success fa fa-calendar-check-o"\n                            v-b-tooltip.hover.topright :title="text.timing_ok"\n                        ></i>\n                    </span>\n                    <span class="mr-1" v-else>\n                        <a  href=\'#\' @click="validate_course_period()" class="text-warning"\n                            v-b-tooltip.hover.bottomleft :title="text.timing_off"\n                            ><i class="fa fa-calendar-times-o"\n                            ></i\n                            ><i class="fa fa-question-circle text-black-50"\n                                style="font-size: 0.8em; top: -0.3em; position: relative;"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class="ml-1" v-b-tooltip.hover.bottomleft :title="text.periodspan_desc"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=""\n                            size="sm" @change="change_span" v-model="value.span">\n                            <b-form-select-option v-for="(n,i) in maxspan" :value=\'n\' :key=\'i\'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class="fa fa-question-circle text-black-50"\n                            style="font-size: 0.8em; top: -0.3em; position: relative;"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id="\'t-course-timing-matching-\'+this.id"\n                    size="lg"\n                    :title="text.title"\n                    @ok="change_course_period"\n                    :ok-title="text.yes"\n                    ok-variant="danger"\n                    :cancel-title="text.no"\n                    cancel-variant="primary"\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols="6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.default">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id="\'t-course-timing-warning-\'+this.id"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.title"\n                    :ok-title="text.yes"\n                    ok-only\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>"6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.hidewarn">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item",{props:{value:{type:Object,default:()=>null},dummy:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null},line:{type:Object,default:()=>null},page:{type:Object,default:()=>null},period:{type:Object,default:()=>null},maxspan:{type:Number,default:()=>0}},data:()=>({dragLine:null,dragEventListener:null,deleteMode:!1,condition_options:string_keys.conditions,text:strings.item_text,showContext:!1,lines:[]}),methods:{dragStart(event){this.deleteMode=!1;let start=document.getElementById("studyitem-"+this.value.id),dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.position.x+"px",dragelement.style.top=event.position.y+"px",this.dragLine=new _simpleline.SimpleLine(start,dragelement,{color:"#777",gravity:{start:1.3,end:1.3}}),document.addEventListener("mousemove",this.onMouseMove)},dragEnd(){null!==this.dragLine&&this.dragLine.remove();let dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.removeProperty("left"),dragelement.style.removeProperty("top"),dragelement.style.removeProperty("position"),document.removeEventListener("mousemove",this.onMouseMove)},onMouseMove:function(event){let dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.clientX+"px",dragelement.style.top=event.clientY+"px"},onDrop(event){let from_id=event.data.id,to_id=this.value.id;this.redrawLines(),(0,_ajax.call)([{methodname:"local_treestudyplan_connect_studyitems",args:{from_id:from_id,to_id:to_id}}])[0].done((response=>{let conn={id:response.id,from_id:response.from_id,to_id:response.to_id};ItemEventBus.$emit("createdConnection",conn),this.value.connections.in.push(conn)})).fail(_notification.default.exception)},redrawLine(conn){const start=document.getElementById(`studyitem-${conn.from_id}`),end=document.getElementById(`studyitem-${conn.to_id}`);this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id]),null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(this.lines[conn.to_id]=new _simpleline.SimpleLine(start,end,{color:"var(--success)",gravity:{start:1.3,end:1.3}}))},deleteLine(conn){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disconnect_studyitems",args:{from_id:conn.from_id,to_id:conn.to_id}}])[0].done((response=>{if(response.success){this.removeLine(conn),ItemEventBus.$emit("connectionDisconnected",conn);let index=self.value.connections.out.indexOf(conn);self.value.connections.out.splice(index,1)}})).fail(_notification.default.exception)},highlight(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--danger)"})},normalize(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--success)"})},updateItem(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions,continuation_id:this.value.continuation_id}}])[0].fail(_notification.default.exception)},doShowContext(event){this.hasContext&&(this.showContext=!0,event.preventDefault())},redrawLines(){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onCreatedConnection(conn){conn.from_id==this.value.id&&(this.value.connections.out.push(conn),this.redrawLine(conn))},onRemovedConnection(conn){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.in){let c_in=this.value.connections.in[i];conn.id==c_in.id&&self.value.connections.out.splice(i,1)}},onRePositioned(){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onDisPositioned(re_id){if(this.value.connections&&this.value.connections.out)for(let i in this.value.connections.out){let conn=this.value.connections.out[i];conn.to_id==re_id&&this.removeLine(conn)}},onItemDeleted(item_id){const self=this;if(this.value.connections&&this.value.connections.out)for(const i in this.value.connections.out){let conn=this.value.connections.out[i];conn.to_id==item_id&&(self.removeLine(conn),self.value.connections.out.splice(i,1))}if(this.value.connections&&this.value.connections.in)for(const i in this.value.connections.in){this.value.connections.in[i].from_id==item_id&&self.value.connections.out.splice(i,1)}},onRedrawLines(){this.redrawLines()},removeLine(conn){this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id])},deleteItem(){const self=this,msgparams={item:this.text["type_"+this.value.type].toLocaleLowerCase(),name:"course"==this.value.type?this.value.course.displayname:"",line:this.line?this.line.name:"",period:this.period?this.period.fullname:this.plan.name};this.$bvModal.msgBoxConfirm((0,_stringHelper.strformat)(this.text.item_delete_message,msgparams),{okVariant:"danger",okTitle:this.text.ok,cancelTitle:this.text.cancel}).then((value=>{value&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:self.value.id}}])[0].done((function(response){1==response.success&&self.$emit("deleted",{data:self.value})})).fail(_notification.default.exception)})).catch((err=>{debug.console.error(err)}))}},computed:{hasConnectionsOut(){return!["finish"].includes(this.value.type)},hasConnectionsIn(){return!["start"].includes(this.value.type)},hasContext(){return["start","junction","finish"].includes(this.value.type)}},created(){this.dummy||(ItemEventBus.$on("createdConnection",this.onCreatedConnection),ItemEventBus.$on("removedConnection",this.onRemovedConnection),ItemEventBus.$on("rePositioned",this.onRePositioned),ItemEventBus.$on("disPositioned",this.onDisPositioned),ItemEventBus.$on("itemDeleted",this.onItemDeleted),ItemEventBus.$on("redrawLines",this.onRedrawLines))},mounted(){this.dummy||(this.redrawLines(),setTimeout((()=>{ItemEventBus.$emit("rePositioned",this.value.id)}),10))},beforeDestroy(){if(!this.dummy){for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.removeLine(conn)}ItemEventBus.$emit("disPositioned",this.value.id),ItemEventBus.$off("createdConnection",this.onCreatedConnection),ItemEventBus.$off("removedConnection",this.onRemovedConnection),ItemEventBus.$off("rePositioned",this.onRePositioned),ItemEventBus.$off("disPositioned",this.onDisPositioned),ItemEventBus.$off("itemDeleted",this.onItemDeleted),ItemEventBus.$off("redrawLines",this.onRedrawLines)}},beforeUpdate(){},updated(){this.dummy||this.redrawLines()},template:'\n            <div class="t-item-base" :id="\'studyitem-\'+value.id">\n                <t-item-course\n                    v-if="value.type == \'course\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                    :plan=\'plan\'\n                    :page=\'page\'\n                    :period=\'period\'\n                    :maxspan=\'maxspan\'\n                ></t-item-course>\n                <t-item-junction\n                    v-if="value.type == \'junction\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-junction>\n                <t-item-start\n                    v-if="value.type == \'start\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-start>\n                <t-item-finish\n                    v-if="value.type == \'finish\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if="value.type == \'badge\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if="value.type == \'invalid\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-invalid>\n                <drop v-if=\'!dummy && hasConnectionsIn\' accepts-type="linestart"\n                    :id="\'t-item-cend-\'+value.id"\n                    class="t-item-connector-end"\n                    mode="copy"\n                    @drop="onDrop"\n                    ><svg width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg></drop>\n                <drag v-if=\'!dummy && hasConnectionsOut\' type="linestart"\n                    :id="\'t-item-cstart-\'+value.id"\n                    :class="\'t-item-connector-start \' + ((deleteMode&&value.connections.out.length)?\'deleteMode\':\'\')"\n                    :data="value"\n                    @dragstart="dragStart"\n                    @dragend="dragEnd"\n                    @click="deleteMode = (value.connections.out.length)?(!deleteMode):false"\n                    >\n                    <svg  width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg>\n                    <template v-slot:drag-image="{data}"> <i :id="\'t-item-cdrag-\'+value.id" class="fa"></i>\n                    </template>\n                </drag>\n                <div class="deletebox" v-if="deleteMode && value.connections.out.length > 0"\n                    >\n                    <a v-for="conn in value.connections.out"\n                        @click="deleteLine(conn)"\n                        @mouseenter="highlight(conn)"\n                        @mouseleave="normalize(conn)"\n                        class="t-connection-delete text-danger"\n                        :title="conn.id">\n                        <i class="fa fa-trash"></i>\n                    </a>\n                </div>\n                <a  v-if="hasContext" class="t-item-config"\n                    v-b-modal="\'t-item-config-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal no-body class=""\n                    :id="\'t-item-config-\'+value.id"\n                    :title="text[\'item_configuration\']"\n                    scrollable\n                    ok-only\n                    class="t-item-contextview b-modal-justify-footer-between"\n                >\n                    <b-form-group\n                        v-if="value.type != \'start\'"\n                        :label="text.select_conditions"\n                    >\n                        <b-form-select size="sm"\n                            @input="updateItem"\n                            v-model="value.conditions"\n                            :options="condition_options"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer="{ ok, cancel, hide }" >\n                    <a href=\'#\' @click=\'deleteItem()\' class="text-danger"\n                        ><i class="fa fa-trash"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size="sm" variant="primary" @click="ok()">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:()=>({text:strings.invalid}),methods:{},template:'\n            <div class="t-item-invalid">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="t-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{text.error}}\n                            <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("t-item-course",{props:{value:{type:Object,default:()=>null},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},period:{type:Object,default:()=>null},maxspan:{type:Number,default:()=>0}},data:()=>({condition_options:string_keys.conditions,text:strings.item_course_text}),computed:{useItemConditions(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useItemConditions)&&this.plan.aggregation_info.useItemConditions},configurationState(){return this.hasGrades()||this.hasCompletions()?"t-configured-ok":"t-configured-alert"},configurationIcon(){return this.hasGrades()||this.hasCompletions()?"check":"exclamation-circle"},startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},methods:{hasGrades(){if(this.value.course.grades&&this.value.course.grades.length>0)for(const g of this.value.course.grades)if(g.selected)return!0;return!1},hasCompletions(){if(this.value.course.completion&&this.value.course.completion.conditions)for(const cgroup of this.value.course.completion.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)},updateConditions(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions}}])[0].fail(_notification.default.exception)}},created(){},template:'\n            <div class="t-item-course">\n            <b-card no-body >\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'t-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body >\n                            <a  class="t-item-course-config"\n                                v-b-modal="\'t-item-course-config-\'+value.id"\n                                href="#" @click.prevent=""\n                                ><i :class="\'fa fa-\'+configurationIcon+\' \' + configurationState"></i></a>\n                            <a  v-b-modal="\'t-item-course-config-\'+value.id"\n                                :id="\'t-item-course-details-\'+value.id"\n                                :href="\'/course/view.php?id=\'+value.course.id"\n                                @click.prevent.stop="">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=""\n                    :id="\'t-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    size="lg"\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <a v-if=\'!!value.course.completion\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.shortname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class="mt-1"\n                                :maxspan="maxspan"\n                                :page="page"\n                                :period="period"\n                                v-model="value"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value\' :plan="plan"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            '}),Vue.component("t-item-course-grades",{props:{value:{type:Object,default:()=>null},plan:{type:Object,default:()=>null}},data:()=>({condition_options:string_keys.conditions,text:strings.item_course_text}),computed:{useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},selectedgrades(){let list=[];for(let ix in this.value.course.grades){let g=this.value.course.grades[ix];g.selected&&list.push(g)}return list}},methods:{includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},created(){},template:'\n            <div>\n                <b-form-group\n                    :label="text.select_grades"\n                    ><ul class="t-item-module-children">\n                        <li class="t-item-course-gradeinfo">\n                            <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                            ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                        </li>\n                        <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                            <b-form-checkbox inline\n                                @change="includeChanged($event,g)" v-model="g.selected"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                @change="requiredChanged($event,g)" v-model="g.required"\n                                ></b-form-checkbox>\n                            <span :title="g.typename" v-html="g.icon"></span>\n                            <s-edit-mod\n                                :title="value.course.fullname"\n                                @saved="(fd) => g.name = fd.get(\'name\')"\n                                v-if="g.cmid > 0"\n                                :cmid="g.cmid"\n                                :coursectxid="value.course.ctxid"\n                                genericonly><span v-html="g.name"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            '}),Vue.component("t-item-course-completion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){const self=this;let stringkeys=[];for(const key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){let i=0;for(const key in self.text)self.text[key]=strings[i],i++}))},computed:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1}},methods:{completion_icon(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:cgroup=>cgroup.completion?"completed":"incomplete"},template:"\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            "}),Vue.component("t-item-junction",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({condition_options:string_keys.conditions}),methods:{},template:"\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-finish",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({}),methods:{},template:"\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-start",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({}),created(){},methods:{},template:"\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-badge",{props:{value:{type:Object,default:function(){return{badge:{}}}}},data:()=>({txt:strings,text:strings.item_text}),methods:{},template:'\n            <div class=\'t-item-badge t-item-filter\' v-b-tooltip.hover :title="value.badge.name">\n                <svg class="t-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"/>\n                </svg>\n                <a class="t-item-config badge"\n                v-b-modal="\'t-item-badge-details-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal class=""\n                    :id="\'t-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            '}),Vue.component("t-coursecat-list",{props:{value:{type:Array,default:function(){return{}}}},data:()=>({}),methods:{},template:'\n            <ul class="t-coursecat-list">\n                <t-coursecat-list-item\n                    v-for="coursecat,idx in value"\n                    v-model="value[idx]"\n                    :key="coursecat.id"></t-coursecat-list-item>\n            </ul>\n            '}),Vue.component("t-coursecat-list-item",{props:{value:{type:Object,default:function(){return{}}}},data:()=>({loading:!1}),computed:{showSpinner(){return this.canLoadMore()},hasDetails(){return this.value.haschildren||this.value.hascourses}},methods:{canLoadMore(){return this.value.haschildren&&(!this.value.children||0==this.value.children.length)||this.value.hascourses&&(!this.value.courses||0==this.value.courses.length)},onShowDetails(){const self=this;this.canLoadMore()&&(0,_ajax.call)([{methodname:"local_treestudyplan_get_category",args:{id:this.value.id}}])[0].done((function(response){self.$emit("input",response)})).fail(_notification.default.exception)}},template:'\n            <li class="t-coursecat-list-item">\n                <span v-if="hasDetails" v-b-toggle="\'coursecat-\'+value.id">\n                    <i class="when-closed fa fa-caret-right"></i>\n                    <i class="when-open fa fa-caret-down"></i>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if="hasDetails" :id="\'coursecat-\'+value.id"\n                    @show="onShowDetails" :visible="!!(value.children) || !!(value.courses)">\n                    <b-spinner class="ml-4" v-if="showSpinner" small variant="primary"></b-spinner>\n                    <t-coursecat-list v-if="value.children" v-model="value.children"></t-coursecat-list>\n                    <t-course-list v-if="value.courses" v-model="value.courses"></t-course-list>\n                </b-collapse>\n            </li>\n            '}),Vue.component("t-course-list",{props:{value:{type:Array,default:function(){return{}}}},data:()=>({}),methods:{makeType:()=>({item:!1,component:!0,span:1,type:"gradable"})},template:'\n            <ul class="t-course-list">\n                <li class="t-course-list-item" v-for="course in value" :key="course.id">\n                    <drag\n                        class="draggable-course"\n                        :data="course"\n                        :type="makeType()"\n                        @cut=""\n                    >\n                    <i class="t-course-list-item fa fa-book"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=studyplan-editor-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/studyplan-editor-components.min.js.map b/amd/build/studyplan-editor-components.min.js.map
index 91981fa..b73a592 100644
--- a/amd/build/studyplan-editor-components.min.js.map
+++ b/amd/build/studyplan-editor-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"studyplan-editor-components.min.js","sources":["../src/studyplan-editor-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from \"./simpleline/simpleline\";\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {get_strings} from 'core/str';\nimport {load_stringkeys, load_strings, strformat } from './util/string-helper';\nimport {format_date, add_days, datespaninfo } from './util/date-helper';\nimport {objCopy,transportItem} from './studyplan-processor';\nimport Debugger from './util/debugger';\nimport {download,upload} from './downloader';\nimport {ProcessStudyplan, ProcessStudyplanPage} from './studyplan-processor';\n\nimport TSComponents from './treestudyplan-components';\nimport mFormComponents from \"./util/mform-helper\";\n\n\nconst STUDYPLAN_EDITOR_FIELDS =\n['name','shortname','description','idnumber','context_id', 'aggregation','aggregation_config'];\nconst STUDYPLAN_EDITOR_PAGE_FIELDS =  //TODO: Add 'fullname', 'shortname' and 'description' when implementing proper page management\n['context_id', 'periods','startdate','enddate'];\nconst PERIOD_EDITOR_FIELDS =\n['fullname','shortname','startdate','enddate'];\n\nconst LINE_GRAVITY = 1.3;\n\nconst datechanger_globals = {\n    default: false,\n    defaultchoice: false,\n    hidewarn: false,\n};\n\nexport default {\n    STUDYPLAN_EDITOR_FIELDS: STUDYPLAN_EDITOR_FIELDS, // make copy available in plugin\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        Vue.use(mFormComponents);\n        let debug = new Debugger(\"treestudyplan-editor\");\n\n        /************************************\n         *                                  *\n         * Treestudyplan Editor components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        let string_keys = load_stringkeys({\n            conditions: [\n                { value: 'ALL', textkey: 'condition_all'},\n                { value: 'ANY', textkey: 'condition_any'},\n            ],\n        });\n\n        let strings = load_strings({\n            studyplan_text: {\n                studyline_editmode: 'studyline_editmode',\n                toolbox_toggle: 'toolbox_toggle',\n                editmode_modules_hidden:'editmode_modules_hidden',\n                studyline_add: 'studyline_add',\n                add$core: 'add$core',\n                edit$core: 'edit$core',\n                studyline_name: 'studyline_name',\n                studyline_name_ph: 'studyline_name_ph',\n                studyline_shortname: 'studyline_shortname',\n                studyline_shortname_ph: 'studyline_shortname_ph',\n                studyline_color: 'studyline_color',\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                studyline_edit: 'studyline_edit',\n                studyplan_name: 'studyplan_name',\n                studyplan_name_ph: 'studyplan_name_ph',\n                studyplan_shortname: 'studyplan_shortname',\n                studyplan_shortname_ph: 'studyplan_shortname_ph',\n                studyplan_description: 'studyplan_description',\n                studyplan_description_ph: 'studyplan_description_ph',\n                studyplan_idnumber: 'studyplan_idnumber',\n                studyplan_idnumber_ph: 'studyplan_idnumber_ph',\n                studyplan_slots: 'studyplan_slots',\n                studyplan_startdate: 'studyplan_startdate',\n                studyplan_enddate: 'studyplan_enddate',\n            },\n            studyplan_advanced: {\n                advanced_tools: 'advanced_tools',\n                confirm_cancel: 'confirm_cancel',\n                confirm_ok: 'confirm_ok',\n                success$core: 'success$core',\n                error$core: 'failed$core',\n                advanced_converted: 'advanced_converted',\n                advanced_skipped: 'advanced_skipped',\n                advanced_failed: 'advanced_failed',\n                advanced_locked: 'advanced_locked',\n                advanced_multiple: 'advanced_multiple',\n                advanced_error: 'advanced_error',\n                advanced_tools_heading: 'advanced_tools_heading',\n                advanced_warning_title: 'advanced_warning_title',\n                advanced_warning: 'advanced_warning',\n                advanced_pick_scale: 'advanced_pick_scale',\n                advanced_course_manipulation_title: 'advanced_course_manipulation_title',\n                advanced_force_scale_title: 'advanced_force_scale_title',\n                advanced_force_scale_desc: 'advanced_force_scale_desc',\n                advanced_force_scale_button: 'advanced_force_scale_button',\n                advanced_disable_autoenddate_title: 'advanced_disable_autoenddate_title',\n                advanced_disable_autoenddate_desc: 'advanced_disable_autoenddate_desc',\n                advanced_disable_autoenddate_button: 'advanced_disable_autoenddate_button',\n                advanced_confirm_header: 'advanced_confirm_header',\n                advanced_force_scale_confirm: 'advanced_force_scale_confirm',\n                advanced_import: 'advanced_import',\n                advanced_export: 'advanced_export',\n                advanced_export_csv: 'advanced_export_csv',\n                advanced_import_from_file: 'advanced_import_from_file',\n                advanced_purge: \"advanced_purge\",\n                advanced_purge_expl: \"advanced_purge_expl\",\n                advanced_cascade_cohortsync_title: \"advanced_cascade_cohortsync_title\",\n                advanced_cascade_cohortsync_desc: \"advanced_cascade_cohortsync_desc\",\n                advanced_cascade_cohortsync: \"advanced_cascade_cohortsync\",\n            },\n            studyplan_edit: {\n                studyplan_edit: 'studyplan_edit',\n                studyplan_add: 'studyplan_add',\n            },\n            period_edit: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n            },\n            course_timing: {\n                title: 'course_timing_title',\n                desc: 'course_timing_desc',\n                question: 'course_timing_question',\n                warning: 'course_timing_warning',\n                timing_ok: 'course_timing_ok',\n                timing_off: 'course_timing_off',\n                course: 'course@core',\n                period: 'period',\n                yes: 'yes$core',\n                no: 'no$core',\n                duration: 'duration',\n                years: 'years$core',\n                year: 'year$core',\n                weeks: 'weeks$core',\n                week: 'week$core',\n                days: 'days$core',\n                day: 'day$core',\n                rememberchoice: 'course_timing_rememberchoice',\n                hidewarning: 'course_timing_hidewarning',\n                periodspan: 'course_period_span',\n                periods: 'periods',\n                periodspan_desc: 'course_period_span_desc',\n            },\n            studyplan_associate: {\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                associate_cohorts: 'associate_cohorts',\n                associate_users: 'associate_users',\n                add_association: 'add_association',\n                delete_association: 'delete_association',\n                associations_empty: 'associations_empty',\n                associations_search: 'associations_search',\n                cohorts: 'cohorts',\n                users: 'users',\n                selected: 'selected',\n                name: 'name',\n                context: 'context',\n            },\n            item_text: {\n                select_conditions: \"select_conditions\",\n                item_configuration: \"item_configuration\",\n                ok: \"ok@core\",\n                delete: \"delete@core\",\n                item_delete_message: \"item_delete_message\",\n                type_course: \"course@core\",\n                type_junction: \"tool-junction\",\n                type_start: \"tool-start\",\n                type_finish: \"tool-finish\",\n                type_badge: \"tool-badge\",\n                type_invalid: \"course-invalid\",\n            },\n            item_course_text: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                ok: \"ok@core\",\n                cancel: \"cancel@core\",\n                delete: \"delete@core\",\n            },\n            invalid: {\n                error: 'error',\n            },\n            completion: {\n                completion_completed: \"completion_completed\",\n                completion_incomplete: \"completion_incomplete\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n            },\n\n        });\n\n\n        /*\n        * T-STUDYPLAN-ADVANCED\n        */\n        Vue.component('t-studyplan-advanced', {\n            props: {\n                value: {\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    force_scales: {\n                        selected_scale: null,\n                        result: [],\n                    },\n                    text: strings.studyplan_advanced,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n                scales(){\n                    return [{\n                        id: null,\n                        disabled: true,\n                        name: this.text.advanced_pick_scale,\n                    }].concat(this.value.advanced.force_scales.scales);\n                },\n            },\n            methods: {\n                disable_autoenddate(){\n                    const self=this;\n                    call([{\n                        methodname: 'local_treestudyplan_disable_autoenddate',\n                        args: {\n                            studyplan_id: this.value.id,\n                        }\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)\n                             + \"\\n\" + response.msg);\n                    }).fail(notification.exception);\n                },\n                force_scales_start(){\n                    // set confirmation box\n                    const self=this;\n                    this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{\n                        title: this.text.advanced_force_scale_confirm,\n                        okVariant: 'danger',\n                        okTitle: this.text.confirm_ok,\n                        cancelTitle: this.text.confirm_cancel,\n                    }).then( value => {\n                        if(value == true){\n                            call([{\n                                methodname: 'local_treestudyplan_force_studyplan_scale',\n                                args: {\n                                    studyplan_id: this.value.id,\n                                    scale_id: this.force_scales.selected_scale,\n                                }\n                            }])[0].done(function(response){\n                                self.force_scales.result = response;\n                            }).fail(notification.exception);\n                        }\n                    });\n                },\n                export_plan(format){\n                    const self = this;\n                    if(format == undefined || ![\"json\",\"csv\"].includes(format)){\n                        format = \"json\";\n                    }\n                    call([{\n                            methodname: 'local_treestudyplan_export_plan',\n                            args: {\n                                studyplan_id: this.value.id,\n                                format: format,\n                            },\n                        }])[0].done(function(response){\n\n                            download(self.value.shortname+\".\"+format,response.content,response.format);\n                        }).fail(notification.exception);\n                },\n                import_studylines(){\n                    //const self = this;\n                    upload((filename,content)=>{\n                        call([{\n                            methodname: 'local_treestudyplan_import_studylines',\n                            args: {\n                                studyplan_id:  this.value.id,\n                                content: content,\n                                format: \"application/json\",\n                            },\n                        }])[0].done(function(response){\n                            if(response.success){\n                                location.reload();\n                            } else {\n                                debug.error(\"Import failed: \",response.msg);\n                            }\n\n                        }).fail(notification.exception);\n                    }, \"application/json\");\n                },\n                purge_studyline(){\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyplan',\n                        args: {\n                            id:  this.value.id,\n                            force: true,\n                        },\n                    }])[0].done(function(response){\n                        if(response.success){\n                            location.reload();\n                        } else {\n                            debug.error(\"Could not delete plan: \",response.msg);\n                        }\n\n                    }).fail(notification.exception);\n                },\n                cascade_cohortsync(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_cascade_cohortsync',\n                        args: {\n                            studyplan_id:  this.value.id,\n                        },\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,\n                            { title: self.text.advanced_cascade_cohortsync});\n                    }).fail(notification.exception);\n                },\n                modal_close(){\n                    this.force_scales.result = [];\n                }\n            },\n            template:\n            `\n            <span>\n                <a  v-if=\"value.advanced\"\n                    href='#'\n                    @click.prevent=''\n                    class='text-danger'\n                    v-b-modal=\"'t-studyplan-'+value.id+'-advanced'\"\n                    ><i class='fa fa-wrench'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if=\"value.advanced\"\n                    :id=\"'t-studyplan-'+value.id+'-advanced'\"\n                    size=\"lg\"\n                    :title=\"text.advanced_tools_heading\"\n                    ok-only\n                    @hide=\"modal_close\"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title=\"text.advanced_warning_title\" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title=\"text.advanced_course_manipulation_title\" >\n                            <b-container>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"info\"\n                                    @click=\"cascade_cohortsync\"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model=\"force_scales.selected_scale\"\n                                    :options=\"scales\" text-field=\"name\" value-field=\"id\"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols=\"4\">\n                                    <b-button\n                                        variant=\"danger\"\n                                        :disabled=\"force_scales.selected_scale == null\"\n                                        @click=\"force_scales_start\"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <ul class='t-advanced-scrollable' v-if=\"force_scales.result.length > 0\">\n                                    <li v-for=\"c in force_scales.result\">\n                                        <span class='t-advanced-coursename'>{{c.course.fullname}}</span>\n                                        <ul v-if=\"c.grades.length > 0\">\n                                            <li v-for='g in c.grades'>\n                                                <span class='t-advanced-gradename'><span v-html=\"g.name\"></span></span>\n                                                <span v-if=\"g.changed == 'converted'\" class='t-advanced-status changed'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if=\"g.changed == 'skipped'\" class='t-advanced-status skipped'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class='t-advanced-status skipped'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"danger\"\n                                    @click=\"disable_autoenddate\"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title='text.advanced_export'>\n                            <b-button\n                                    variant=\"primary\"\n                                    @click=\"export_plan\"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant=\"danger\"\n                                    @click=\"import_studylines\"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant=\"primary\"\n                                @click=\"export_plan('csv')\"\n                            >{{ text.advanced_export_csv}}</b-button>\n                        </b-tab>\n                        <b-tab :title='text.advanced_purge'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant=\"danger\"\n                                    @click=\"purge_studyline\"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>\n                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            `\n        });\n\n\n        /*\n        * T-STUDYPLAN-EDIT\n        */\n        Vue.component('t-studyplan-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'mode' :{\n                    type: String,\n                    default() { return \"edit\";},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'contextid': {\n                    type: Number,\n                    default: 1\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplan_edit,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                planSaved(updatedplan){\n                    const self = this;\n                    debug.info(\"Got new plan data\",updatedplan);\n\n                    if(self.mode == 'create'){\n                        // Inform parent of the details of the newly created plan\n                        self.$emit(\"created\",updatedplan);\n                    }\n                    else {\n                        // determine if the plan moved context...\n                        const moved_from = self.value.context_id;\n                        const moved_to = updatedplan.context_id;\n                        const moved = (moved_from != moved_to);\n\n                        if(updatedplan.pages[0].periods != self.value.pages[0].periods){\n                            // If the pages changed, just reload the entire model for the plan\n                            call([{\n                                methodname: 'local_treestudyplan_get_studyplan_map',\n                                args: { id: self.value.id}\n                            }])[0].done(function(response){\n                                self.value = ProcessStudyplan(response,true);\n                                debug.info('studyplan processed');\n                                self.$emit('input',self.value);\n                            }).fail(function(error){\n                                notification.exception(error);\n                            });\n                        } else {\n                            // Copy updated fields and trigger update\n                            objCopy(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS);\n                            self.$emit('input',self.value);\n                            if(moved){\n                                self.$emit('moved',self.value, moved_from, moved_to);\n                            }\n                        }\n                    }\n                },\n            }\n            ,\n            template:\n            `\n            <span class='s-studyplan-edit'>\n                <mform \n                    name=\"studyplan_editform\" \n                    :params=\"{studyplan_id: value.id, mode: mode, contextid: contextid }\" \n                    @saved=\"planSaved\"\n                    :variant=\"variant\"\n                    :type=\"type\"\n                    :title=\"(mode == 'create')?text.studyplan_add:text.studyplan_edit\"\n                    ><slot><i class='fa fa-gear'></i></slot></mform>\n            </span>\n            `\n        });\n\n        /*\n         * T-STUDYPLAN-EDIT\n         */\n        Vue.component('t-studyplan-page-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'mode' :{\n                    type: String,\n                    default() { return \"edit\";},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'studyplan': {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplan_edit,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                planSaved(updatedpage){\n                    const self = this;\n                    debug.info(\"Got new page data\",updatedpage);\n\n                    if(self.mode == 'create'){\n                        // Inform parent of the details of the newly created plan\n                        self.$emit(\"created\",updatedpage);\n                    }\n                    else {\n                        const page = ProcessStudyplanPage(updatedpage);\n                        debug.info('studyplan page processed');\n                        self.$emit('input',page);\n                    }\n                },\n            }\n            ,\n            template:\n            `\n            <span class='s-studyplan-page-edit'>\n                <mform \n                    name=\"studyplanpage_editform\" \n                    :params=\"{page_id: value.id, studyplan_id: studyplan.id, mode: mode }\" \n                    @saved=\"planSaved\"\n                    :variant=\"variant\"\n                    :type=\"type\"\n                    :title=\"(mode == 'create')?text.studyplan_add:text.studyplan_edit\"\n                    ><slot><i class='fa fa-gear'></i></slot></mform>\n            </span>\n            `\n        });\n\n\n        /*\n        * T-STUDYPLAN-ASSOCIATE\n        */\n        Vue.component('t-studyplan-associate', {\n            props: ['value',],\n            data() {\n                return {\n                    show: false,\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    association: {\n                        cohorts: [],\n                        users: [],\n                    },\n                    loading: {\n                        cohorts: false,\n                        users: false,\n                    },\n                    search: {users: [], cohorts:[]},\n                    selected: {\n                         search: {users: [] , cohorts:[]},\n                         associated: {users: [] , cohorts:[]}\n                    },\n                    text: strings.studyplan_associate,\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            methods: {\n                showModal(){\n                    this.show = true;\n                    this.loadAssociations();\n                },\n                cohortOptionModel(c){\n                    return {\n                        value: c.id,\n                        text: c.name + ' (' + c.context.path.join(' / ') + ')',\n                    };\n                },\n                userOptionModel(u){\n                    return {\n                        value: u.id,\n                        text: u.firstname + ' ' + u.lastname,\n                    };\n                },\n                loadAssociations(){\n                    const self = this;\n                    self.loading.cohorts = true;\n                    self.loading.users = true;\n                    call([{\n                        methodname: 'local_treestudyplan_associated_users',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.users = response.map(self.userOptionModel);\n                        self.loading.users = false;\n                    }).fail(notification.exception);\n\n                    call([{\n                        methodname: 'local_treestudyplan_associated_cohorts',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.cohorts = response.map(self.cohortOptionModel);\n                        self.loading.cohorts = false;\n                    }).fail(notification.exception);\n                },\n                searchCohorts(searchtext){\n                    const self = this;\n\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_list_cohort',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.cohorts = response.map(self.cohortOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.cohorts = [];\n                    }\n                },\n                cohortAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.cohorts;\n                    const search = self.search.cohorts;\n                    const searchselected = self.selected.search.cohorts;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                cohortDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associatedselected = self.selected.associated.cohorts;\n                    const associated = self.association.cohorts;\n                    const search =  self.search.cohorts;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                searchUsers(searchtext){\n                    const self = this;\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_find_user',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.users = response.map(self.userOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.users = [];\n                    }\n                },\n                userAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const search =  self.search.users;\n                    const searchselected =  self.selected.search.users;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                userDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const associatedselected = self.selected.associated.users;\n                    const search = self.search.users;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n            }\n            ,\n            template:\n`\n<span class='s-studyplan-associate'\n    ><a href='#' @click.prevent=\"showModal\" ><slot><i class='fa fa-users'></i></slot></a>\n    <b-modal\n        v-model=\"show\"\n        size=\"lg\"\n        ok-variant=\"primary\"\n        :title=\"text.associations + ' - ' + value.name\"\n        ok-only>\n        <b-tabs class='s-studyplan-associate-window'>\n            <b-tab :title=\"text.cohorts\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\" @input=\"searchCohorts($event)\"\n                                :placeholder=\"text.search\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.cohorts\"\n                                :options=\"association.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.cohorts\"\n                                :options=\"search.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                            <b-button variant='danger' @click=\"cohortDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"cohortAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title=\"text.users\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\"\n                                @input=\"searchUsers($event)\"\n                                placeholder=\"Search users\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.users\"\n                                :options=\"association.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.users\"\n                                :options=\"search.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                                <b-button variant='danger' @click=\"userDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"userAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n`\n        });\n\n        /*******************\n         *\n         * Period editor\n         *\n         *************/\n\n        Vue.component('t-period-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'minstart' : {\n                    type: String,\n                    default() { return null;},\n                },\n                'maxend' : {\n                    type: String,\n                    default() { return null;},\n                }\n            },\n            data() {\n                return {\n                    show: false,\n                    editdata: {\n                        fullname: '',\n                        shortname: '',\n                        startdate: (new Date()).getFullYear() + '-08-01',\n                        enddate:  ((new Date()).getFullYear()+1) + '-08-01',\n                    },\n                    text: strings.period_edit,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n            },\n            methods: {\n                editStart(){\n                    objCopy(this.editdata,this.value,PERIOD_EDITOR_FIELDS);\n                    this.show = true;\n                },\n                editFinish(){\n                    const self = this;\n                    let args = { 'id': this.value.id };\n\n                    objCopy(args,this.editdata,PERIOD_EDITOR_FIELDS);\n\n                    call([{\n                        methodname: 'local_treestudyplan_edit_period',\n                        args: args\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                        self.$emit('edited',self.value);\n                    }).fail(notification.exception);\n                },\n                refresh(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_get_period',\n                        args: { 'id': this.value.id },\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                    }).fail(notification.exception);\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n            }\n            ,\n            template:\n            `\n            <span class='t-period-edit'>\n                <b-button :variant=\"variant\" v-if='type == \"button\"' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></b-button>\n                <a variant=\"variant\" v-else href='#' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></a>\n                <b-modal\n                    v-model=\"show\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.edit\"\n                    @ok=\"editFinish()\"\n                    :ok-disabled=\"Math.min(editdata.fullname.length,editdata.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.fullname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.fullname\"\n                                :state='editdata.fullname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.shortname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.shortname\"\n                                :state='editdata.shortname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.startdate\"\n                                    :min=\"(minstart ? minstart : '')\"\n                                    :max=\"sub_day(value.enddate)\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.enddate\"\n                                    :min=\"add_day(value.startdate)\"\n                                    :max=\"(maxend ? maxend : '')\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `\n        });\n\n        // TAG: Start studyplan component\n        /*\n        * T-STUDYPLAN\n        */\n        Vue.component('t-studyplan', {\n            props: [ 'value', 'index', ],\n            data() {\n                return {\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    create: {\n                        studyline: {\n                            'name': '',\n                            'shortname': '',\n                            'color': '#DDDDDD',\n                        },\n                        page: {\n                            'id': -1,\n                            'name' : '',\n                            'shortname' : ''\n                        }\n                    },\n                    edit: {\n                        toolbox_shown: false,\n                        studyline: {\n                            editmode: false,\n                            data: {\n                                name: '',\n                                shortname: '',\n                                color: '#DDDDDD',\n                            },\n                            original: {},\n                        },\n                        studyplan: {\n                            data: {\n                                name: '',\n                                shortname: '',\n                                description: '',\n                                slots : 4,\n                                startdate: '2020-08-01',\n                                enddate: '',\n                                aggregation: '',\n                                aggregation_config: '',\n                                aggregation_info: {\n                                    useRequiredGrades: true,\n                                    useItemCondition: false,\n                                },\n\n                            },\n                            original: {},\n                        }\n                    },\n                    text: strings.studyplan_text,\n                    cache: {\n                        linelayers: {},\n                    },\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n                if(this.value.pages[0].studylines.length == 0){\n                    // start in editmode if studylines are empty\n                    this.edit.studyline.editmode = true;\n                }\n                this.$root.$emit('redrawLines');\n            },\n            updated() {\n                this.$root.$emit('redrawLines');\n                ItemEventBus.$emit('redrawLines');\n            },\n            computed: {\n                \n            },\n            methods: {\n                columns(page) {\n                    return 1+ (page.periods * 2);\n                },\n                columns_stylerule(page) {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                trashbin_accepts(type){\n                    if(type.item){\n                        return true;\n                    } else {\n                        return false;\n                    }\n                },\n                countLineLayers(line,page){\n                    // For some optimization, we cache the value of this calculation for about a second\n                    // Would be a lot nicer if we could use a computed property for this.....\n                    if( this.cache.linelayers[line.id]\n                        && ((new Date()) - this.cache.linelayers[line.id].timestamp < 1000 )\n                    ){\n                        return this.cache.linelayers[line.id].value;\n                    }\n                    else\n                    {\n                        let maxLayer = -1;\n                        for(let i = 0; i <= page.periods; i++){\n                            if(line.slots[i]){\n                                const slot = line.slots[i];\n                                // Determine the amount of used layers in a studyline slit\n                                for(const ix in line.slots[i].courses){\n                                    const item = line.slots[i].courses[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n                                for(const ix in line.slots[i].filters){\n                                    const item = line.slots[i].filters[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n\n                            }\n                        }\n                        this.cache.linelayers[line.id] = {\n                            value: (maxLayer + 1),\n                            timestamp: (new Date()),\n                        };\n                        return maxLayer+1;\n                    }\n                },\n                slotsempty(slots) {\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                movedStudyplan(plan,from,to) {\n                    this.$emit('moved',plan,from,to); // Throw the event up....\n                },\n                addStudyLine(page,newlineinfo) {\n                    call([{\n                        methodname: 'local_treestudyplan_add_studyline',\n                        args: {\n                            'page_id': page.id,\n                            'name': newlineinfo.name,\n                            'shortname': newlineinfo.shortname,\n                            'color': newlineinfo.color,\n                            'sequence': page.studylines.length,\n                        }\n                    }])[0].done(function(response){\n                        page.studylines.push(response);\n                        newlineinfo.name = '';\n                        newlineinfo.shortname = '';\n                        newlineinfo.color = \"#dddddd\";\n                    }).fail(notification.exception);\n                },\n                editLineStart(line) {\n                    Object.assign(this.edit.studyline.data,line);\n                    this.edit.studyline.original = line;\n                    this.$bvModal.show('modal-edit-studyline-'+this.value.id);\n                },\n                editLineFinish() {\n                    let editedline = this.edit.studyline.data;\n                    let originalline = this.edit.studyline.original;\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyline',\n                        args: { 'id': editedline.id,\n                                'name': editedline.name,\n                                'shortname': editedline.shortname,\n                                'color': editedline.color,}\n                    }])[0].done(function(response){\n                        originalline['name'] = response['name'];\n                        originalline['shortname'] = response['shortname'];\n                        originalline['color'] = response['color'];\n                    }).fail(notification.exception);\n                },\n                deleteLine(page,line) {\n                    const self=this;\n                    get_strings([\n                            {key: 'studyline_confirm_remove', param: line.name, component: 'local_treestudyplan' },\n                            {key: 'delete', component: 'core' },\n                        ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyline',\n                                    args: { 'id': line.id, }\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        let index = page.studylines.indexOf(line);\n                                        page.studylines.splice(index, 1);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                reorderLines(event,lines){\n\n                    // apply reordering\n                    event.apply(lines);\n                    // send the new sequence to the server\n                    let sequence = [];\n                    for(let idx in lines)\n                    {\n                        sequence.push({'id': lines[idx].id,'sequence': idx});\n                    }\n                    call([{\n                        methodname: 'local_treestudyplan_reorder_studylines',\n                        args: { 'sequence': sequence }\n                    }])[0].done(function(response){\n                    }).fail(notification.exception);\n                },\n                deletePlan(studyplan){\n                    const self=this;\n                    get_strings([\n                        {key: 'studyplan_confirm_remove', param: studyplan.name, component: 'local_treestudyplan' },\n                        {key: 'delete', component: 'core' },\n                    ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyplan',\n                                    args: { 'id': studyplan.id, force: true}\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        self.$root.$emit(\"studyplanRemoved\",studyplan);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                deleteStudyItem(event){\n                    //const self = this;\n                    let item = event.data;\n\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyitem',\n                        args: { 'id': item.id, }\n                    }])[0].done(function(response){\n                        if(response.success == true){\n                            event.source.$emit('cut',event);\n                        }\n                    }).fail(notification.exception);\n\n                },\n                showslot(page,line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                periodEdited(pi) {\n                    const prev = this.$refs[\"periodeditor-\" + (pi.period - 1)][0];\n                    if(prev) {\n                        prev.refresh();\n                    }\n                    const next = this.$refs[\"periodeditor-\" + (pi.period + 1)][0];\n                    if(next) {\n                        next.refresh();\n                    }\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n                toolbox_switched(event){\n                    this.$emit('toggletoolbox',event);\n                },\n                pagecreated(page) {\n                    this.value.pages.push(page);\n                }\n            }\n            ,\n            template:\n            `\n            <div>\n                <div class='controlbox t-studyplan-controlbox'>\n                    <div class=\"controlbox-group\">\n                        <b-form-checkbox v-model=\"edit.studyline.editmode\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); \"\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if=\"!edit.studyline.editmode\" v-model=\"edit.toolbox_shown\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched\"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode='copy'\n                            class='t-item-deletebox text-danger border-danger'\n                            @drop='deleteStudyItem'\n                            :accepts-type=\"trashbin_accepts\"\n                            ><i class='fa fa-trash'></i>\n                        </drop>\n                    </div>\n                    <div class=\"controlbox-group\">\n                        <span class='control editable'>\n                            <t-studyplan-advanced v-model=\"value\"></t-studyplan-advanced>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-associate\n                                v-model=\"value\"><i class='fa fa-users'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-edit v-model=\"value\" @moved=\"movedStudyplan\" \n                                ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class='control deletable'>\n                            <a v-if='value.pages.length == 0' href='#' @click='deletePlan(value)'\n                                ><i class='text-danger fa fa-trash'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <b-tabs content-class=\"mt-1\">\n                    <!-- New Tab Button (Using tabs-end slot) -->\n                    <template #tabs-end>\n                        <t-studyplan-page-edit \n                            :studyplan=\"value\"\n                            v-model=\"create.page\"\n                            type=\"link\"\n                            mode=\"create\"\n                            @created=\"pagecreated\"\n                        ><i class='fa fa-plus'></i></t-studyplan-page-edit>\n                    </template>\n                    <b-tab\n                        v-for=\"(page,pageindex) in value.pages\"\n                        :key=\"page.id\"\n                        >\n                        <template #title>\n                            {{page.shortname}}\n                            <t-studyplan-page-edit \n                                v-model=\"value.pages[pageindex]\"\n                                :studyplan=\"value\"\n                                type=\"link\"\n                            ></t-studyplan-page-edit>\n                        </template>\n                        <div class='t-studyplan-content-edit' v-if=\"edit.studyline.editmode\">\n                            <drop-list\n                                :items=\"page.studylines\"\n                                class=\"t-slot-droplist\"\n                                :accepts-type=\"'studyline-'+page.id\"\n                                xreorder=\"$event.apply(page.studylines)\"\n                                @reorder=\"reorderLines($event,page.studylines)\"\n                                mode=\"copy\"\n                                row\n                            >\n                                <template v-slot:item=\"{item}\">\n                                    <drag\n                                        :key=\"item.id\"\n                                        class='t-studyline-drag'\n                                        :data=\"item\"\n                                        :type=\"'studyline-'+page.id\"\n                                        >\n                                        <template v-slot:drag-image>\n                                            <i class=\"fa fa-arrows text-primary\"></i>\n                                        </template>\n                                        <t-studyline-edit\n                                            v-model=\"item\"\n                                            @edit='editLineStart(item)'\n                                            @delete='deleteLine(page,item)'\n                                            >\n                                            <div v-if=\"!slotsempty(item.slots)\"> {{ text.editmode_modules_hidden}} </div>\n                                        </t-studyline-edit>\n                                    </drag>\n                                </template>\n                            </drop-list>\n                        </div>\n                        <div class='t-studyplan-content' v-else>\n\n                            <!-- Now paint the headings column -->\n                            <div class='t-studyplan-headings'>\n                                <s-studyline-header-heading :identifier='Number(page.id)'></s-studyline-header-heading>\n                                <t-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                                    :key=\"line.id\"\n                                    @resize=\"headingresized(lineindex,$event)\"\n                                    v-model=\"page.studylines[lineindex]\"\n                                    :layers='countLineLayers(line,page)+1'\n                                    :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                            + ((lineindex==0)?' first ':' ')\n                                            + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                ></t-studyline-heading>\n                            </div>\n                            <!-- Next, paint all the cells in the scrollable -->\n                            <div class=\"t-studyplan-scrollable\" >\n                                <div class=\"t-studyplan-timeline\" :style=\"columns_stylerule(page)\">\n                                <!-- add period information --> \n                                <template v-for=\"(n,index) in (page.periods+1)\">\n                                    <s-studyline-header-period\n                                        :identifier='Number(page.id)'\n                                        v-if=\"index > 0\"\n                                        v-model=\"page.perioddesc[index-1]\"\n                                        ><t-period-edit\n                                            :ref=\"'periodeditor-'+index\"\n                                            @edited=\"periodEdited\"\n                                            v-model=\"page.perioddesc[index-1]\"\n                                            :minstart=\"(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null\"\n                                            :maxend=\"(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null\"\n                                        ></t-period-edit\n                                    ></s-studyline-header-period>\n                                    <div class=\"s-studyline-header-filter\"></div>\n                                </template>\n\n                                <!-- Line by line add the items -->\n                                <!-- The grid layout handles putting it in rows and columns -->\n                                <template v-for=\"(line,lineindex) in page.studylines\"\n                                    ><template v-for=\"(layernr,layeridx) in countLineLayers(line,page)+1\"\n                                        ><template v-for=\"(n,index) in (page.periods+1)\"\n                                            >\n                                            <t-studyline-slot\n                                                v-if=\"index > 0 && showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='gradable'\n                                                v-model=\"line.slots[index].courses\"\n                                                :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                                :slotindex=\"index\"\n                                                :line=\"line\"\n                                                :plan=\"value\"\n                                                :page=\"page\"\n                                                :period=\"page.perioddesc[index-1]\"\n                                                :layer=\"layeridx\"\n                                                :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                        + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\n                                                        + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')\"\n                                            ></t-studyline-slot\n                                            ><t-studyline-slot\n                                                type='filter'\n                                                v-if=\"showslot(page,line, index, layeridx, 'filter')\"\n                                                v-model=\"line.slots[index].filters\"\n                                                :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                                :slotindex=\"index\"\n                                                :line=\"line\"\n                                                :plan=\"value\"\n                                                :page=\"page\"\n                                                :layer=\"layeridx\"\n                                                :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                        + ((lineindex==0 && layernr==1)?' first ':'')\n                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                        + ((index==page.periods)?' rightmost':'')\n                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\n                                                        + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')\"\n                                                >\n                                            </t-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div>\n                            </div>\n                        </div>\n                        <div v-if=\"edit.studyline.editmode\" class='t-studyline-add'>\n                            <a href=\"#\" v-b-modal=\"'modal-add-studyline-'+page.id\" @click=\"false;\"\n                                ><i class='fa fa-plus'></i>{{ text.studyline_add }}</a>\n                        </div>\n                        <b-modal\n                            :id=\"'modal-add-studyline-'+page.id\"\n                            size=\"lg\"\n                            :ok-title=\"text.add$core\"\n                            ok-variant=\"primary\"\n                            :title=\"text.studyline_add\"\n                            @ok=\"addStudyLine(page,create.studyline)\"\n                            :ok-disabled=\"Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0\"\n                            >\n                            <b-container>\n                                <b-row>\n                                    <b-col cols=\"3\">{{text.studyline_name}}</b-col>\n                                    <b-col>\n                                        <b-form-input v-model=\"create.studyline.name\" :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"3\">{{text.studyline_shortname}}</b-col>\n                                    <b-col>\n                                    <b-form-input\n                                        v-model=\"create.studyline.shortname\"\n                                        :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"3\">{{text.studyline_color}}</b-col>\n                                    <b-col>\n                                        <input type=\"color\" v-model=\"create.studyline.color\" />\n                                        <!-- hsluv-picker v-model=\"create.studyline.color\" horizontal displaysize=\"175\" ></hsluv-picker -->\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <b-modal\n                            :id=\"'modal-edit-studyline-'+page.id\"\n                            size=\"lg\"\n                            ok-variant=\"primary\"\n                            :title=\"text.studyline_edit\"\n                            @ok=\"editLineFinish()\"\n                            :ok-disabled=\"Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0\"\n                            >\n                            <b-container>\n                                <b-row>\n                                    <b-col cols=\"3\">{{ text.studyline_name}}</b-col>\n                                    <b-col>\n                                        <b-form-input\n                                            v-model=\"edit.studyline.data.name\"\n                                            :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"3\">{{ text.studyline_shortname}}</b-col>\n                                    <b-col>\n                                    <b-form-input\n                                        v-model=\"edit.studyline.data.shortname\"\n                                        :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"3\">{{ text.studyline_color}}</b-col>\n                                    <b-col>\n                                        <input type=\"color\" v-model=\"edit.studyline.data.color\" />\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                    </b-tab>\n                </b-tabs>\n            </div>\n            `\n        });\n\n\n       /*\n        * T-STUDYLINE-HEADER\n        */\n       Vue.component('t-studyline-heading', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                },\n                layers: {\n                    type: Number,\n                    default: 1,\n                },\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onLineHeightChange(lineid,layerid,newheight){\n                    // All layers for this line have the first slot send an update message on layer height change.\n                    // When one of those updates is received, record the height and recalculate the total height of the\n                    // header\n                    if(this.$refs.main && lineid == this.value.id){\n                        const items = document.querySelectorAll(\n                            `.t-studyline-slot-0[data-studyline='${this.value.id}']`);\n\n                        // determine the height of all the lines and add them up.\n                        let heightSum = 0;\n                        items.forEach((el) => {\n                            // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n                            const r = el.getBoundingClientRect();\n                            const height = r.height;\n                            heightSum += height;\n                        });\n\n                        const heightStyle=`${heightSum}px`;\n                        this.$refs.main.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"t-studyline t-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"main\"\n                ><div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <abbr v-b-tooltip.hover.right :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n        * T-STUDYLINE (Used only for study line edit mode)\n        */\n        Vue.component('t-studyline-edit', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                }\n           },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                deletable() {\n                    // Check if all the slots are empty\n                    const slots = this.value.slots;\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                editable() {\n                    return true;\n                }\n            },\n            methods: {\n                onEdit() {\n                    this.$emit('edit',this.value);\n                },\n                onDelete() {\n                    this.$emit('delete',this.value);\n                },\n\n            },\n            template: `\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n         * During a redisign it was decided to have the studyline still get the entire array as a value,\n         * even though it only shows one drop slot for the layer it is in. This is to make repainting easier,\n         * since we modify the array for the layer we handle. FIXME: Make this less weird\n         */\n        Vue.component('t-studyline-slot', {\n            props: {\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: '',\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                value: {\n                    type: Array, // dict with layer as index\n                    default(){ return [];},\n                },\n                plan: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                period: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n            },\n            mounted() {\n                const self=this;\n                if(self.type == \"gradable\" && self.slotindex == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                slotkey(){\n                    return `${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`;\n                },\n                itemidx(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return ix;\n                        }\n                    }\n                    return null;\n                },\n                item(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return itm;\n                        }\n                    }\n                    return null;\n                },\n                listtype() {\n                    return this.type;\n                },\n                dragacceptlist(){\n                    if(this.type == \"gradable\"){\n                        return [\"course\", \"gradable-item\"];\n                    } else {\n                        return [\"filter\", \"filter-item\"];\n                    }\n                },\n                courseHoverDummy(){\n                    return {course: this.hover.component};\n                },\n                current(){\n                    if( this.period && this.period.startdate && this.period.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.period.startdate);\n                        const pend = new Date(this.period.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                spanCss(){\n                    if(this.item && this.item.span > 1){\n                        const span = (2 * this.item.span) - 1;\n                        return `width: 100%; grid-column: span ${span};`;\n                    } else {\n                        return \"\";\n                    }\n                }\n            },\n            data() {\n                return {\n                    text: strings.course_timing,\n                    resizeListener: null,\n                    hover: {\n                        component:null,\n                        type: null,\n                    },\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        default: false,\n                        defaultchoice: false,\n                        hidewarn: false,\n                    }\n                };\n            },\n            methods: {\n                onDrop(event) {\n                    this.hover.component = null;\n                    this.hover.type = null;\n                    debug.info(event);\n                    const self = this;\n                    if(event.type.item) {\n                        let item = event.data;\n\n                        // To avoid weird visuals with the lines,\n                        // we add the item to the proper place in the front-end first\n                        item.layer = this.layer;\n                        item.slot = this.slotindex;\n                        self.value.push(item);\n                        self.$emit(\"input\",self.value);\n\n                        // then on the next tick, we inform the back end\n                        // Since moving things around has never been unsuccessful, unless you have other problems,\n                        // it's better to have nice visuals.\n                        self.relocateStudyItem(item).done(()=>{\n                            if(this.$refs.timingChecker){\n                                this.$refs.timingChecker.validate_course_period();\n                            }\n                        });\n                    }\n                    else if(event.type.component){\n                        debug.info(\"Adding new component\");\n                        if(event.type.type == \"gradable\"){\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"layer\" : self.layer,\n                                    \"type\": 'course',\n                                    \"details\": {\n                                        \"competency_id\": null,\n                                        'conditions':'',\n                                        'course_id':event.data.id,\n                                        'badge_id':null,\n                                        'continuation_id':null,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n\n                                    // call the validate period function on next tick,\n                                    // since it paints the item in the slot first\n                                    this.$nextTick(() => {\n                                        if(this.$refs.timingChecker){\n                                            this.$refs.timingChecker.validate_course_period();\n                                        }\n                                    });\n                                });\n                            }).fail(notification.exception);\n                        }\n                        else  if(event.type.type == \"filter\") {\n                            debug.info(\"Adding new filter compenent\");\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"type\": event.data.type,\n                                    \"details\":{\n                                        \"badge_id\": event.data.badge?event.data.badge.id:undefined,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    item.layer = this.layer;\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n                                });\n                            }).fail(notification.exception);\n                        }\n                    }\n                },\n                onCut(event) {\n                    const self=this;\n                    let id = event.data.id;\n                    for(let i = 0; i < self.value.length; i++){\n                        if(self.value[i].id == id){\n                            self.value.splice(i, 1); i--;\n                            break; // just remove one\n                        }\n                    }\n                    // Do something to signal that this item has been removed\n                    this.$emit(\"input\",this.value);\n                },\n                relocateStudyItem(item){\n                    const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};\n                    return call([{\n                        methodname: 'local_treestudyplan_reorder_studyitems',\n                        args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array\n                    }])[0].fail(notification.exception);\n                },\n                onDragEnter(event){\n                    this.hover.component = event.data;\n                    this.hover.type = event.type;\n                },\n                onDragLeave(){\n                    this.hover.component = null;\n                    this.hover.type = null;\n                },\n                maxSpan(){\n                    // Determine the maximum span for components in this slot\n                    // Used for setting the max in the timing adjustment screen(s)\n                    // And for checking the filter types\n\n                    // Assume this slot is first one available\n                    let freeIndex = this.slotindex;\n                    // Determine last free slot following this one in the layer\n                    for(let i = this.slotindex + 1; i <= this.page.periods; i++){\n                        if(this.line.slots && this.line.slots[i] && this.line.slots[i].courses){\n                            const clist = this.line.slots[i].courses;\n                            const flist = this.line.slots[i-1].filters; // next filter is in the same slot\n                            let busy = false;\n                            for(const ix in clist) {\n                                if( clist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n                            for(const ix in flist) {\n                                if( flist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n\n                            if(! busy) {\n                                // slot is free in this layer\n                                freeIndex = i;\n                            } else {\n                                break; // stop checking next slots\n                            }\n\n                        } else {\n                            break; // stop processing\n                        }\n                    }\n                    // calculate span from that\n                    return freeIndex - this.slotindex + 1;\n\n                },\n                makeType(item){\n                    return {\n                        item: true,\n                        component: false,\n                        span: item.span,\n                        type: this.type,\n                    };\n                },\n                checkType(type) {\n                    if(type.type == this.type){\n                        if(type == 'filter'){\n                             return true;\n                        } else if(type.span <= this.maxSpan()){\n                            return true;\n                        } else {\n                            return false;\n                        }\n                    } else {\n                        return false;\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')\n                         + (current?'current ':' ')\"\n                :data-studyline=\"line.id\" ref=\"main\"\n                :style='spanCss'\n                ><drag v-if=\"item\"\n\n                    :key=\"item.id\"\n                    class=\"t-slot-item\"\n                    :data=\"item\"\n                    :type=\"makeType(item)\"\n                    @cut=\"onCut\"\n                        ><t-item\n                            @deleted=\"onCut\"\n                            v-model=\"value[itemidx]\"\n                            :plan=\"plan\"\n                            :line='line'\n                            :page='page'\n                            :period='period'\n                            :maxspan='maxSpan()'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class=\"'t-slot-drop '+type + (layer > 0?' secondary':' primary')\"\n                    :accepts-type=\"checkType\"\n                    @drop=\"onDrop\"\n                    mode=\"cut\"\n                    @dragenter=\"onDragEnter\"\n                    @dragleave=\"onDragLeave\"\n                ><template v-if=\"hover.component\">\n                        <div v-if=\"hover.type.item\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.component.id\"\n                            ><t-item v-model=\"hover.component\" dummy></t-item\n                            ></div\n                        ><div v-else-if=\"hover.type.type == 'gradable'\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"'course-'+hover.component.id\"\n                            ><t-item-course v-model=\"courseHoverDummy\"></t-item-course></div\n                        ><div v-else-if=\"hover.type.type == 'filter'\"\n                            class=\"t-slot-item feedback\"\n                            key=\"tooldrop\"\n                            ><t-item-junction    v-if=\"hover.component.type == 'junction'\" ></t-item-junction\n                            ><t-item-start       v-else-if=\"hover.component.type == 'start'\"    ></t-item-start\n                            ><t-item-finish      v-else-if=\"hover.component.type == 'finish'\"   ></t-item-finish\n                            ><t-item-badge       v-else-if=\"hover.component.type == 'badge'\"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.type\">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if=\"value && value[itemidx] && value[itemidx].course\"\n                    ref=\"timingChecker\"\n                    :maxspan=\"maxSpan()\"\n                    :page=\"page\"\n                    :period=\"period\"\n                    v-model=\"value[itemidx]\"\n                    ></t-item-timing-checker>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item-timing-checker', {\n            props: {\n                value: {\n                    type: Object, // t-item model\n                },\n                page: {\n                    type: Object, // Studyplan data\n                },\n                period: {\n                    type: Object, // Studyplan data\n                },\n                maxspan: {\n                    type: Number,\n                },\n                hidden: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            computed: {\n                endperiod() {\n                    const endperiodnr = Math.min(this.page.periods,this.period.period + (this.value.span - 1));\n                    return this.page.perioddesc[endperiodnr-1];\n                },\n                course_period_matches() {\n                    const self=this;\n                    if(self.value && self.value.type == 'course'){\n                        self.datechanger.coursespan = datespaninfo(self.value.course.startdate,self.value.course.enddate);\n                        self.datechanger.periodspan = datespaninfo(self.period.startdate,self.endperiod.enddate);\n                        if( self.datechanger.coursespan.first.getTime() == self.datechanger.periodspan.first.getTime()\n                            && self.datechanger.coursespan.last.getTime() == self.datechanger.periodspan.last.getTime()  ){\n                            return true;\n                        }\n                        else {\n                            return false;\n                        }\n                    } else {\n                        debug.warn(\"Timing thing not proper configured\",self.value,self.period,self.maxspan);\n                        return false;\n                    }\n                },\n            },\n            data() {\n                return {\n                    // Create random id to avoid opening the wrong modals\n                    id: Math.floor(Math.random() * Date.now()).toString(16),\n                    text: strings.course_timing,\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        globals: datechanger_globals,\n                    }\n                };\n            },\n            methods: {\n\n                validate_course_period(force) {\n                    const self = this;\n\n                    debug.info(\"Validating course and period\");\n                    if(!(self.course_period_matches)){\n                        debug.info(\"Course timing does not match period timing\");\n\n                        if(self.value.course.canupdatecourse){\n                            if(!self.hidden || !self.datechanger.globals.default){\n                                // Periods do not match, pop up the date change request\n                                this.$bvModal.show('t-course-timing-matching-'+this.id);\n                            } else if (self.datechanger.globals.defaultvalue){\n                                // go for it without asking\n                                self.change_course_period();\n                            }\n                        }\n                        else {\n                            // user is not able to change course timing - show a warning\n                            if(!self.hidden || !self.datechanger.globals.hidewarn){\n                                this.$bvModal.show('t-course-timing-warning-'+this.id);\n                            }\n                        }\n                    }\n                    else {\n                        debug.info(\"Course timing matches period\",self.datechanger);\n                    }\n                },\n                change_course_period() {\n                    const self=this;\n                    // Save the state\n                    if(self.datechanger.globals.default){\n                        self.datechanger.globals.defaultvalue = true;\n                    }\n                    return call([{\n                        methodname: 'local_treestudyplan_course_period_timing',\n                        args: { period_id: self.period.id,\n                                course_id: this.value.course.id,\n                                span: this.value.span,\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.course.startdate = response.startdate;\n                        self.value.course.enddate = response.enddate;\n                        self.value.course.timing = response.timing;\n                        self.$emit(\"input\",self.value);\n                    });\n                },\n                change_span(span) {\n                    const self=this;\n                    return call([{\n                        methodname: 'local_treestudyplan_set_studyitem_span',\n                        args: { id: self.value.id,\n                                span: span\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.span = response.span;\n                        self.$emit('input',self.value);\n                        self.$nextTick(() => {\n                            self.validate_course_period();\n                        });\n                    } );\n                },\n                format_duration(dsi){\n                    let s = \"\";\n                    if(dsi.years == 1){ s += `1 ${this.text.year}, `;}\n                    else if(dsi.years > 1){ s += `${dsi.years} ${this.text.years}, `;}\n                    if(dsi.weeks == 1){ s += `1 ${this.text.week}, `;}\n                    else if(dsi.weeks > 1){ s += `${dsi.weeks} ${this.text.weeks}, `;}\n                    if(dsi.days == 1){ s += `1 ${this.text.day}, `;}\n                    else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}\n\n                    return s.toLocaleLowerCase();\n                },\n            },\n            // To avoid the span creeping in the dom where it shouldn't, set display to none if it is hidden\n            // This does not affect the modals, which are rendered outside of this element when needed\n            template: `\n            <div :class=\"'t-item-timing-checker'\" :style=\"hidden?'display: none ':''\">\n                <template v-if=\"!hidden\" >\n                    <span class=\"mr-1\" v-if=\"course_period_matches\">\n                        <i  class=\"text-success fa fa-calendar-check-o\"\n                            v-b-tooltip.hover.topright :title=\"text.timing_ok\"\n                        ></i>\n                    </span>\n                    <span class=\"mr-1\" v-else>\n                        <a  href='#' @click=\"validate_course_period()\" class=\"text-warning\"\n                            v-b-tooltip.hover.bottomleft :title=\"text.timing_off\"\n                            ><i class=\"fa fa-calendar-times-o\"\n                            ></i\n                            ><i class=\"fa fa-question-circle text-black-50\"\n                                style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class=\"ml-1\" v-b-tooltip.hover.bottomleft :title=\"text.periodspan_desc\"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=\"\"\n                            size=\"sm\" @change=\"change_span\" v-model=\"value.span\">\n                            <b-form-select-option v-for=\"(n,i) in maxspan\" :value='n' :key='i'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class=\"fa fa-question-circle text-black-50\"\n                            style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id=\"'t-course-timing-matching-'+this.id\"\n                    size=\"lg\"\n                    :title=\"text.title\"\n                    @ok=\"change_course_period\"\n                    :ok-title=\"text.yes\"\n                    ok-variant=\"danger\"\n                    :cancel-title=\"text.no\"\n                    cancel-variant=\"primary\"\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.default\">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id=\"'t-course-timing-warning-'+this.id\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.title\"\n                    :ok-title=\"text.yes\"\n                    ok-only\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.hidewarn\">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                dummy :{\n                    type: Boolean,\n                    default() { return false;},\n                },\n                plan: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                line: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                page: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                period: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;},\n                },\n            },\n            data() {\n                return {\n                    dragLine: null,\n                    dragEventListener: null,\n                    deleteMode: false,\n                    condition_options: string_keys.conditions,\n                    text: strings.item_text,\n                    showContext: false,\n                    lines: [],\n                };\n            },\n            methods: {\n                dragStart(event){\n                    // Add line between start point and drag image\n                    this.deleteMode = false;\n                    let start = document.getElementById('studyitem-'+this.value.id);\n                    let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.position.x+'px';\n                    dragelement.style.top = event.position.y+'px';\n                    this.dragLine = new SimpleLine(start,dragelement,{\n                            color: \"#777\",\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    // Add separate event listener to reposition mouse move\n                    document.addEventListener(\"mousemove\",this.onMouseMove);\n                },\n                dragEnd(){\n                    if(this.dragLine !== null) {\n                        this.dragLine.remove();\n                    }\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.removeProperty('left');\n                    dragelement.style.removeProperty('top');\n                    dragelement.style.removeProperty('position');\n                    document.removeEventListener(\"mousemove\",this.onMouseMove);\n                },\n                onMouseMove: function(event){\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.clientX+'px';\n                    dragelement.style.top = event.clientY+'px';\n                    // line will follow automatically\n                },\n                onDrop(event){\n                    let from_id = event.data.id;\n                    let to_id = this.value.id;\n                    this.redrawLines();\n                    call([{\n                        methodname: 'local_treestudyplan_connect_studyitems',\n                        args: { 'from_id': from_id, 'to_id': to_id }\n                    }])[0].done((response)=>{\n                        let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};\n                        ItemEventBus.$emit(\"createdConnection\",conn);\n                        this.value.connections.in.push(conn);\n                    }).fail(notification.exception);\n                },\n                redrawLine(conn){\n                    const lineColor = \"var(--success)\";\n                    const start = document.getElementById(`studyitem-${conn.from_id}`);\n                    const end = document.getElementById(`studyitem-${conn.to_id}`);\n\n                    // delete old line\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                    // create a new line if the start and finish items are visible\n                    if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n                        this.lines[conn.to_id] = new SimpleLine( start,end,{\n                            color: lineColor,\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    }\n\n                },\n                deleteLine(conn){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_disconnect_studyitems',\n                        args: { 'from_id': conn.from_id, 'to_id': conn.to_id }\n                    }])[0].done((response)=>{\n                        if(response.success){\n                            this.removeLine(conn);\n                            // send disconnect event on message bus, so the connection on the other end can delete it too\n                            ItemEventBus.$emit(\"connectionDisconnected\",conn);\n                            // Remove connection from our outgoing list\n                            let index = self.value.connections.out.indexOf(conn);\n                            self.value.connections.out.splice(index, 1);\n                        }\n                    }).fail(notification.exception);\n                },\n                highlight(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--danger)\",});\n                    }\n                },\n                normalize(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--success)\",});\n                    }\n                },\n                updateItem() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                'continuation_id': this.value.continuation_id,}\n                    }])[0].fail(notification.exception);\n                },\n                doShowContext(event) {\n                    if(this.hasContext){\n                        this.showContext=true;\n                        event.preventDefault();\n                    }\n                },\n                redrawLines(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n\n                // EVENT LISTENERS\n                onCreatedConnection(conn){\n                    if(conn.from_id == this.value.id){\n                        this.value.connections.out.push(conn);\n                        this.redrawLine(conn);\n                    }\n                },\n                // Listener for the signal that a connection was removed by the outgoing item\n                onRemovedConnection(conn){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.in){\n                            let c_in = this.value.connections.in[i];\n                            if(conn.id == c_in.id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n                // Listener for reposition events\n                // When an item in the list is repositioned, all lines need to be redrawn\n                onRePositioned(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n                // When an item is disPositioned - (temporarily) removed from the list,\n                // all connections need to be deleted.\n                onDisPositioned(re_id){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == re_id){\n                                this.removeLine(conn);\n                            }\n                        }\n                    }\n                },\n\n                // When an item is deleted\n                // all connections to/from that item need to be cleaned up\n                onItemDeleted(item_id){\n                    const self = this;\n                    if(this.value.connections && this.value.connections.out){\n                        for(const i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == item_id){\n                                self.removeLine(conn);\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                    if(this.value.connections && this.value.connections.in){\n                        for(const i in this.value.connections.in){\n                            let conn = this.value.connections.in[i];\n                            if(conn.from_id == item_id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n\n                onRedrawLines(){\n                    this.redrawLines();\n                },\n\n                removeLine(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                },\n                deleteItem(){\n                    const self = this;\n                    const msgparams = {\n                        item: this.text['type_' + this.value.type].toLocaleLowerCase(),\n                        name: (this.value.type=='course')?this.value.course.displayname:\"\",\n                        line: (this.line) ? this.line.name : \"\",\n                        period: (this.period) ? this.period.fullname : this.plan.name,\n                    };\n\n                    this.$bvModal.msgBoxConfirm(strformat(this.text.item_delete_message, msgparams), {\n                        okVariant : 'danger',\n                        okTitle : this.text.ok,\n                        cancelTitle: this.text.cancel,\n                    }).then(value => {\n                        if ( value ) {\n                            // Confirmed to delete.\n                            call([{\n                                methodname: 'local_treestudyplan_delete_studyitem',\n                                args: { 'id': self.value.id, }\n                            }])[0].done(function(response){\n                                if(response.success == true){\n                                    self.$emit(\"deleted\",{ data: self.value });\n                                }\n                            }).fail(notification.exception);\n                        }\n                    }).catch(err => {\n                        debug.console.error(err);\n                    });\n                }\n\n\n            },\n            computed: {\n                hasConnectionsOut() {\n                    return !([\"finish\",].includes(this.value.type));\n                },\n                hasConnectionsIn() {\n                    return !([\"start\",].includes(this.value.type));\n                },\n                hasContext() {\n                    return ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n                // Add event listeners on the message bus\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n                if(!this.dummy){\n\n                    // Listener for the signal that a new connection was made and needs to be drawn\n                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                    ItemEventBus.$on('createdConnection', this.onCreatedConnection);\n                    // Listener for the signal that a connection was removed by the outgoing item\n                    ItemEventBus.$on('removedConnection', this.onRemovedConnection);\n                    // Listener for reposition events\n                    // When an item in the list is repositioned, all lines need to be redrawn\n                    ItemEventBus.$on('rePositioned', this.onRePositioned);\n                    // When an item is disPositioned - (temporarily) removed from the list,\n                    // all connections need to be deleted.\n                    ItemEventBus.$on('disPositioned', this.onDisPositioned);\n                    // When an item is deleted\n                    // all connections to/from that item need to be cleaned up\n                    ItemEventBus.$on('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$on('redrawLines', this.onRedrawLines);\n\n\n                }\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n\n                if(!this.dummy)\n                {\n                    this.redrawLines();\n                    setTimeout(()=>{\n                        ItemEventBus.$emit(\"rePositioned\",this.value.id);\n                    },10);\n                }\n            },\n            beforeDestroy(){\n                if(!this.dummy) {\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.removeLine(conn);\n                    }\n                    ItemEventBus.$emit(\"disPositioned\",this.value.id);\n\n                    // Remove event listeners\n                    ItemEventBus.$off('createdConnection', this.onCreatedConnection);\n                    ItemEventBus.$off('removedConnection', this.onRemovedConnection);\n                    ItemEventBus.$off('rePositioned', this.onRePositioned);\n                    ItemEventBus.$off('disPositioned', this.onDisPositioned);\n                    ItemEventBus.$off('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$off('redrawLines', this.onRedrawLines);\n                }\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"t-item-base\" :id=\"'studyitem-'+value.id\">\n                <t-item-course\n                    v-if=\"value.type == 'course'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                    :plan='plan'\n                    :page='page'\n                    :period='period'\n                    :maxspan='maxspan'\n                ></t-item-course>\n                <t-item-junction\n                    v-if=\"value.type == 'junction'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-junction>\n                <t-item-start\n                    v-if=\"value.type == 'start'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-start>\n                <t-item-finish\n                    v-if=\"value.type == 'finish'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if=\"value.type == 'badge'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if=\"value.type == 'invalid'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-invalid>\n                <drop v-if='!dummy && hasConnectionsIn' accepts-type=\"linestart\"\n                    :id=\"'t-item-cend-'+value.id\"\n                    class=\"t-item-connector-end\"\n                    mode=\"copy\"\n                    @drop=\"onDrop\"\n                    ><svg width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg></drop>\n                <drag v-if='!dummy && hasConnectionsOut' type=\"linestart\"\n                    :id=\"'t-item-cstart-'+value.id\"\n                    :class=\"'t-item-connector-start ' + ((deleteMode&&value.connections.out.length)?'deleteMode':'')\"\n                    :data=\"value\"\n                    @dragstart=\"dragStart\"\n                    @dragend=\"dragEnd\"\n                    @click=\"deleteMode = (value.connections.out.length)?(!deleteMode):false\"\n                    >\n                    <svg  width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg>\n                    <template v-slot:drag-image=\"{data}\"> <i :id=\"'t-item-cdrag-'+value.id\" class=\"fa\"></i>\n                    </template>\n                </drag>\n                <div class=\"deletebox\" v-if=\"deleteMode && value.connections.out.length > 0\"\n                    >\n                    <a v-for=\"conn in value.connections.out\"\n                        @click=\"deleteLine(conn)\"\n                        @mouseenter=\"highlight(conn)\"\n                        @mouseleave=\"normalize(conn)\"\n                        class=\"t-connection-delete text-danger\"\n                        :title=\"conn.id\">\n                        <i class=\"fa fa-trash\"></i>\n                    </a>\n                </div>\n                <a  v-if=\"hasContext\" class=\"t-item-config\"\n                    v-b-modal=\"'t-item-config-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal no-body class=\"\"\n                    :id=\"'t-item-config-'+value.id\"\n                    :title=\"text['item_configuration']\"\n                    scrollable\n                    ok-only\n                    class=\"t-item-contextview b-modal-justify-footer-between\"\n                >\n                    <b-form-group\n                        v-if=\"value.type != 'start'\"\n                        :label=\"text.select_conditions\"\n                    >\n                        <b-form-select size=\"sm\"\n                            @input=\"updateItem\"\n                            v-model=\"value.conditions\"\n                            :options=\"condition_options\"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer=\"{ ok, cancel, hide }\" >\n                    <a href='#' @click='deleteItem()' class=\"text-danger\"\n                        ><i class=\"fa fa-trash\"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-invalid', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    text: strings.invalid,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class=\"t-item-invalid\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"t-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{text.error}}\n                            <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course', {\n            props: {\n                value:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                plan:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // PAge data\n                    default() { return null;}\n                },\n                period: {\n                    type: Object, // Period data\n                    default() { return null;}\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;}\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useItemConditions() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined){\n                        return this.plan.aggregation_info.useItemConditions;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n\n                configurationState(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"t-configured-ok\";\n                    } else {\n                        return \"t-configured-alert\";\n                    }\n                },\n\n                configurationIcon(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"check\";\n                    } else {\n                        return \"exclamation-circle\";\n                    }\n                },\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n\n            },\n            methods: {\n                hasGrades() {\n                    if(this.value.course.grades && this.value.course.grades.length > 0){\n                        for(const g of this.value.course.grades){\n                            if(g.selected){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                hasCompletions() {\n                    if(this.value.course.completion && this.value.course.completion.conditions) {\n                        for(const cgroup of this.value.course.completion.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                updateConditions() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div class=\"t-item-course\">\n            <b-card no-body >\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'t-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body >\n                            <a  class=\"t-item-course-config\"\n                                v-b-modal=\"'t-item-course-config-'+value.id\"\n                                href=\"#\" @click.prevent=\"\"\n                                ><i :class=\"'fa fa-'+configurationIcon+' ' + configurationState\"></i></a>\n                            <a  v-b-modal=\"'t-item-course-config-'+value.id\"\n                                :id=\"'t-item-course-details-'+value.id\"\n                                :href=\"'/course/view.php?id='+value.course.id\"\n                                @click.prevent.stop=\"\">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=\"\"\n                    :id=\"'t-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    size=\"lg\"\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <a v-if='!!value.course.completion'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.shortname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class=\"mt-1\"\n                                :maxspan=\"maxspan\"\n                                :page=\"page\"\n                                :period=\"period\"\n                                v-model=\"value\"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value' :plan=\"plan\"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n\n        Vue.component('t-item-course-grades', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'plan' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                selectedgrades(){\n                    let list = [];\n                    for(let ix in this.value.course.grades){\n                        let g = this.value.course.grades[ix];\n                        if(g.selected){\n                            list.push(g);\n                        }\n                    }\n                    return list;\n                },\n            },\n            methods: {\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div>\n                <b-form-group\n                    :label=\"text.select_grades\"\n                    ><ul class=\"t-item-module-children\">\n                        <li class=\"t-item-course-gradeinfo\">\n                            <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                            ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                        </li>\n                        <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                            <b-form-checkbox inline\n                                @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                ></b-form-checkbox>\n                            <span :title=\"g.typename\" v-html=\"g.icon\"></span>\n                            <s-edit-mod\n                                :title=\"value.course.fullname\"\n                                @saved=\"(fd) => g.name = fd.get('name')\"\n                                v-if=\"g.cmid > 0\"\n                                :cmid=\"g.cmid\"\n                                :coursectxid=\"value.course.ctxid\"\n                                genericonly><span v-html=\"g.name\"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course-completion',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                course: {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            created(){\n                const self = this;\n                // Get text strings for condition settings\n                let stringkeys = [];\n                for(const key in  this.text){\n                    stringkeys.push({ key: key, component: 'local_treestudyplan'});\n                }\n                get_strings(stringkeys).then(function(strings){\n                    let i = 0;\n                    for(const key in  self.text){\n                        self.text[key] = strings[i];\n                        i++;\n                    }\n                });\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"complete\":\n                            return \"check-circle\";\n                        case \"complete-pass\":\n                            return \"check-circle\";\n                        case \"complete-fail\":\n                            return \"times-circle\";\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                    }\n                },\n\n                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n\n        /************************************\n        *                                  *\n        * Toolbox list components          *\n        *                                  *\n        ************************************/\n        Vue.component('t-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return { badge: {}};},\n                },\n            },\n            data() {\n                return {\n                    txt: strings,\n                    text: strings.item_text,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-badge t-item-filter' v-b-tooltip.hover :title=\"value.badge.name\">\n                <svg class=\"t-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"/>\n                </svg>\n                <a class=\"t-item-config badge\"\n                v-b-modal=\"'t-item-badge-details-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal class=\"\"\n                    :id=\"'t-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            `,\n        });\n\n        Vue.component('t-coursecat-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <ul class=\"t-coursecat-list\">\n                <t-coursecat-list-item\n                    v-for=\"coursecat,idx in value\"\n                    v-model=\"value[idx]\"\n                    :key=\"coursecat.id\"></t-coursecat-list-item>\n            </ul>\n            `,\n        });\n\n        Vue.component('t-coursecat-list-item',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    loading: false,\n\n                };\n            },\n            computed: {\n                showSpinner() {\n                    return this.canLoadMore();\n                },\n                hasDetails() {\n                    return (this.value.haschildren || this.value.hascourses);\n                }\n\n            },\n            methods: {\n                canLoadMore() {\n                    return (this.value.haschildren && (!this.value.children || this.value.children.length == 0)) ||\n                        (this.value.hascourses && (!this.value.courses || this.value.courses.length == 0));\n                },\n                onShowDetails(){\n                    const self = this;\n                    if(this.canLoadMore()) {\n                        call([{\n                            methodname: 'local_treestudyplan_get_category',\n                            args: { \"id\": this.value.id}\n                        }])[0].done(function(response){\n                            self.$emit('input', response);\n                        }).fail(notification.exception);\n                    }\n                }\n            },\n            template: `\n            <li class=\"t-coursecat-list-item\">\n                <span v-if=\"hasDetails\" v-b-toggle=\"'coursecat-'+value.id\">\n                    <i class=\"when-closed fa fa-caret-right\"></i>\n                    <i class=\"when-open fa fa-caret-down\"></i>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if=\"hasDetails\" :id=\"'coursecat-'+value.id\"\n                    @show=\"onShowDetails\" :visible=\"!!(value.children) || !!(value.courses)\">\n                    <b-spinner class=\"ml-4\" v-if=\"showSpinner\" small variant=\"primary\"></b-spinner>\n                    <t-coursecat-list v-if=\"value.children\" v-model=\"value.children\"></t-coursecat-list>\n                    <t-course-list v-if=\"value.courses\" v-model=\"value.courses\"></t-course-list>\n                </b-collapse>\n            </li>\n            `,\n        });\n\n        Vue.component('t-course-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n                makeType(){\n                    return {\n                        item: false,\n                        component: true,\n                        span: 1, //TODO: Detect longer courses and give them an appropriate span\n                        type: 'gradable',\n                    };\n                },\n            },\n            template: `\n            <ul class=\"t-course-list\">\n                <li class=\"t-course-list-item\" v-for=\"course in value\" :key=\"course.id\">\n                    <drag\n                        class=\"draggable-course\"\n                        :data=\"course\"\n                        :type=\"makeType()\"\n                        @cut=\"\"\n                    >\n                    <i class=\"t-course-list-item fa fa-book\"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            `,\n        });\n\n    },\n};\n"],"names":["STUDYPLAN_EDITOR_FIELDS","PERIOD_EDITOR_FIELDS","datechanger_globals","default","defaultchoice","hidewarn","install","Vue","use","TSComponents","mFormComponents","debug","Debugger","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","string_keys","conditions","value","textkey","strings","studyplan_text","studyline_editmode","toolbox_toggle","editmode_modules_hidden","studyline_add","add$core","edit$core","studyline_name","studyline_name_ph","studyline_shortname","studyline_shortname_ph","studyline_color","associations","associated_cohorts","associated_users","studyline_edit","studyplan_name","studyplan_name_ph","studyplan_shortname","studyplan_shortname_ph","studyplan_description","studyplan_description_ph","studyplan_idnumber","studyplan_idnumber_ph","studyplan_slots","studyplan_startdate","studyplan_enddate","studyplan_advanced","advanced_tools","confirm_cancel","confirm_ok","success$core","error$core","advanced_converted","advanced_skipped","advanced_failed","advanced_locked","advanced_multiple","advanced_error","advanced_tools_heading","advanced_warning_title","advanced_warning","advanced_pick_scale","advanced_course_manipulation_title","advanced_force_scale_title","advanced_force_scale_desc","advanced_force_scale_button","advanced_disable_autoenddate_title","advanced_disable_autoenddate_desc","advanced_disable_autoenddate_button","advanced_confirm_header","advanced_force_scale_confirm","advanced_import","advanced_export","advanced_export_csv","advanced_import_from_file","advanced_purge","advanced_purge_expl","advanced_cascade_cohortsync_title","advanced_cascade_cohortsync_desc","advanced_cascade_cohortsync","studyplan_edit","studyplan_add","period_edit","edit","fullname","shortname","startdate","enddate","course_timing","title","desc","question","warning","timing_ok","timing_off","course","period","yes","no","duration","years","year","weeks","week","days","day","rememberchoice","hidewarning","periodspan","periods","periodspan_desc","studyplan_associate","associate_cohorts","associate_users","add_association","delete_association","associations_empty","associations_search","cohorts","users","selected","name","context","item_text","select_conditions","item_configuration","ok","delete","item_delete_message","type_course","type_junction","type_start","type_finish","type_badge","type_invalid","item_course_text","select_grades","coursetiming_past","coursetiming_present","coursetiming_future","grade_include","grade_require","cancel","invalid","error","completion","completion_completed","completion_incomplete","aggregation_all","aggregation_any","aggregation_overall_all","aggregation_overall_any","completion_not_configured","configure_completion","badge","share_badge","dateissued","dateexpire","badgeinfo","component","props","type","Object","data","force_scales","selected_scale","result","text","created","mounted","updated","computed","scales","id","disabled","this","concat","advanced","methods","disable_autoenddate","self","methodname","args","studyplan_id","done","response","$bvModal","msgBoxConfirm","success","msg","fail","notification","exception","force_scales_start","okVariant","okTitle","cancelTitle","then","scale_id","export_plan","format","undefined","includes","content","import_studylines","filename","location","reload","purge_studyline","force","cascade_cohortsync","msgBoxOk","modal_close","template","String","Number","planSaved","updatedplan","info","mode","$emit","moved_from","context_id","moved_to","moved","pages","updatedpage","page","show","config","userfields","key","cohortfields","association","loading","search","associated","showModal","loadAssociations","cohortOptionModel","c","path","join","userOptionModel","u","firstname","lastname","map","searchCohorts","searchtext","like","exclude_id","cohortAssociate","requests","searchselected","i","r","push","cohort_id","cohortDisassociate","associatedselected","searchUsers","userAssociate","user_id","userDisassociate","editdata","Date","getFullYear","editStart","editFinish","refresh","add_day","date","sub_day","create","studyline","toolbox_shown","editmode","color","original","studyplan","description","slots","aggregation","aggregation_config","aggregation_info","useRequiredGrades","useItemCondition","cache","linelayers","studylines","$root","columns","columns_stylerule","s","trashbin_accepts","item","countLineLayers","line","timestamp","maxLayer","ix","courses","layer","filters","slotsempty","Array","isArray","count","movedStudyplan","plan","from","to","addStudyLine","newlineinfo","editLineStart","assign","editLineFinish","editedline","originalline","deleteLine","param","modalresponse","index","indexOf","splice","reorderLines","event","lines","apply","sequence","idx","deletePlan","deleteStudyItem","source","showslot","layeridx","forGradable","list","span","periodEdited","pi","prev","$refs","next","toolbox_switched","pagecreated","layers","layerHeights","$on","onLineHeightChange","lineid","layerid","newheight","main","items","document","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","deletable","editable","onEdit","onDelete","slotindex","resizeListener","ResizeObserver","size","observe","unmounted","disconnect","slotkey","itemidx","itm","listtype","dragacceptlist","courseHoverDummy","hover","current","now","pstart","pend","spanCss","datechanger","coursespan","onDrop","slot","relocateStudyItem","timingChecker","validate_course_period","$nextTick","onCut","iteminfo","onDragEnter","onDragLeave","maxSpan","freeIndex","clist","flist","busy","makeType","checkType","maxspan","hidden","Boolean","endperiod","endperiodnr","Math","min","perioddesc","course_period_matches","first","getTime","last","warn","floor","random","toString","globals","canupdatecourse","defaultvalue","change_course_period","period_id","course_id","timing","change_span","format_duration","dsi","toLocaleLowerCase","dummy","dragLine","dragEventListener","deleteMode","condition_options","showContext","dragStart","start","getElementById","dragelement","position","left","x","top","y","SimpleLine","gravity","end","addEventListener","onMouseMove","dragEnd","remove","removeProperty","removeEventListener","clientX","clientY","from_id","to_id","redrawLines","conn","connections","in","redrawLine","removeLine","out","highlight","setConfig","normalize","updateItem","continuation_id","doShowContext","hasContext","preventDefault","onCreatedConnection","onRemovedConnection","c_in","onRePositioned","onDisPositioned","re_id","onItemDeleted","item_id","onRedrawLines","deleteItem","msgparams","displayname","catch","err","console","hasConnectionsOut","hasConnectionsIn","setTimeout","beforeDestroy","$off","beforeUpdate","useItemConditions","configurationState","hasGrades","hasCompletions","configurationIcon","noenddate","grades","g","cgroup","includeChanged","newValue","required","requiredChanged","updateConditions","selectedgrades","guestmode","stringkeys","completion_icon","completion_tag","txt","showSpinner","canLoadMore","hasDetails","haschildren","hascourses","children","onShowDetails"],"mappings":"y0BAuBMA,wBACN,CAAC,OAAO,YAAY,cAAc,WAAW,aAAc,cAAc,sBAGnEC,qBACN,CAAC,WAAW,YAAY,YAAY,WAI9BC,oBAAsB,CACxBC,SAAS,EACTC,eAAe,EACfC,UAAU,gBAGC,CACXL,wBAAyBA,wBACzBM,QAAQC,KACJA,IAAIC,IAAIC,kCACRF,IAAIC,IAAIE,0BACJC,MAAQ,IAAIC,kBAAS,iCAahBC,UAAUC,eACJA,KAAKC,aAAeD,KAAKE,cAAgBF,KAAKG,iBAAiBC,cAKxEC,aAAe,IAAIZ,QAErBa,aAAc,iCAAgB,CAC9BC,WAAY,CACR,CAAEC,MAAO,MAAOC,QAAS,iBACzB,CAAED,MAAO,MAAOC,QAAS,oBAI7BC,SAAU,8BAAa,CACvBC,eAAgB,CACZC,mBAAoB,qBACpBC,eAAgB,iBAChBC,wBAAwB,0BACxBC,cAAe,gBACfC,SAAU,WACVC,UAAW,YACXC,eAAgB,iBAChBC,kBAAmB,oBACnBC,oBAAqB,sBACrBC,uBAAwB,yBACxBC,gBAAiB,kBACjBC,aAAc,eACdC,mBAAoB,qBACpBC,iBAAkB,mBAClBC,eAAgB,iBAChBC,eAAgB,iBAChBC,kBAAmB,oBACnBC,oBAAqB,sBACrBC,uBAAwB,yBACxBC,sBAAuB,wBACvBC,yBAA0B,2BAC1BC,mBAAoB,qBACpBC,sBAAuB,wBACvBC,gBAAiB,kBACjBC,oBAAqB,sBACrBC,kBAAmB,qBAEvBC,mBAAoB,CAChBC,eAAgB,iBAChBC,eAAgB,iBAChBC,WAAY,aACZC,aAAc,eACdC,WAAY,cACZC,mBAAoB,qBACpBC,iBAAkB,mBAClBC,gBAAiB,kBACjBC,gBAAiB,kBACjBC,kBAAmB,oBACnBC,eAAgB,iBAChBC,uBAAwB,yBACxBC,uBAAwB,yBACxBC,iBAAkB,mBAClBC,oBAAqB,sBACrBC,mCAAoC,qCACpCC,2BAA4B,6BAC5BC,0BAA2B,4BAC3BC,4BAA6B,8BAC7BC,mCAAoC,qCACpCC,kCAAmC,oCACnCC,oCAAqC,sCACrCC,wBAAyB,0BACzBC,6BAA8B,+BAC9BC,gBAAiB,kBACjBC,gBAAiB,kBACjBC,oBAAqB,sBACrBC,0BAA2B,4BAC3BC,eAAgB,iBAChBC,oBAAqB,sBACrBC,kCAAmC,oCACnCC,iCAAkC,mCAClCC,4BAA6B,+BAEjCC,eAAgB,CACZA,eAAgB,iBAChBC,cAAe,iBAEnBC,YAAa,CACTC,KAAM,cACNC,SAAU,iBACVC,UAAW,sBACXC,UAAW,sBACXC,QAAS,qBAEbC,cAAe,CACXC,MAAO,sBACPC,KAAM,qBACNC,SAAU,yBACVC,QAAS,wBACTC,UAAW,mBACXC,WAAY,oBACZC,OAAQ,cACRC,OAAQ,SACRC,IAAK,WACLC,GAAI,UACJC,SAAU,WACVC,MAAO,aACPC,KAAM,YACNC,MAAO,aACPC,KAAM,YACNC,KAAM,YACNC,IAAK,WACLC,eAAgB,+BAChBC,YAAa,4BACbC,WAAY,qBACZC,QAAS,UACTC,gBAAiB,2BAErBC,oBAAqB,CACjBhF,aAAc,eACdC,mBAAoB,qBACpBC,iBAAkB,mBAClB+E,kBAAmB,oBACnBC,gBAAiB,kBACjBC,gBAAiB,kBACjBC,mBAAoB,qBACpBC,mBAAoB,qBACpBC,oBAAqB,sBACrBC,QAAS,UACTC,MAAO,QACPC,SAAU,WACVC,KAAM,OACNC,QAAS,WAEbC,UAAW,CACPC,kBAAmB,oBACnBC,mBAAoB,qBACpBC,GAAI,UACJC,OAAQ,cACRC,oBAAqB,sBACrBC,YAAa,cACbC,cAAe,gBACfC,WAAY,aACZC,YAAa,cACbC,WAAY,aACZC,aAAc,kBAElBC,iBAAkB,CACdX,kBAAmB,oBACnBY,cAAe,gBACfC,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBC,cAAe,gBACfC,cAAe,gBACff,GAAI,UACJgB,OAAQ,cACRf,OAAQ,eAEZgB,QAAS,CACLC,MAAO,SAEXC,WAAY,CACRC,qBAAsB,uBACtBC,sBAAuB,wBACvBC,gBAAiB,kBACjBC,gBAAiB,kBACjBC,wBAAyB,0BACzBC,wBAAyB,0BACzBC,0BAA2B,4BAC3BC,qBAAsB,wBAE1BC,MAAO,CACHC,YAAa,cACbC,WAAY,aACZC,WAAY,aACZC,UAAW,eASnB7J,IAAI8J,UAAU,uBAAwB,CAClCC,MAAO,CACHhJ,MAAO,CACHiJ,KAAMC,OACNrK,QAAO,IAAW,OAG1BsK,KAAI,KACO,CACHC,aAAc,CACVC,eAAgB,KAChBC,OAAQ,IAEZC,KAAMrJ,QAAQ4B,qBAGtB0H,YAEAC,YAEAC,YAGAC,SAAU,CACNC,eACW,CAAC,CACJC,GAAI,KACJC,UAAU,EACVrD,KAAMsD,KAAKR,KAAK1G,sBACjBmH,OAAOD,KAAK/J,MAAMiK,SAASb,aAAaQ,UAGnDM,QAAS,CACLC,4BACUC,KAAKL,oBACN,CAAC,CACFM,WAAY,0CACZC,KAAM,CACFC,aAAcR,KAAK/J,MAAM6J,OAE7B,GAAGW,MAAK,SAASC,UACjBL,KAAKM,SAASC,eAAeF,SAASG,QAAQR,KAAKb,KAAKrH,aAAakI,KAAKb,KAAKpH,YACxE,KAAOsI,SAASI,QACxBC,KAAKC,sBAAaC,YAEzBC,2BAEUb,KAAKL,UACNW,SAASC,cAAcZ,KAAKR,KAAKjG,6BAA6B,CAC/DmB,MAAOsF,KAAKR,KAAKjG,6BACjB4H,UAAW,SACXC,QAASpB,KAAKR,KAAKtH,WACnBmJ,YAAarB,KAAKR,KAAKvH,iBACxBqJ,MAAMrL,QACO,GAATA,sBACM,CAAC,CACFqK,WAAY,4CACZC,KAAM,CACFC,aAAcR,KAAK/J,MAAM6J,GACzByB,SAAUvB,KAAKX,aAAaC,mBAEhC,GAAGmB,MAAK,SAASC,UACjBL,KAAKhB,aAAaE,OAASmB,YAC5BK,KAAKC,sBAAaC,eAIjCO,YAAYC,cACFpB,KAAOL,KACA0B,MAAVD,QAAwB,CAAC,OAAO,OAAOE,SAASF,UAC/CA,OAAS,uBAER,CAAC,CACEnB,WAAY,kCACZC,KAAM,CACFC,aAAcR,KAAK/J,MAAM6J,GACzB2B,OAAQA,WAEZ,GAAGhB,MAAK,SAASC,mCAERL,KAAKpK,MAAMqE,UAAU,IAAImH,OAAOf,SAASkB,QAAQlB,SAASe,WACpEV,KAAKC,sBAAaC,YAE7BY,4CAEW,CAACC,SAASF,0BACR,CAAC,CACFtB,WAAY,wCACZC,KAAM,CACFC,aAAeR,KAAK/J,MAAM6J,GAC1B8B,QAASA,QACTH,OAAQ,uBAEZ,GAAGhB,MAAK,SAASC,UACdA,SAASG,QACRkB,SAASC,SAET1M,MAAM2I,MAAM,kBAAkByC,SAASI,QAG5CC,KAAKC,sBAAaC,aACtB,qBAEPgB,iCACS,CAAC,CACF3B,WAAY,uCACZC,KAAM,CACFT,GAAKE,KAAK/J,MAAM6J,GAChBoC,OAAO,MAEX,GAAGzB,MAAK,SAASC,UACdA,SAASG,QACRkB,SAASC,SAET1M,MAAM2I,MAAM,0BAA0ByC,SAASI,QAGpDC,KAAKC,sBAAaC,YAEzBkB,2BACU9B,KAAOL,oBACR,CAAC,CACFM,WAAY,yCACZC,KAAM,CACFC,aAAeR,KAAK/J,MAAM6J,OAE9B,GAAGW,MAAK,SAASC,UACjBL,KAAKM,SAASyB,SAAS1B,SAASG,QAAQR,KAAKb,KAAKrH,aAAakI,KAAKb,KAAKpH,WACrE,CAAEsC,MAAO2F,KAAKb,KAAKxF,iCACxB+G,KAAKC,sBAAaC,YAEzBoB,mBACShD,aAAaE,OAAS,KAGnC+C,SACC,knMAmHLpN,IAAI8J,UAAU,mBAAoB,CAC9BC,MAAO,OACM,CACLC,KAAMC,OACNrK,QAAO,IAAW,WAEd,CACJoK,KAAMqD,OACNzN,QAAO,IAAY,aAEf,CACJoK,KAAMqD,OACNzN,QAAO,IAAY,gBAEX,CACRoK,KAAMqD,OACNzN,QAAO,IAAY,cAEV,CACToK,KAAMsD,OACN1N,QAAS,IAGjBsK,KAAI,KACO,CACHI,KAAMrJ,QAAQ8D,iBAGtB2F,SAAU,GAEVO,QAAS,CACLsC,UAAUC,mBACArC,KAAOL,QACb1K,MAAMqN,KAAK,oBAAoBD,aAEf,UAAbrC,KAAKuC,KAEJvC,KAAKwC,MAAM,UAAUH,iBAEpB,OAEKI,WAAazC,KAAKpK,MAAM8M,WACxBC,SAAWN,YAAYK,WACvBE,MAASH,YAAcE,SAE1BN,YAAYQ,MAAM,GAAGpH,SAAWuE,KAAKpK,MAAMiN,MAAM,GAAGpH,uBAE9C,CAAC,CACFwE,WAAY,wCACZC,KAAM,CAAET,GAAIO,KAAKpK,MAAM6J,OACvB,GAAGW,MAAK,SAASC,UACjBL,KAAKpK,OAAQ,wCAAiByK,UAAS,GACvCpL,MAAMqN,KAAK,uBACXtC,KAAKwC,MAAM,QAAQxC,KAAKpK,UACzB8K,MAAK,SAAS9C,6BACAgD,UAAUhD,2CAInBoC,KAAKpK,MAAMyM,YAAY/N,yBAC/B0L,KAAKwC,MAAM,QAAQxC,KAAKpK,OACrBgN,OACC5C,KAAKwC,MAAM,QAAQxC,KAAKpK,MAAO6M,WAAYE,cAO/DV,SACC,ghBAiBLpN,IAAI8J,UAAU,wBAAyB,CACnCC,MAAO,OACM,CACLC,KAAMC,OACNrK,QAAO,IAAW,WAEd,CACJoK,KAAMqD,OACNzN,QAAO,IAAY,aAEf,CACJoK,KAAMqD,OACNzN,QAAO,IAAY,gBAEX,CACRoK,KAAMqD,OACNzN,QAAO,IAAY,cAEV,CACToK,KAAMC,SAGdC,KAAI,KACO,CACHI,KAAMrJ,QAAQ8D,iBAGtB2F,SAAU,GAEVO,QAAS,CACLsC,UAAUU,mBACA9C,KAAOL,QACb1K,MAAMqN,KAAK,oBAAoBQ,aAEf,UAAb9C,KAAKuC,KAEJvC,KAAKwC,MAAM,UAAUM,iBAEpB,OACKC,MAAO,4CAAqBD,aAClC7N,MAAMqN,KAAK,4BACXtC,KAAKwC,MAAM,QAAQO,SAK/Bd,SACC,0hBAkBLpN,IAAI8J,UAAU,wBAAyB,CACnCC,MAAO,CAAC,SACRG,KAAI,KACO,CACHiE,MAAM,EACNC,OAAQ,CACJC,WAAY,CACR,CAAEC,IAAK,YACP,CAAEA,IAAK,sBAAyB,GAChC,CAAEA,IAAK,qBAAwB,IAEnCC,aAAa,CACT,CAAED,IAAK,YACP,CAAEA,IAAK,iBAAoB,GAC3B,CAAEA,IAAK,oBAAuB,KAGtCE,YAAa,CACTnH,QAAS,GACTC,MAAO,IAEXmH,QAAS,CACLpH,SAAS,EACTC,OAAO,GAEXoH,OAAQ,CAACpH,MAAO,GAAID,QAAQ,IAC5BE,SAAU,CACLmH,OAAQ,CAACpH,MAAO,GAAKD,QAAQ,IAC7BsH,WAAY,CAACrH,MAAO,GAAKD,QAAQ,KAEtCiD,KAAMrJ,QAAQ6F,sBAGtByD,YAGAC,YAEAC,YAGAQ,QAAS,CACL2D,iBACST,MAAO,OACPU,oBAETC,kBAAkBC,IACP,CACHhO,MAAOgO,EAAEnE,GACTN,KAAMyE,EAAEvH,KAAO,KAAOuH,EAAEtH,QAAQuH,KAAKC,KAAK,OAAS,MAG3DC,gBAAgBC,IACL,CACHpO,MAAOoO,EAAEvE,GACTN,KAAM6E,EAAEC,UAAY,IAAMD,EAAEE,WAGpCR,yBACU1D,KAAOL,KACbK,KAAKsD,QAAQpH,SAAU,EACvB8D,KAAKsD,QAAQnH,OAAQ,iBAChB,CAAC,CACF8D,WAAY,uCACZC,KAAM,CAAEC,aAAcH,KAAKpK,MAAM6J,OACjC,GAAGW,MAAK,SAASC,UACjBL,KAAKqD,YAAYlH,MAAQkE,SAAS8D,IAAInE,KAAK+D,iBAC3C/D,KAAKsD,QAAQnH,OAAQ,KACtBuE,KAAKC,sBAAaC,0BAEhB,CAAC,CACFX,WAAY,yCACZC,KAAM,CAAEC,aAAcH,KAAKpK,MAAM6J,OACjC,GAAGW,MAAK,SAASC,UACjBL,KAAKqD,YAAYnH,QAAUmE,SAAS8D,IAAInE,KAAK2D,mBAC7C3D,KAAKsD,QAAQpH,SAAU,KACxBwE,KAAKC,sBAAaC,YAEzBwD,cAAcC,kBACJrE,KAAOL,KAEV0E,WAAW7O,OAAS,iBAEd,CAAC,CACFyK,WAAY,kCACZC,KAAM,CAAEoE,KAAMD,WAAYE,WAAYvE,KAAKpK,MAAM6J,OACjD,GAAGW,MAAK,SAASC,UACjBL,KAAKuD,OAAOrH,QAAUmE,SAAS8D,IAAInE,KAAK2D,sBACzCjD,KAAKC,sBAAaC,WAGrBZ,KAAKuD,OAAOrH,QAAU,IAG9BsI,wBACUxE,KAAOL,SACT8E,SAAW,SACTjB,WAAaxD,KAAKqD,YAAYnH,QAC9BqH,OAASvD,KAAKuD,OAAOrH,QACrBwI,eAAiB1E,KAAK5D,SAASmH,OAAOrH,YACxC,MAAMyI,KAAKD,eAAe,OACpBE,EAAIF,eAAeC,GACzBF,SAASI,KAAK,CACV5E,WAAY,qCACZC,KAAM,CAACC,aAAcH,KAAKpK,MAAM6J,GAAIqF,UAAWF,GAC/ClE,KAAMC,sBAAaC,UACnBR,KAAM,SAASC,UACRA,SAASG,+CACMgD,WAAWD,OAAOqB,qBAK3CH,WAETM,2BACU/E,KAAOL,SACT8E,SAAW,SACTO,mBAAqBhF,KAAK5D,SAASoH,WAAWtH,QAC9CsH,WAAaxD,KAAKqD,YAAYnH,QAC9BqH,OAAUvD,KAAKuD,OAAOrH,YACxB,MAAMyI,KAAKK,mBAAmB,OACxBJ,EAAII,mBAAmBL,GAC7BF,SAASI,KAAK,CACV5E,WAAY,wCACZC,KAAM,CAACC,aAAcH,KAAKpK,MAAM6J,GAAIqF,UAAWF,GAC/ClE,KAAMC,sBAAaC,UACnBR,KAAM,SAASC,UACRA,SAASG,+CACM+C,OAAOC,WAAWoB,qBAK3CH,WAETQ,YAAYZ,kBACFrE,KAAOL,KACV0E,WAAW7O,OAAS,iBAEd,CAAC,CACFyK,WAAY,gCACZC,KAAM,CAAEoE,KAAMD,WAAYE,WAAYvE,KAAKpK,MAAM6J,OACjD,GAAGW,MAAK,SAASC,UACjBL,KAAKuD,OAAOpH,MAAQkE,SAAS8D,IAAInE,KAAK+D,oBACvCrD,KAAKC,sBAAaC,WAGrBZ,KAAKuD,OAAOpH,MAAQ,IAG5B+I,sBACUlF,KAAOL,SACT8E,SAAW,SACTjB,WAAaxD,KAAKqD,YAAYlH,MAC9BoH,OAAUvD,KAAKuD,OAAOpH,MACtBuI,eAAkB1E,KAAK5D,SAASmH,OAAOpH,UACzC,MAAMwI,KAAKD,eAAe,OACpBE,EAAIF,eAAeC,GAEzBF,SAASI,KAAK,CACV5E,WAAY,mCACZC,KAAM,CAACC,aAAcH,KAAKpK,MAAM6J,GAAI0F,QAASP,GAC7ClE,KAAMC,sBAAaC,UACnBR,KAAM,SAASC,UACRA,SAASG,+CACMgD,WAAWD,OAAOqB,qBAK3CH,WAETW,yBACUpF,KAAOL,SACT8E,SAAW,SACTjB,WAAaxD,KAAKqD,YAAYlH,MAC9B6I,mBAAqBhF,KAAK5D,SAASoH,WAAWrH,MAC9CoH,OAASvD,KAAKuD,OAAOpH,UACvB,MAAMwI,KAAKK,mBAAmB,OACxBJ,EAAII,mBAAmBL,GAE7BF,SAASI,KAAK,CACV5E,WAAY,sCACZC,KAAM,CAACC,aAAcH,KAAKpK,MAAM6J,GAAI0F,QAASP,GAC7ClE,KAAMC,sBAAaC,UACnBR,KAAM,SAASC,UACRA,SAASG,+CACM+C,OAAOC,WAAWoB,qBAK3CH,YAIbxC,SACX,uqJAiHOpN,IAAI8J,UAAU,gBAAiB,CAC3BC,MAAO,OACM,CACLC,KAAMC,OACNrK,QAAO,IAAW,WAEd,CACJoK,KAAMqD,OACNzN,QAAO,IAAY,gBAEX,CACRoK,KAAMqD,OACNzN,QAAO,IAAY,aAEV,CACToK,KAAMqD,OACNzN,QAAO,IAAY,aAEZ,CACPoK,KAAMqD,OACNzN,QAAO,IAAY,OAG3BsK,KAAI,KACO,CACHiE,MAAM,EACNqC,SAAU,CACNrL,SAAU,GACVC,UAAW,GACXC,WAAY,IAAIoL,MAAQC,cAAgB,SACxCpL,SAAY,IAAImL,MAAQC,cAAc,EAAK,UAE/CpG,KAAMrJ,QAAQgE,cAGtBsF,YAEAC,YAEAC,YAGAC,SAAU,GAEVO,QAAS,CACL0F,4CACY7F,KAAK0F,SAAS1F,KAAK/J,MAAMrB,2BAC5ByO,MAAO,GAEhByC,mBACUzF,KAAOL,SACTO,KAAO,IAAQP,KAAK/J,MAAM6J,oCAEtBS,KAAKP,KAAK0F,SAAS9Q,qCAEtB,CAAC,CACF0L,WAAY,kCACZC,KAAMA,QACN,GAAGE,MAAK,SAASC,0CACTL,KAAKpK,MAAMyK,SAAS9L,sBAC5ByL,KAAKwC,MAAM,QAAQxC,KAAKpK,OACxBoK,KAAKwC,MAAM,SAASxC,KAAKpK,UAC1B8K,KAAKC,sBAAaC,YAEzB8E,gBACU1F,KAAOL,oBACR,CAAC,CACFM,WAAY,iCACZC,KAAM,IAAQP,KAAK/J,MAAM6J,OACzB,GAAGW,MAAK,SAASC,0CACTL,KAAKpK,MAAMyK,SAAS9L,sBAC5ByL,KAAKwC,MAAM,QAAQxC,KAAKpK,UACzB8K,KAAKC,sBAAaC,YAEzB+E,QAAO,CAACC,KAAKxK,aACIiG,IAATjG,OACAA,KAAO,IAEJ,wBAASwK,KAAKxK,OAEzByK,QAAO,CAACD,KAAKxK,aACIiG,IAATjG,OACAA,KAAO,IAEJ,wBAASwK,KAAK,EAAIxK,QAIjC6G,SACC,+0FA+DLpN,IAAI8J,UAAU,cAAe,CACzBC,MAAO,CAAE,QAAS,SAClBG,KAAI,KACO,CACHkE,OAAQ,CACJC,WAAY,CACR,CAAEC,IAAK,YACP,CAAEA,IAAK,sBAAyB,GAChC,CAAEA,IAAK,qBAAwB,IAEnCC,aAAa,CACT,CAAED,IAAK,YACP,CAAEA,IAAK,iBAAoB,GAC3B,CAAEA,IAAK,oBAAuB,KAGtC2C,OAAQ,CACJC,UAAW,MACC,aACK,SACJ,WAEbhD,KAAM,KACK,OACE,aACK,KAGtBhJ,KAAM,CACFiM,eAAe,EACfD,UAAW,CACPE,UAAU,EACVlH,KAAM,CACF1C,KAAM,GACNpC,UAAW,GACXiM,MAAO,WAEXC,SAAU,IAEdC,UAAW,CACPrH,KAAM,CACF1C,KAAM,GACNpC,UAAW,GACXoM,YAAa,GACbC,MAAQ,EACRpM,UAAW,aACXC,QAAS,GACToM,YAAa,GACbC,mBAAoB,GACpBC,iBAAkB,CACdC,mBAAmB,EACnBC,kBAAkB,IAI1BR,SAAU,KAGlBhH,KAAMrJ,QAAQC,eACd6Q,MAAO,CACHC,WAAY,MAIxBzH,YAGAC,UACgD,GAAzCM,KAAK/J,MAAMiN,MAAM,GAAGiE,WAAWtR,cAEzBuE,KAAKgM,UAAUE,UAAW,QAE9Bc,MAAMvE,MAAM,gBAErBlD,eACSyH,MAAMvE,MAAM,eACjB/M,aAAa+M,MAAM,gBAEvBjD,SAAU,GAGVO,QAAS,CACLkH,QAAQjE,MACG,EAAmB,EAAfA,KAAKtH,QAEpBwL,kBAAkBlE,UAEVmE,EAAI,2DACJ,IAAIvC,EAAE,EAAGA,EAAE5B,KAAKtH,QAAQkJ,IACxBuC,GAAI,sEAEDA,EAAE,KAEbC,iBAAiBtI,QACVA,KAAKuI,KAMZC,gBAAgBC,KAAKvE,SAGbpD,KAAKiH,MAAMC,WAAWS,KAAK7H,KACtB,IAAI6F,KAAU3F,KAAKiH,MAAMC,WAAWS,KAAK7H,IAAI8H,UAAY,WAEvD5H,KAAKiH,MAAMC,WAAWS,KAAK7H,IAAI7J,MAG1C,KACQ4R,UAAY,MACZ,IAAI7C,EAAI,EAAGA,GAAK5B,KAAKtH,QAASkJ,OAC3B2C,KAAKhB,MAAM3B,GAAG,CACA2C,KAAKhB,MAAM3B,OAEpB,MAAM8C,MAAMH,KAAKhB,MAAM3B,GAAG+C,QAAQ,OAC5BN,KAAOE,KAAKhB,MAAM3B,GAAG+C,QAAQD,IAChCL,KAAKO,MAAQH,WACZA,SAAWJ,KAAKO,WAGpB,MAAMF,MAAMH,KAAKhB,MAAM3B,GAAGiD,QAAQ,OAC5BR,KAAOE,KAAKhB,MAAM3B,GAAGiD,QAAQH,IAChCL,KAAKO,MAAQH,WACZA,SAAWJ,KAAKO,oBAM3Bf,MAAMC,WAAWS,KAAK7H,IAAM,CAC7B7J,MAAQ4R,SAAW,EACnBD,UAAY,IAAIjC,MAEbkC,SAAS,IAGxBK,WAAWvB,UACJwB,MAAMC,QAAQzB,OAAO,KAChB0B,MAAQ,MACR,IAAIrD,EAAI,EAAGA,EAAI2B,MAAM9Q,OAAQmP,IAC1BmD,MAAMC,QAAQzB,MAAM3B,GAAG+C,WACtBM,OAAS1B,MAAM3B,GAAG+C,QAAQlS,QAE3BsS,MAAMC,QAAQzB,MAAM3B,GAAGiD,WACtBI,OAAS1B,MAAM3B,GAAGiD,QAAQpS,eAGjB,GAATwS,aAED,GAGfC,eAAeC,KAAKC,KAAKC,SAChB5F,MAAM,QAAQ0F,KAAKC,KAAKC,KAEjCC,aAAatF,KAAKuF,4BACT,CAAC,CACFrI,WAAY,oCACZC,KAAM,SACS6C,KAAKtD,QACR6I,YAAYjM,eACPiM,YAAYrO,gBAChBqO,YAAYpC,eACTnD,KAAK+D,WAAWtR,WAEhC,GAAG4K,MAAK,SAASC,UACjB0C,KAAK+D,WAAWjC,KAAKxE,UACrBiI,YAAYjM,KAAO,GACnBiM,YAAYrO,UAAY,GACxBqO,YAAYpC,MAAQ,aACrBxF,KAAKC,sBAAaC,YAEzB2H,cAAcjB,MACVxI,OAAO0J,OAAO7I,KAAK5F,KAAKgM,UAAUhH,KAAKuI,WAClCvN,KAAKgM,UAAUI,SAAWmB,UAC1BhH,SAAS0C,KAAK,wBAAwBrD,KAAK/J,MAAM6J,KAE1DgJ,qBACQC,WAAa/I,KAAK5F,KAAKgM,UAAUhH,KACjC4J,aAAehJ,KAAK5F,KAAKgM,UAAUI,wBAClC,CAAC,CACFlG,WAAY,qCACZC,KAAM,IAAQwI,WAAWjJ,QACTiJ,WAAWrM,eACNqM,WAAWzO,gBACfyO,WAAWxC,UAC5B,GAAG9F,MAAK,SAASC,UACjBsI,aAAY,KAAWtI,SAAQ,KAC/BsI,aAAY,UAAgBtI,SAAQ,UACpCsI,aAAY,MAAYtI,SAAQ,SACjCK,KAAKC,sBAAaC,YAEzBgI,WAAW7F,KAAKuE,YACNtH,KAAKL,0BACC,CACJ,CAACwD,IAAK,2BAA4B0F,MAAOvB,KAAKjL,KAAMsC,UAAW,uBAC/D,CAACwE,IAAK,SAAUxE,UAAW,UAC5BsC,MAAK,SAASiG,GACjBlH,KAAKM,SAASC,cAAc2G,EAAE,GAAI,CAC9BnG,QAASmG,EAAE,GACXpG,UAAW,WACZG,MAAK,SAAS6H,eACVA,8BACM,CAAC,CACF7I,WAAY,uCACZC,KAAM,IAAQoH,KAAK7H,OACnB,GAAGW,MAAK,SAASC,aACM,GAApBA,SAASG,QAAgB,KACpBuI,MAAQhG,KAAK+D,WAAWkC,QAAQ1B,MACpCvE,KAAK+D,WAAWmC,OAAOF,MAAO,OAEnCrI,KAAKC,sBAAaC,kBAKrCsI,aAAaC,MAAMC,OAGfD,MAAME,MAAMD,WAERE,SAAW,OACX,IAAIC,OAAOH,MAEXE,SAASzE,KAAK,IAAOuE,MAAMG,KAAK9J,YAAe8J,qBAE9C,CAAC,CACFtJ,WAAY,yCACZC,KAAM,UAAcoJ,aACpB,GAAGlJ,MAAK,SAASC,cAClBK,KAAKC,sBAAaC,YAEzB4I,WAAWpD,iBACDpG,KAAKL,0BACC,CACR,CAACwD,IAAK,2BAA4B0F,MAAOzC,UAAU/J,KAAMsC,UAAW,uBACpE,CAACwE,IAAK,SAAUxE,UAAW,UAC5BsC,MAAK,SAASiG,GACblH,KAAKM,SAASC,cAAc2G,EAAE,GAAI,CAC9BnG,QAASmG,EAAE,GACXpG,UAAW,WACZG,MAAK,SAAS6H,eACVA,8BACM,CAAC,CACF7I,WAAY,uCACZC,KAAM,IAAQkG,UAAU3G,GAAIoC,OAAO,MACnC,GAAGzB,MAAK,SAASC,UACM,GAApBA,SAASG,SACRR,KAAK+G,MAAMvE,MAAM,mBAAmB4D,cAEzC1F,KAAKC,sBAAaC,kBAKrC6I,gBAAgBN,WAER/B,KAAO+B,MAAMpK,oBAEZ,CAAC,CACFkB,WAAY,uCACZC,KAAM,IAAQkH,KAAK3H,OACnB,GAAGW,MAAK,SAASC,UACM,GAApBA,SAASG,SACR2I,MAAMO,OAAOlH,MAAM,MAAM2G,UAE9BzI,KAAKC,sBAAaC,YAGzB+I,SAAS5G,KAAKuE,KAAKyB,MAAOa,SAAU/K,YAG1BgL,YAAuB,YAARhL,KACfpD,QAAUsH,KAAKtH,YACjBuH,MAAO,MACP,IAAI2B,EAAI,EAAGA,EAAIlJ,QAASkJ,OACrB2C,KAAKhB,MAAMyC,MAAMpE,IAAM2C,KAAKhB,MAAMyC,MAAMpE,GAAG+C,QAAQ,OAC5CoC,KAAOxC,KAAKhB,MAAMyC,MAAMpE,GAAG+C,YAC7B,MAAMD,MAAMqC,KAAK,OACX1C,KAAO0C,KAAKrC,IACfL,KAAKO,OAASiC,WACVC,YACIlF,EAAI,GAAMyC,KAAK2C,KAAOpF,EAAK,IAC1B3B,MAAO,GAGPoE,KAAK2C,KAAOpF,EAAM,IAClB3B,MAAO,YAQxBA,MAEXgH,aAAaC,UACHC,KAAOvK,KAAKwK,MAAM,iBAAmBF,GAAGrP,OAAS,IAAI,GACxDsP,MACCA,KAAKxE,gBAEH0E,KAAOzK,KAAKwK,MAAM,iBAAmBF,GAAGrP,OAAS,IAAI,GACxDwP,MACCA,KAAK1E,WAGbC,QAAO,CAACC,KAAKxK,aACIiG,IAATjG,OACAA,KAAO,IAEJ,wBAASwK,KAAKxK,OAEzByK,QAAO,CAACD,KAAKxK,aACIiG,IAATjG,OACAA,KAAO,IAEJ,wBAASwK,KAAK,EAAIxK,OAE7BiP,iBAAiBlB,YACR3G,MAAM,gBAAgB2G,QAE/BmB,YAAYvH,WACHnN,MAAMiN,MAAMgC,KAAK9B,QAI9Bd,SACC,slfA4PNpN,IAAI8J,UAAU,sBAAuB,CAChCC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,KAEhC8V,OAAQ,CACJ1L,KAAMsD,OACN1N,QAAS,IAGjBsK,KAAI,KACO,CACHyL,aAAc,KAGtBpL,UAGI3J,aAAagV,IAAI,mBAAoB9K,KAAK+K,qBAE9CnL,SAAU,GAGVO,QAAS,CACL4K,mBAAmBC,OAAOC,QAAQC,cAI3BlL,KAAKwK,MAAMW,MAAQH,QAAUhL,KAAK/J,MAAM6J,GAAG,OACpCsL,MAAQC,SAASC,iBAClB,uCAAsCtL,KAAK/J,MAAM6J,YAGlDyL,UAAY,EAChBH,MAAMI,SAASC,WAGLC,OADID,GAAGE,wBACID,OACjBH,WAAaG,MAAb,UAGEE,YAAa,GAAEL,mBAChBf,MAAMW,KAAKU,MAAMH,OAASE,eAI3CtJ,SAAW,6aAcfpN,IAAI8J,UAAU,mBAAoB,CAC9BC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,IAGXQ,SAAU,CACNkM,kBAEUnF,MAAQ3G,KAAK/J,MAAM0Q,SACtBwB,MAAMC,QAAQzB,OAAO,KAChB0B,MAAQ,MACR,IAAIrD,EAAI,EAAGA,EAAI2B,MAAM9Q,OAAQmP,IAC1BmD,MAAMC,QAAQzB,MAAM3B,GAAG+C,WACtBM,OAAS1B,MAAM3B,GAAG+C,QAAQlS,QAE3BsS,MAAMC,QAAQzB,MAAM3B,GAAGiD,WACtBI,OAAS1B,MAAM3B,GAAGiD,QAAQpS,eAGjB,GAATwS,aAED,GAGf0D,SAAQ,KACG,GAGf5L,QAAS,CACL6L,cACSnJ,MAAM,OAAO7C,KAAK/J,QAE3BgW,gBACSpJ,MAAM,SAAS7C,KAAK/J,SAIjCqM,SAAW,6oCA+BfpN,IAAI8J,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,KAAO,CACHA,KAAMqD,OACNzN,QAAS,YAEboX,UAAY,CACRhN,KAAMsD,OACN1N,QAAS,IAEb6S,KAAO,CACHzI,KAAMC,OACNrK,QAAO,IAAW,MAEtBkT,MAAQ,CACJ9I,KAAMsD,QAEVvM,MAAO,CACHiJ,KAAMiJ,MACNrT,QAAO,IAAW,IAEtByT,KAAM,CACFrJ,KAAMC,OACNrK,QAAO,IAAW,MAEtBsO,KAAM,CACFlE,KAAMC,OACNrK,QAAO,IAAW,MAEtBmG,OAAQ,CACJiE,KAAMC,OACNrK,QAAO,IAAW,OAG1B4K,gBACUW,KAAKL,KACK,YAAbK,KAAKnB,MAAwC,GAAlBmB,KAAK6L,YAC/B7L,KAAK8L,eAAiB,IAAIC,gBAAe,QAClC/L,KAAKmK,MAAMW,KAAK,OACTkB,KAAOhM,KAAKmK,MAAMW,KAAKQ,wBAE7B7V,aAAa+M,MAAM,mBAAoBxC,KAAKsH,KAAK7H,GAAIO,KAAK2H,MAAOqE,KAAKX,YAE3EY,QAAQjM,KAAKmK,MAAMW,QAG9BoB,YACOvM,KAAKmM,qBACCA,eAAeK,cAG5B5M,SAAU,CACN6M,gBACY,GAAEzM,KAAKd,UAAUc,KAAK2H,KAAK7H,MAAME,KAAKkM,aAAalM,KAAKgI,SAEpE0E,cACQ,MAAM5E,MAAM9H,KAAK/J,MAAM,IACX+J,KAAK/J,MAAM6R,IAChBE,OAAShI,KAAKgI,aACVF,UAGR,MAEXL,WACQ,MAAMK,MAAM9H,KAAK/J,MAAM,OACjB0W,IAAM3M,KAAK/J,MAAM6R,OACpB6E,IAAI3E,OAAShI,KAAKgI,aACV2E,WAGR,MAEXC,kBACW5M,KAAKd,MAEhB2N,uBACoB,YAAb7M,KAAKd,KACG,CAAC,SAAU,iBAEX,CAAC,SAAU,gBAG1B4N,yBACW,CAAC9R,OAAQgF,KAAK+M,MAAM/N,YAE/BgO,aACQhN,KAAK/E,QAAU+E,KAAK/E,OAAOV,WAAayF,KAAK/E,OAAOT,QAAQ,OACtDyS,IAAM,IAAItH,KACVuH,OAAS,IAAIvH,KAAK3F,KAAK/E,OAAOV,WAC9B4S,KAAO,IAAIxH,KAAK3F,KAAK/E,OAAOT,gBAC1ByS,KAAOC,QAAUD,IAAME,YAGxB,GAGfC,aACOpN,KAAKyH,MAAQzH,KAAKyH,KAAK2C,KAAO,EAAE,OAEvB,kCADM,EAAIpK,KAAKyH,KAAK2C,KAAQ,WAG7B,KAInBhL,KAAI,KACO,CACHI,KAAMrJ,QAAQsE,cACd0R,eAAgB,KAChBY,MAAO,CACH/N,UAAU,KACVE,KAAM,MAEVmO,YAAa,CACTC,WAAY,KACZzR,WAAY,KACZ/G,SAAS,EACTC,eAAe,EACfC,UAAU,KAItBmL,QAAS,CACLoN,OAAO/D,YACEuD,MAAM/N,UAAY,UAClB+N,MAAM7N,KAAO,KAClB5J,MAAMqN,KAAK6G,aACLnJ,KAAOL,QACVwJ,MAAMtK,KAAKuI,KAAM,KACZA,KAAO+B,MAAMpK,KAIjBqI,KAAKO,MAAQhI,KAAKgI,MAClBP,KAAK+F,KAAOxN,KAAKkM,UACjB7L,KAAKpK,MAAMiP,KAAKuC,MAChBpH,KAAKwC,MAAM,QAAQxC,KAAKpK,OAKxBoK,KAAKoN,kBAAkBhG,MAAMhH,MAAK,KAC3BT,KAAKwK,MAAMkD,oBACLlD,MAAMkD,cAAcC,iCAI7BnE,MAAMtK,KAAKF,YACf1J,MAAMqN,KAAK,wBACW,YAAnB6G,MAAMtK,KAAKA,oBACL,CAAC,CACFoB,WAAY,oCACZC,KAAM,SACSF,KAAKsH,KAAK7H,QACZO,KAAK6L,gBACJ7L,KAAK2H,WACP,iBACG,eACU,gBACJ,aACDwB,MAAMpK,KAAKU,YACZ,qBACO,UAG1B,GAAGW,MAAMC,eACL+G,KAAO/G,SACXL,KAAKoN,kBAAkBhG,MAAMhH,MAAK,KAC9BJ,KAAKpK,MAAMiP,KAAKuC,MAChBpH,KAAKwC,MAAM,QAAQxC,KAAKpK,YAInB2X,WAAU,KACR5N,KAAKwK,MAAMkD,oBACLlD,MAAMkD,cAAcC,kCAItC5M,KAAKC,sBAAaC,WAEG,UAAnBuI,MAAMtK,KAAKA,OAChB5J,MAAMqN,KAAK,8CACN,CAAC,CACFrC,WAAY,oCACZC,KAAM,SACSF,KAAKsH,KAAK7H,QACZO,KAAK6L,eACN1C,MAAMpK,KAAKF,aACT,UACMsK,MAAMpK,KAAKT,MAAM6K,MAAMpK,KAAKT,MAAMmB,QAAG4B,OAGzD,GAAGjB,MAAMC,eACL+G,KAAO/G,SACXL,KAAKoN,kBAAkBhG,MAAMhH,MAAK,KAC9BgH,KAAKO,MAAQhI,KAAKgI,MAClB3H,KAAKpK,MAAMiP,KAAKuC,MAChBpH,KAAKwC,MAAM,QAAQxC,KAAKpK,aAE7B8K,KAAKC,sBAAaC,cAIjC4M,MAAMrE,aACInJ,KAAKL,SACPF,GAAK0J,MAAMpK,KAAKU,OAChB,IAAIkF,EAAI,EAAGA,EAAI3E,KAAKpK,MAAMJ,OAAQmP,OAC/B3E,KAAKpK,MAAM+O,GAAGlF,IAAMA,GAAG,CACtBO,KAAKpK,MAAMqT,OAAOtE,EAAG,GAAIA,eAK5BnC,MAAM,QAAQ7C,KAAK/J,QAE5BwX,kBAAkBhG,YACRqG,SAAW,IAAOrG,KAAK3H,SAAaE,KAAKgI,WAAehI,KAAKkM,kBAAsBlM,KAAK2H,KAAK7H,WAC5F,cAAK,CAAC,CACTQ,WAAY,yCACZC,KAAM,OAAW,CAACuN,cAClB,GAAG/M,KAAKC,sBAAaC,YAE7B8M,YAAYvE,YACHuD,MAAM/N,UAAYwK,MAAMpK,UACxB2N,MAAM7N,KAAOsK,MAAMtK,MAE5B8O,mBACSjB,MAAM/N,UAAY,UAClB+N,MAAM7N,KAAO,MAEtB+O,cAMQC,UAAYlO,KAAKkM,cAEjB,IAAIlH,EAAIhF,KAAKkM,UAAY,EAAGlH,GAAKhF,KAAKoD,KAAKtH,UACxCkE,KAAK2H,KAAKhB,OAAS3G,KAAK2H,KAAKhB,MAAM3B,IAAMhF,KAAK2H,KAAKhB,MAAM3B,GAAG+C,SADX/C,IACmB,OAC7DmJ,MAAQnO,KAAK2H,KAAKhB,MAAM3B,GAAG+C,QAC3BqG,MAAQpO,KAAK2H,KAAKhB,MAAM3B,EAAE,GAAGiD,YAC/BoG,MAAO,MACP,MAAMvG,MAAMqG,SACRA,MAAMrG,IAAIE,OAAShI,KAAKgI,MAAO,CAC/BqG,MAAO,YAIX,MAAMvG,MAAMsG,SACRA,MAAMtG,IAAIE,OAAShI,KAAKgI,MAAO,CAC/BqG,MAAO,WAKVA,WAEDH,UAAYlJ,SAUjBkJ,UAAYlO,KAAKkM,UAAY,GAGxCoC,SAAS7G,YACE,CACHA,MAAM,EACNzI,WAAW,EACXoL,KAAM3C,KAAK2C,KACXlL,KAAMc,KAAKd,OAGnBqP,UAAUrP,aACHA,KAAKA,MAAQc,KAAKd,OACN,UAARA,MAEOA,KAAKkL,MAAQpK,KAAKiO,aAUxC3L,SAAW,kpGAiEfpN,IAAI8J,UAAU,wBAAyB,CACnCC,MAAO,CACHhJ,MAAO,CACHiJ,KAAMC,QAEViE,KAAM,CACFlE,KAAMC,QAEVlE,OAAQ,CACJiE,KAAMC,QAEVqP,QAAS,CACLtP,KAAMsD,QAEViM,OAAQ,CACJvP,KAAMwP,QACN5Z,SAAS,IAGjB8K,SAAU,CACN+O,kBACUC,YAAcC,KAAKC,IAAI9O,KAAKoD,KAAKtH,QAAQkE,KAAK/E,OAAOA,QAAU+E,KAAK/J,MAAMmU,KAAO,WAChFpK,KAAKoD,KAAK2L,WAAWH,YAAY,IAE5CI,8BACU3O,KAAKL,YACRK,KAAKpK,OAA4B,UAAnBoK,KAAKpK,MAAMiJ,MACxBmB,KAAKgN,YAAYC,YAAa,4BAAajN,KAAKpK,MAAM+E,OAAOT,UAAU8F,KAAKpK,MAAM+E,OAAOR,SACzF6F,KAAKgN,YAAYxR,YAAa,4BAAawE,KAAKpF,OAAOV,UAAU8F,KAAKsO,UAAUnU,SAC5E6F,KAAKgN,YAAYC,WAAW2B,MAAMC,WAAa7O,KAAKgN,YAAYxR,WAAWoT,MAAMC,WAC9E7O,KAAKgN,YAAYC,WAAW6B,KAAKD,WAAa7O,KAAKgN,YAAYxR,WAAWsT,KAAKD,YAOtF5Z,MAAM8Z,KAAK,qCAAqC/O,KAAKpK,MAAMoK,KAAKpF,OAAOoF,KAAKmO,UACrE,KAInBpP,KAAI,KACO,CAEHU,GAAI+O,KAAKQ,MAAMR,KAAKS,SAAW3J,KAAKsH,OAAOsC,SAAS,IACpD/P,KAAMrJ,QAAQsE,cACd4S,YAAa,CACTC,WAAY,KACZzR,WAAY,KACZ2T,QAAS3a,uBAIrBsL,QAAS,CAELwN,uBAAuBzL,aACb7B,KAAOL,KAEb1K,MAAMqN,KAAK,gCACNtC,KAAK2O,sBAoBN1Z,MAAMqN,KAAK,+BAA+BtC,KAAKgN,cAnB/C/X,MAAMqN,KAAK,8CAERtC,KAAKpK,MAAM+E,OAAOyU,gBACbpP,KAAKoO,QAAWpO,KAAKgN,YAAYmC,QAAQ1a,QAGlCuL,KAAKgN,YAAYmC,QAAQE,cAEhCrP,KAAKsP,4BAHAhP,SAAS0C,KAAK,4BAA4BrD,KAAKF,IAQpDO,KAAKoO,QAAWpO,KAAKgN,YAAYmC,QAAQxa,eACpC2L,SAAS0C,KAAK,2BAA2BrD,KAAKF,MAQnE6P,6BACUtP,KAAKL,YAERK,KAAKgN,YAAYmC,QAAQ1a,UACxBuL,KAAKgN,YAAYmC,QAAQE,cAAe,IAErC,cAAK,CAAC,CACTpP,WAAY,2CACZC,KAAM,CAAEqP,UAAWvP,KAAKpF,OAAO6E,GACvB+P,UAAW7P,KAAK/J,MAAM+E,OAAO8E,GAC7BsK,KAAMpK,KAAK/J,MAAMmU,SAEzB,GAAGrJ,KAAKC,sBAAaC,WAAWR,MAAMC,WACtCL,KAAKpK,MAAM+E,OAAOT,UAAYmG,SAASnG,UACvC8F,KAAKpK,MAAM+E,OAAOR,QAAUkG,SAASlG,QACrC6F,KAAKpK,MAAM+E,OAAO8U,OAASpP,SAASoP,OACpCzP,KAAKwC,MAAM,QAAQxC,KAAKpK,WAGhC8Z,YAAY3F,YACF/J,KAAKL,YACJ,cAAK,CAAC,CACTM,WAAY,yCACZC,KAAM,CAAET,GAAIO,KAAKpK,MAAM6J,GACfsK,KAAMA,SAEd,GAAGrJ,KAAKC,sBAAaC,WAAWR,MAAMC,WACtCL,KAAKpK,MAAMmU,KAAO1J,SAAS0J,KAC3B/J,KAAKwC,MAAM,QAAQxC,KAAKpK,OACxBoK,KAAKuN,WAAU,KACXvN,KAAKsN,gCAIjBqC,gBAAgBC,SACR1I,EAAI,UACQ,GAAb0I,IAAI5U,MAAakM,GAAM,KAAIvH,KAAKR,KAAKlE,SAChC2U,IAAI5U,MAAQ,IAAIkM,GAAM,GAAE0I,IAAI5U,SAAS2E,KAAKR,KAAKnE,WACvC,GAAb4U,IAAI1U,MAAagM,GAAM,KAAIvH,KAAKR,KAAKhE,SAChCyU,IAAI1U,MAAQ,IAAIgM,GAAM,GAAE0I,IAAI1U,SAASyE,KAAKR,KAAKjE,WACxC,GAAZ0U,IAAIxU,KAAY8L,GAAM,KAAIvH,KAAKR,KAAK9D,QAC/BuU,IAAIxU,KAAO,IAAI8L,GAAM,GAAE0I,IAAIxU,QAAQuE,KAAKR,KAAK/D,UAE9C8L,EAAE2I,sBAKjB5N,SAAW,qsNA8GfpN,IAAI8J,UAAU,SAAU,CACpBC,MAAO,CACHhJ,MAAO,CACHiJ,KAAMC,OACNrK,QAAO,IAAW,MAEtBqb,MAAO,CACHjR,KAAMwP,QACN5Z,QAAO,KAAY,GAEvByT,KAAM,CACFrJ,KAAMC,OACNrK,QAAO,IAAY,MAEvB6S,KAAM,CACFzI,KAAMC,OACNrK,QAAO,IAAY,MAEvBsO,KAAM,CACFlE,KAAMC,OACNrK,QAAO,IAAY,MAEvBmG,OAAQ,CACJiE,KAAMC,OACNrK,QAAO,IAAY,MAEvB0Z,QAAS,CACLtP,KAAMsD,OACN1N,QAAO,IAAY,IAG3BsK,KAAI,KACO,CACHgR,SAAU,KACVC,kBAAmB,KACnBC,YAAY,EACZC,kBAAmBxa,YAAYC,WAC/BwJ,KAAMrJ,QAAQyG,UACd4T,aAAa,EACb/G,MAAO,KAGftJ,QAAS,CACLsQ,UAAUjH,YAED8G,YAAa,MACdI,MAAQrF,SAASsF,eAAe,aAAa3Q,KAAK/J,MAAM6J,IACxD8Q,YAAavF,SAASsF,eAAe,gBAAgB3Q,KAAK/J,MAAM6J,IACpE8Q,YAAY/E,MAAMgF,SAAW,QAC7BD,YAAY/E,MAAMiF,KAAOtH,MAAMqH,SAASE,EAAE,KAC1CH,YAAY/E,MAAMmF,IAAMxH,MAAMqH,SAASI,EAAE,UACpCb,SAAW,IAAIc,uBAAWR,MAAME,YAAY,CACzCrK,MAAO,OACP4K,QAAS,CACLT,MA54EX,IA64EWU,IA74EX,OAi5ED/F,SAASgG,iBAAiB,YAAYrR,KAAKsR,cAE/CC,UACyB,OAAlBvR,KAAKoQ,eACCA,SAASoB,aAEdZ,YAAcvF,SAASsF,eAAe,gBAAgB3Q,KAAK/J,MAAM6J,IACrE8Q,YAAY/E,MAAM4F,eAAe,QACjCb,YAAY/E,MAAM4F,eAAe,OACjCb,YAAY/E,MAAM4F,eAAe,YACjCpG,SAASqG,oBAAoB,YAAY1R,KAAKsR,cAElDA,YAAa,SAAS9H,WACdoH,YAAcvF,SAASsF,eAAe,gBAAgB3Q,KAAK/J,MAAM6J,IACrE8Q,YAAY/E,MAAMgF,SAAW,QAC7BD,YAAY/E,MAAMiF,KAAOtH,MAAMmI,QAAQ,KACvCf,YAAY/E,MAAMmF,IAAMxH,MAAMoI,QAAQ,MAG1CrE,OAAO/D,WACCqI,QAAUrI,MAAMpK,KAAKU,GACrBgS,MAAQ9R,KAAK/J,MAAM6J,QAClBiS,6BACA,CAAC,CACFzR,WAAY,yCACZC,KAAM,SAAasR,cAAkBC,UACrC,GAAGrR,MAAMC,eACLsR,KAAO,IAAOtR,SAASZ,WAAeY,SAASmR,cAAkBnR,SAASoR,OAC9Ehc,aAAa+M,MAAM,oBAAoBmP,WAClC/b,MAAMgc,YAAYC,GAAGhN,KAAK8M,SAChCjR,KAAKC,sBAAaC,YAEzBkR,WAAWH,YAEDtB,MAAQrF,SAASsF,eAAgB,aAAYqB,KAAKH,WAClDT,IAAM/F,SAASsF,eAAgB,aAAYqB,KAAKF,SAGnD9R,KAAKyJ,MAAMuI,KAAKF,cACVrI,MAAMuI,KAAKF,OAAON,gBAChBxR,KAAKyJ,MAAMuI,KAAKF,QAGd,OAAVpB,OAA0B,OAARU,KAAgB5b,UAAUkb,QAAUlb,UAAU4b,YAC1D3H,MAAMuI,KAAKF,OAAS,IAAIZ,uBAAYR,MAAMU,IAAI,CAC/C7K,MAZU,iBAaV4K,QAAS,CACLT,MAh8EX,IAi8EWU,IAj8EX,SAu8ELnI,WAAW+I,YACD3R,KAAOL,oBACR,CAAC,CACFM,WAAY,4CACZC,KAAM,SAAayR,KAAKH,cAAkBG,KAAKF,UAC/C,GAAGrR,MAAMC,cACNA,SAASG,QAAQ,MACXuR,WAAWJ,MAEhBlc,aAAa+M,MAAM,yBAAyBmP,UAExC5I,MAAQ/I,KAAKpK,MAAMgc,YAAYI,IAAIhJ,QAAQ2I,MAC/C3R,KAAKpK,MAAMgc,YAAYI,IAAI/I,OAAOF,MAAO,OAE9CrI,KAAKC,sBAAaC,YAEzBqR,UAAUN,MACHhS,KAAKyJ,MAAMuI,KAAKF,aACVrI,MAAMuI,KAAKF,OAAOS,UAAU,CAAChM,MAAM,mBAGhDiM,UAAUR,MACHhS,KAAKyJ,MAAMuI,KAAKF,aACVrI,MAAMuI,KAAKF,OAAOS,UAAU,CAAChM,MAAM,oBAGhDkM,4BACS,CAAC,CACFnS,WAAY,qCACZC,KAAM,IAAQP,KAAK/J,MAAM6J,cACHE,KAAK/J,MAAMD,2BACNgK,KAAK/J,MAAMyc,oBACtC,GAAG3R,KAAKC,sBAAaC,YAE7B0R,cAAcnJ,OACPxJ,KAAK4S,kBACCpC,aAAY,EACjBhH,MAAMqJ,mBAGdd,iBACO/R,KAAK/J,MAAMgc,aAAejS,KAAK/J,MAAMgc,YAAYI,QAC5C,IAAIrN,KAAKhF,KAAK/J,MAAMgc,YAAYI,IAAI,KAChCL,KAAOhS,KAAK/J,MAAMgc,YAAYI,IAAIrN,QACjCmN,WAAWH,QAM5Bc,oBAAoBd,MACbA,KAAKH,SAAW7R,KAAK/J,MAAM6J,UACrB7J,MAAMgc,YAAYI,IAAInN,KAAK8M,WAC3BG,WAAWH,QAIxBe,oBAAoBf,SACbhS,KAAK/J,MAAMgc,aAAejS,KAAK/J,MAAMgc,YAAYI,QAC5C,IAAIrN,KAAKhF,KAAK/J,MAAMgc,YAAYC,GAAG,KAC/Bc,KAAOhT,KAAK/J,MAAMgc,YAAYC,GAAGlN,GAClCgN,KAAKlS,IAAMkT,KAAKlT,IACfO,KAAKpK,MAAMgc,YAAYI,IAAI/I,OAAOtE,EAAG,KAOrDiO,oBACOjT,KAAK/J,MAAMgc,aAAejS,KAAK/J,MAAMgc,YAAYI,QAC5C,IAAIrN,KAAKhF,KAAK/J,MAAMgc,YAAYI,IAAI,KAChCL,KAAOhS,KAAK/J,MAAMgc,YAAYI,IAAIrN,QACjCmN,WAAWH,QAM5BkB,gBAAgBC,UACTnT,KAAK/J,MAAMgc,aAAejS,KAAK/J,MAAMgc,YAAYI,QAC5C,IAAIrN,KAAKhF,KAAK/J,MAAMgc,YAAYI,IAAI,KAChCL,KAAOhS,KAAK/J,MAAMgc,YAAYI,IAAIrN,GACnCgN,KAAKF,OAASqB,YACRf,WAAWJ,QAQhCoB,cAAcC,eACJhT,KAAOL,QACVA,KAAK/J,MAAMgc,aAAejS,KAAK/J,MAAMgc,YAAYI,QAC5C,MAAMrN,KAAKhF,KAAK/J,MAAMgc,YAAYI,IAAI,KAClCL,KAAOhS,KAAK/J,MAAMgc,YAAYI,IAAIrN,GACnCgN,KAAKF,OAASuB,UACbhT,KAAK+R,WAAWJ,MAChB3R,KAAKpK,MAAMgc,YAAYI,IAAI/I,OAAOtE,EAAG,OAI9ChF,KAAK/J,MAAMgc,aAAejS,KAAK/J,MAAMgc,YAAYC,OAC5C,MAAMlN,KAAKhF,KAAK/J,MAAMgc,YAAYC,GAAG,CAC1BlS,KAAK/J,MAAMgc,YAAYC,GAAGlN,GAC7B6M,SAAWwB,SACfhT,KAAKpK,MAAMgc,YAAYI,IAAI/I,OAAOtE,EAAG,KAMrDsO,qBACSvB,eAGTK,WAAWJ,MACJhS,KAAKyJ,MAAMuI,KAAKF,cACVrI,MAAMuI,KAAKF,OAAON,gBAChBxR,KAAKyJ,MAAMuI,KAAKF,SAG/ByB,mBACUlT,KAAOL,KACPwT,UAAY,CACd/L,KAAMzH,KAAKR,KAAK,QAAUQ,KAAK/J,MAAMiJ,MAAMgR,oBAC3CxT,KAAwB,UAAjBsD,KAAK/J,MAAMiJ,KAAgBc,KAAK/J,MAAM+E,OAAOyY,YAAY,GAChE9L,KAAO3H,KAAK2H,KAAQ3H,KAAK2H,KAAKjL,KAAO,GACrCzB,OAAS+E,KAAK/E,OAAU+E,KAAK/E,OAAOZ,SAAW2F,KAAKuI,KAAK7L,WAGxDiE,SAASC,eAAc,2BAAUZ,KAAKR,KAAKvC,oBAAqBuW,WAAY,CAC7ErS,UAAY,SACZC,QAAUpB,KAAKR,KAAKzC,GACpBsE,YAAarB,KAAKR,KAAKzB,SACxBuD,MAAKrL,QACCA,sBAEI,CAAC,CACFqK,WAAY,uCACZC,KAAM,IAAQF,KAAKpK,MAAM6J,OACzB,GAAGW,MAAK,SAASC,UACM,GAApBA,SAASG,SACRR,KAAKwC,MAAM,UAAU,CAAEzD,KAAMiB,KAAKpK,WAEvC8K,KAAKC,sBAAaC,cAE1ByS,OAAMC,MACLre,MAAMse,QAAQ3V,MAAM0V,UAMhC/T,SAAU,CACNiU,2BACa,CAAC,UAAWlS,SAAS3B,KAAK/J,MAAMiJ,OAE7C4U,0BACa,CAAC,SAAUnS,SAAS3B,KAAK/J,MAAMiJ,OAE5C0T,mBACW,CAAC,QAAQ,WAAW,UAAUjR,SAAS3B,KAAK/J,MAAMiJ,QAGjEO,UAIQO,KAAKmQ,QAILra,aAAagV,IAAI,oBAAqB9K,KAAK8S,qBAE3Chd,aAAagV,IAAI,oBAAqB9K,KAAK+S,qBAG3Cjd,aAAagV,IAAI,eAAgB9K,KAAKiT,gBAGtCnd,aAAagV,IAAI,gBAAiB9K,KAAKkT,iBAGvCpd,aAAagV,IAAI,cAAe9K,KAAKoT,eACrCtd,aAAagV,IAAI,cAAe9K,KAAKsT,iBAK7C5T,UAKQM,KAAKmQ,aAEA4B,cACLgC,YAAW,KACPje,aAAa+M,MAAM,eAAe7C,KAAK/J,MAAM6J,MAC/C,MAGVkU,oBACQhU,KAAKmQ,MAAO,KACR,IAAInL,KAAKhF,KAAK/J,MAAMgc,YAAYI,IAAI,KAChCL,KAAOhS,KAAK/J,MAAMgc,YAAYI,IAAIrN,QACjCoN,WAAWJ,MAEpBlc,aAAa+M,MAAM,gBAAgB7C,KAAK/J,MAAM6J,IAG9ChK,aAAame,KAAK,oBAAqBjU,KAAK8S,qBAC5Chd,aAAame,KAAK,oBAAqBjU,KAAK+S,qBAC5Cjd,aAAame,KAAK,eAAgBjU,KAAKiT,gBACvCnd,aAAame,KAAK,gBAAiBjU,KAAKkT,iBACxCpd,aAAame,KAAK,cAAejU,KAAKoT,eACtCtd,aAAame,KAAK,cAAejU,KAAKsT,iBAG9CY,iBAEAvU,UACQK,KAAKmQ,YACA4B,eAGbzP,SAAW,wiJAoGfpN,IAAI8J,UAAU,iBAAkB,CAC5BC,MAAO,OACM,CACLC,KAAMC,OACNrK,QAAS,kBAAmB,QAGpCsK,KAAI,KACO,CACHI,KAAMrJ,QAAQ6H,UAGtBmC,QAAS,GAETmC,SAAW,6uBAoBfpN,IAAI8J,UAAU,gBAAiB,CAC3BC,MAAO,CACHhJ,MAAM,CACFiJ,KAAMC,OACNrK,QAAO,IAAW,MAEtByT,KAAK,CACDrJ,KAAMC,OACNrK,QAAO,IAAW,MAEtBsO,KAAM,CACFlE,KAAMC,OACNrK,QAAO,IAAY,MAEvBmG,OAAQ,CACJiE,KAAMC,OACNrK,QAAO,IAAY,MAEvB0Z,QAAS,CACLtP,KAAMsD,OACN1N,QAAO,IAAY,IAG3BsK,KAAI,KACO,CACHmR,kBAAmBxa,YAAYC,WAC/BwJ,KAAMrJ,QAAQqH,mBAGtBoC,SAAU,CACNuU,6BACOnU,KAAKuI,OAAQvI,KAAKuI,KAAKzB,uBAAqEpF,IAAjD1B,KAAKuI,KAAKzB,iBAAiBqN,oBAC9DnU,KAAKuI,KAAKzB,iBAAiBqN,mBAO1CC,4BACOpU,KAAKqU,aAAerU,KAAKsU,iBACjB,kBAEA,sBAIfC,2BACOvU,KAAKqU,aAAerU,KAAKsU,iBACjB,QAEA,sBAGf/Z,mBACW,2BAAYyF,KAAK/J,MAAM+E,OAAOT,YAEzCC,iBACOwF,KAAK/J,MAAM+E,OAAOR,SACV,2BAAYwF,KAAK/J,MAAM+E,OAAOR,SAG9BwF,KAAKR,KAAKgV,YAK7BrU,QAAS,CACLkU,eACOrU,KAAK/J,MAAM+E,OAAOyZ,QAAUzU,KAAK/J,MAAM+E,OAAOyZ,OAAO5e,OAAS,MACzD,MAAM6e,KAAK1U,KAAK/J,MAAM+E,OAAOyZ,UAC1BC,EAAEjY,gBACM,SAIZ,GAEX6X,oBACOtU,KAAK/J,MAAM+E,OAAOkD,YAAc8B,KAAK/J,MAAM+E,OAAOkD,WAAWlI,eACxD,MAAM2e,UAAU3U,KAAK/J,MAAM+E,OAAOkD,WAAWlI,cAC1C2e,OAAOvJ,OAASuJ,OAAOvJ,MAAMvV,OAAS,SAC9B,SAIZ,GAEX+e,eAAeC,SAASH,kBACf,CAAC,CACFpU,WAAY,oCACZC,KAAM,UAAcmU,EAAE5U,WACHE,KAAK/J,MAAM6J,WACX+U,kBACCH,EAAEI,aAEtB,GAAG/T,KAAKC,sBAAaC,YAE7B8T,gBAAgBF,SAASH,kBAChB,CAAC,CACFpU,WAAY,oCACZC,KAAM,UAAcmU,EAAE5U,WACHE,KAAK/J,MAAM6J,WACX4U,EAAEjY,kBACDoY,aAEpB,GAAG9T,KAAKC,sBAAaC,YAE7B+T,kCACS,CAAC,CACF1U,WAAY,qCACZC,KAAM,IAAQP,KAAK/J,MAAM6J,cACHE,KAAK/J,MAAMD,eAEjC,GAAG+K,KAAKC,sBAAaC,aAGjCxB,YAGA6C,SAAW,moIAiFfpN,IAAI8J,UAAU,uBAAwB,CAClCC,MAAO,OACM,CACLC,KAAMC,OACNrK,QAAO,IAAW,WAEd,CACJoK,KAAMC,OACNrK,QAAO,IAAW,OAG1BsK,KAAI,KACO,CACHmR,kBAAmBxa,YAAYC,WAC/BwJ,KAAMrJ,QAAQqH,mBAGtBoC,SAAU,CACNmH,6BACO/G,KAAKuI,OAAQvI,KAAKuI,KAAKzB,uBAAqEpF,IAAjD1B,KAAKuI,KAAKzB,iBAAiBC,oBAC9D/G,KAAKuI,KAAKzB,iBAAiBC,mBAM1CkO,qBACQ9K,KAAO,OACP,IAAIrC,MAAM9H,KAAK/J,MAAM+E,OAAOyZ,OAAO,KAC/BC,EAAI1U,KAAK/J,MAAM+E,OAAOyZ,OAAO3M,IAC9B4M,EAAEjY,UACD0N,KAAKjF,KAAKwP,UAGXvK,OAGfhK,QAAS,CACLyU,eAAeC,SAASH,kBACf,CAAC,CACFpU,WAAY,oCACZC,KAAM,UAAcmU,EAAE5U,WACHE,KAAK/J,MAAM6J,WACX+U,kBACCH,EAAEI,aAEtB,GAAG/T,KAAKC,sBAAaC,YAE7B8T,gBAAgBF,SAASH,kBAChB,CAAC,CACFpU,WAAY,oCACZC,KAAM,UAAcmU,EAAE5U,WACHE,KAAK/J,MAAM6J,WACX4U,EAAEjY,kBACDoY,aAEpB,GAAG9T,KAAKC,sBAAaC,aAGjCxB,YAGA6C,SAAW,inDA+BfpN,IAAI8J,UAAU,2BAA2B,CACrCC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,KAEhCogB,UAAW,CACPhW,KAAMwP,QACN5Z,SAAS,GAEbkG,OAAQ,CACJkE,KAAMC,OACNrK,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,CACHI,KAAMrJ,QAAQ+H,aAGtBuB,gBACUY,KAAOL,SAETmV,WAAa,OACb,MAAM3R,OAAQxD,KAAKR,KACnB2V,WAAWjQ,KAAK,CAAE1B,IAAKA,IAAKxE,UAAW,6CAE/BmW,YAAY7T,MAAK,SAASnL,aAC9B6O,EAAI,MACJ,MAAMxB,OAAQnD,KAAKb,KACnBa,KAAKb,KAAKgE,KAAOrN,QAAQ6O,GACzBA,QAIZpF,SAAU,CACN0U,oBACOtU,KAAK/J,MAAMD,eACN,MAAM2e,UAAU3U,KAAK/J,MAAMD,cACxB2e,OAAOvJ,OAASuJ,OAAOvJ,MAAMvV,OAAS,SAC9B,SAIZ,IAGfsK,QAAS,CACLiV,gBAAgBlX,mBACLA,gBACE,iBACM,yBACN,eAEA,sBACM,mBACN,sBACM,6BAEA,aAInBmX,eAAeV,QACJA,OAAOzW,WAAW,YAAY,cAG7CoE,SAAW,+6CAoCfpN,IAAI8J,UAAU,kBAAkB,CAC5BC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,CACHmR,kBAAmBxa,YAAYC,aAGvCmK,QAAS,GAGTmC,SAAW,uJAOfpN,IAAI8J,UAAU,gBAAgB,CAC1BC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,IAGXe,QAAS,GAETmC,SAAW,mJAOfpN,IAAI8J,UAAU,eAAe,CACzBC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,IAGXK,YAGAU,QAAS,GAETmC,SAAW,kJAOfpN,IAAI8J,UAAU,eAAe,CACzBC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,CAAE6J,MAAO,OAG7CS,KAAI,KACO,CACHkW,IAAKnf,QACLqJ,KAAMrJ,QAAQyG,YAGtBuD,QAAS,GAETmC,SAAW,g0FAuDfpN,IAAI8J,UAAU,mBAAmB,CAC7BC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMiJ,MACNrT,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,IAGXe,QAAS,GAETmC,SAAW,yRAUfpN,IAAI8J,UAAU,wBAAwB,CAClCC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMC,OACNrK,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,CACHuE,SAAS,IAIjB/D,SAAU,CACN2V,qBACWvV,KAAKwV,eAEhBC,oBACYzV,KAAK/J,MAAMyf,aAAe1V,KAAK/J,MAAM0f,aAIrDxV,QAAS,CACLqV,qBACYxV,KAAK/J,MAAMyf,eAAiB1V,KAAK/J,MAAM2f,UAA0C,GAA9B5V,KAAK/J,MAAM2f,SAAS/f,SAC1EmK,KAAK/J,MAAM0f,cAAgB3V,KAAK/J,MAAM8R,SAAwC,GAA7B/H,KAAK/J,MAAM8R,QAAQlS,SAE7EggB,sBACUxV,KAAOL,KACVA,KAAKwV,8BACC,CAAC,CACFlV,WAAY,mCACZC,KAAM,IAAQP,KAAK/J,MAAM6J,OACzB,GAAGW,MAAK,SAASC,UACjBL,KAAKwC,MAAM,QAASnC,aACrBK,KAAKC,sBAAaC,aAIjCqB,SAAW,2xCA0BfpN,IAAI8J,UAAU,gBAAgB,CAC1BC,MAAO,CACHhJ,MAAQ,CACJiJ,KAAMiJ,MACNrT,QAAS,iBAAmB,MAGpCsK,KAAI,KACO,IAGXe,QAAS,CACLmO,SAAQ,KACG,CACH7G,MAAM,EACNzI,WAAW,EACXoL,KAAM,EACNlL,KAAM,cAIlBoD,SAAW"}
\ No newline at end of file
+{"version":3,"file":"studyplan-editor-components.min.js","sources":["../src/studyplan-editor-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from \"./simpleline/simpleline\";\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {get_strings} from 'core/str';\nimport {load_stringkeys, load_strings, strformat } from './util/string-helper';\nimport {format_date, add_days, datespaninfo } from './util/date-helper';\nimport {objCopy,transportItem} from './studyplan-processor';\nimport Debugger from './util/debugger';\nimport {download,upload} from './downloader';\nimport {ProcessStudyplan, ProcessStudyplanPage} from './studyplan-processor';\n\nimport TSComponents from './treestudyplan-components';\nimport mFormComponents from \"./util/mform-helper\";\n\n\nconst STUDYPLAN_EDITOR_FIELDS =\n['name','shortname','description','idnumber','context_id', 'aggregation','aggregation_config'];\nconst STUDYPLAN_EDITOR_PAGE_FIELDS =  //TODO: Add 'fullname', 'shortname' and 'description' when implementing proper page management\n['context_id', 'periods','startdate','enddate'];\nconst PERIOD_EDITOR_FIELDS =\n['fullname','shortname','startdate','enddate'];\n\nconst LINE_GRAVITY = 1.3;\n\nconst datechanger_globals = {\n    default: false,\n    defaultchoice: false,\n    hidewarn: false,\n};\n\nexport default {\n    STUDYPLAN_EDITOR_FIELDS: STUDYPLAN_EDITOR_FIELDS, // make copy available in plugin\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        Vue.use(mFormComponents);\n        let debug = new Debugger(\"treestudyplan-editor\");\n\n        /************************************\n         *                                  *\n         * Treestudyplan Editor components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        let string_keys = load_stringkeys({\n            conditions: [\n                { value: 'ALL', textkey: 'condition_all'},\n                { value: 'ANY', textkey: 'condition_any'},\n            ],\n        });\n\n        let strings = load_strings({\n            studyplan_text: {\n                studyline_editmode: 'studyline_editmode',\n                toolbox_toggle: 'toolbox_toggle',\n                editmode_modules_hidden:'editmode_modules_hidden',\n                studyline_add: 'studyline_add',\n                add$core: 'add$core',\n                edit$core: 'edit$core',\n                studyline_name: 'studyline_name',\n                studyline_name_ph: 'studyline_name_ph',\n                studyline_shortname: 'studyline_shortname',\n                studyline_shortname_ph: 'studyline_shortname_ph',\n                studyline_color: 'studyline_color',\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                studyline_edit: 'studyline_edit',\n                studyplan_name: 'studyplan_name',\n                studyplan_name_ph: 'studyplan_name_ph',\n                studyplan_shortname: 'studyplan_shortname',\n                studyplan_shortname_ph: 'studyplan_shortname_ph',\n                studyplan_description: 'studyplan_description',\n                studyplan_description_ph: 'studyplan_description_ph',\n                studyplan_idnumber: 'studyplan_idnumber',\n                studyplan_idnumber_ph: 'studyplan_idnumber_ph',\n                studyplan_slots: 'studyplan_slots',\n                studyplan_startdate: 'studyplan_startdate',\n                studyplan_enddate: 'studyplan_enddate',\n            },\n            studyplan_advanced: {\n                advanced_tools: 'advanced_tools',\n                confirm_cancel: 'confirm_cancel',\n                confirm_ok: 'confirm_ok',\n                success$core: 'success$core',\n                error$core: 'failed$core',\n                advanced_converted: 'advanced_converted',\n                advanced_skipped: 'advanced_skipped',\n                advanced_failed: 'advanced_failed',\n                advanced_locked: 'advanced_locked',\n                advanced_multiple: 'advanced_multiple',\n                advanced_error: 'advanced_error',\n                advanced_tools_heading: 'advanced_tools_heading',\n                advanced_warning_title: 'advanced_warning_title',\n                advanced_warning: 'advanced_warning',\n                advanced_pick_scale: 'advanced_pick_scale',\n                advanced_course_manipulation_title: 'advanced_course_manipulation_title',\n                advanced_force_scale_title: 'advanced_force_scale_title',\n                advanced_force_scale_desc: 'advanced_force_scale_desc',\n                advanced_force_scale_button: 'advanced_force_scale_button',\n                advanced_disable_autoenddate_title: 'advanced_disable_autoenddate_title',\n                advanced_disable_autoenddate_desc: 'advanced_disable_autoenddate_desc',\n                advanced_disable_autoenddate_button: 'advanced_disable_autoenddate_button',\n                advanced_confirm_header: 'advanced_confirm_header',\n                advanced_force_scale_confirm: 'advanced_force_scale_confirm',\n                advanced_import: 'advanced_import',\n                advanced_export: 'advanced_export',\n                advanced_export_csv: 'advanced_export_csv',\n                advanced_import_from_file: 'advanced_import_from_file',\n                advanced_purge: \"advanced_purge\",\n                advanced_purge_expl: \"advanced_purge_expl\",\n                advanced_cascade_cohortsync_title: \"advanced_cascade_cohortsync_title\",\n                advanced_cascade_cohortsync_desc: \"advanced_cascade_cohortsync_desc\",\n                advanced_cascade_cohortsync: \"advanced_cascade_cohortsync\",\n            },\n            studyplan_edit: {\n                studyplan_edit: 'studyplan_edit',\n                studyplan_add: 'studyplan_add',\n                studyplanpage_add: 'studyplanpage_add',\n                studyplanpage_edit: 'studyplanpage_edit',\n            },\n            period_edit: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n            },\n            course_timing: {\n                title: 'course_timing_title',\n                desc: 'course_timing_desc',\n                question: 'course_timing_question',\n                warning: 'course_timing_warning',\n                timing_ok: 'course_timing_ok',\n                timing_off: 'course_timing_off',\n                course: 'course@core',\n                period: 'period',\n                yes: 'yes$core',\n                no: 'no$core',\n                duration: 'duration',\n                years: 'years$core',\n                year: 'year$core',\n                weeks: 'weeks$core',\n                week: 'week$core',\n                days: 'days$core',\n                day: 'day$core',\n                rememberchoice: 'course_timing_rememberchoice',\n                hidewarning: 'course_timing_hidewarning',\n                periodspan: 'course_period_span',\n                periods: 'periods',\n                periodspan_desc: 'course_period_span_desc',\n            },\n            studyplan_associate: {\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                associate_cohorts: 'associate_cohorts',\n                associate_users: 'associate_users',\n                add_association: 'add_association',\n                delete_association: 'delete_association',\n                associations_empty: 'associations_empty',\n                associations_search: 'associations_search',\n                cohorts: 'cohorts',\n                users: 'users',\n                selected: 'selected',\n                name: 'name',\n                context: 'context',\n            },\n            item_text: {\n                select_conditions: \"select_conditions\",\n                item_configuration: \"item_configuration\",\n                ok: \"ok@core\",\n                delete: \"delete@core\",\n                item_delete_message: \"item_delete_message\",\n                type_course: \"course@core\",\n                type_junction: \"tool-junction\",\n                type_start: \"tool-start\",\n                type_finish: \"tool-finish\",\n                type_badge: \"tool-badge\",\n                type_invalid: \"course-invalid\",\n            },\n            item_course_text: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                ok: \"ok@core\",\n                cancel: \"cancel@core\",\n                delete: \"delete@core\",\n            },\n            invalid: {\n                error: 'error',\n            },\n            completion: {\n                completion_completed: \"completion_completed\",\n                completion_incomplete: \"completion_incomplete\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n            },\n\n        });\n\n\n        /*\n        * T-STUDYPLAN-ADVANCED\n        */\n        Vue.component('t-studyplan-advanced', {\n            props: {\n                value: {\n                    type: Object,\n                    default(){ return null;},\n                },\n\n            },\n            data() {\n                return {\n                    force_scales: {\n                        selected_scale: null,\n                        result: [],\n                    },\n                    text: strings.studyplan_advanced,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n                scales(){\n                    return [{\n                        id: null,\n                        disabled: true,\n                        name: this.text.advanced_pick_scale,\n                    }].concat(this.value.advanced.force_scales.scales);\n                },\n            },\n            methods: {\n                disable_autoenddate(){\n                    const self=this;\n                    call([{\n                        methodname: 'local_treestudyplan_disable_autoenddate',\n                        args: {\n                            studyplan_id: this.value.id,\n                        }\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)\n                             + \"\\n\" + response.msg);\n                    }).fail(notification.exception);\n                },\n                force_scales_start(){\n                    // set confirmation box\n                    const self=this;\n                    this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{\n                        title: this.text.advanced_force_scale_confirm,\n                        okVariant: 'danger',\n                        okTitle: this.text.confirm_ok,\n                        cancelTitle: this.text.confirm_cancel,\n                    }).then( value => {\n                        if(value == true){\n                            call([{\n                                methodname: 'local_treestudyplan_force_studyplan_scale',\n                                args: {\n                                    studyplan_id: this.value.id,\n                                    scale_id: this.force_scales.selected_scale,\n                                }\n                            }])[0].done(function(response){\n                                self.force_scales.result = response;\n                            }).fail(notification.exception);\n                        }\n                    });\n                },\n                export_plan(format){\n                    const self = this;\n                    if(format == undefined || ![\"json\",\"csv\"].includes(format)){\n                        format = \"json\";\n                    }\n                    call([{\n                            methodname: 'local_treestudyplan_export_plan',\n                            args: {\n                                studyplan_id: this.value.id,\n                                format: format,\n                            },\n                        }])[0].done(function(response){\n\n                            download(self.value.shortname+\".\"+format,response.content,response.format);\n                        }).fail(notification.exception);\n                },\n                import_studylines(){\n                    //const self = this;\n                    upload((filename,content)=>{\n                        call([{\n                            methodname: 'local_treestudyplan_import_studylines',\n                            args: {\n                                studyplan_id:  this.value.id,\n                                content: content,\n                                format: \"application/json\",\n                            },\n                        }])[0].done(function(response){\n                            if(response.success){\n                                location.reload();\n                            } else {\n                                debug.error(\"Import failed: \",response.msg);\n                            }\n\n                        }).fail(notification.exception);\n                    }, \"application/json\");\n                },\n                purge_studyline(){\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyplan',\n                        args: {\n                            id:  this.value.id,\n                            force: true,\n                        },\n                    }])[0].done(function(response){\n                        if(response.success){\n                            location.reload();\n                        } else {\n                            debug.error(\"Could not delete plan: \",response.msg);\n                        }\n\n                    }).fail(notification.exception);\n                },\n                cascade_cohortsync(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_cascade_cohortsync',\n                        args: {\n                            studyplan_id:  this.value.id,\n                        },\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,\n                            { title: self.text.advanced_cascade_cohortsync});\n                    }).fail(notification.exception);\n                },\n                modal_close(){\n                    this.force_scales.result = [];\n                }\n            },\n            template:\n            `\n            <span>\n                <a  v-if=\"value.advanced\"\n                    href='#'\n                    @click.prevent=''\n                    class='text-danger'\n                    v-b-modal=\"'t-studyplan-'+value.id+'-advanced'\"\n                    ><i class='fa fa-wrench'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if=\"value.advanced\"\n                    :id=\"'t-studyplan-'+value.id+'-advanced'\"\n                    size=\"lg\"\n                    :title=\"text.advanced_tools_heading\"\n                    ok-only\n                    @hide=\"modal_close\"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title=\"text.advanced_warning_title\" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title=\"text.advanced_course_manipulation_title\" >\n                            <b-container>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"info\"\n                                    @click=\"cascade_cohortsync\"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model=\"force_scales.selected_scale\"\n                                    :options=\"scales\" text-field=\"name\" value-field=\"id\"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols=\"4\">\n                                    <b-button\n                                        variant=\"danger\"\n                                        :disabled=\"force_scales.selected_scale == null\"\n                                        @click=\"force_scales_start\"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <ul class='t-advanced-scrollable' v-if=\"force_scales.result.length > 0\">\n                                    <li v-for=\"c in force_scales.result\">\n                                        <span class='t-advanced-coursename'>{{c.course.fullname}}</span>\n                                        <ul v-if=\"c.grades.length > 0\">\n                                            <li v-for='g in c.grades'>\n                                                <span class='t-advanced-gradename'><span v-html=\"g.name\"></span></span>\n                                                <span v-if=\"g.changed == 'converted'\" class='t-advanced-status changed'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if=\"g.changed == 'skipped'\" class='t-advanced-status skipped'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class='t-advanced-status skipped'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"danger\"\n                                    @click=\"disable_autoenddate\"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title='text.advanced_export'>\n                            <b-button\n                                    variant=\"primary\"\n                                    @click=\"export_plan\"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant=\"danger\"\n                                    @click=\"import_studylines\"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant=\"primary\"\n                                @click=\"export_plan('csv')\"\n                            >{{ text.advanced_export_csv}}</b-button>\n                        </b-tab>\n                        <b-tab :title='text.advanced_purge'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant=\"danger\"\n                                    @click=\"purge_studyline\"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>\n                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            `\n        });\n\n\n        /*\n        * T-STUDYPLAN-EDIT\n        */\n        Vue.component('t-studyplan-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'mode' :{\n                    type: String,\n                    default() { return \"edit\";},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'contextid': {\n                    type: Number,\n                    default: 1\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplan_edit,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                planSaved(updatedplan){\n                    const self = this;\n                    debug.info(\"Got new plan data\",updatedplan);\n\n                    if(self.mode == 'create'){\n                        // Inform parent of the details of the newly created plan\n                        self.$emit(\"created\",updatedplan);\n                    }\n                    else {\n                        // determine if the plan moved context...\n                        const moved_from = self.value.context_id;\n                        const moved_to = updatedplan.context_id;\n                        const moved = (moved_from != moved_to);\n\n                        if(updatedplan.pages[0].periods != self.value.pages[0].periods){\n                            // If the pages changed, just reload the entire model for the plan\n                            call([{\n                                methodname: 'local_treestudyplan_get_studyplan_map',\n                                args: { id: self.value.id}\n                            }])[0].done(function(response){\n                                self.value = ProcessStudyplan(response,true);\n                                debug.info('studyplan processed');\n                                self.$emit('input',self.value);\n                            }).fail(function(error){\n                                notification.exception(error);\n                            });\n                        } else {\n                            // Copy updated fields and trigger update\n                            objCopy(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS);\n                            self.$emit('input',self.value);\n                            if(moved){\n                                self.$emit('moved',self.value, moved_from, moved_to);\n                            }\n                        }\n                    }\n                },\n            }\n            ,\n            template:\n            `\n            <span class='s-studyplan-edit'>\n                <mform \n                    name=\"studyplan_editform\" \n                    :params=\"{studyplan_id: value.id, mode: mode, contextid: contextid }\" \n                    @saved=\"planSaved\"\n                    :variant=\"variant\"\n                    :type=\"type\"\n                    :title=\"(mode == 'create')?text.studyplan_add:text.studyplan_edit\"\n                    ><slot><i class='fa fa-gear'></i></slot></mform>\n            </span>\n            `\n        });\n\n        /*\n         * T-STUDYPLAN-EDIT\n         */\n        Vue.component('t-studyplan-page-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'mode' :{\n                    type: String,\n                    default() { return \"edit\";},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'studyplan': {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplan_edit,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                planSaved(updatedpage){\n                    const self = this;\n                    debug.info(\"Got new page data\",updatedpage);\n\n                    if(self.mode == 'create'){\n                        // Inform parent of the details of the newly created plan\n                        self.$emit(\"created\",updatedpage);\n                    }\n                    else {\n                        const page = ProcessStudyplanPage(updatedpage);\n                        debug.info('studyplan page processed');\n                        self.$emit('input',page);\n                    }\n                },\n            }\n            ,\n            template:\n            `\n            <span class='s-studyplan-page-edit'>\n                <mform \n                    name=\"studyplanpage_editform\" \n                    :params=\"{page_id: value.id, studyplan_id: studyplan.id, mode: mode }\" \n                    @saved=\"planSaved\"\n                    :variant=\"variant\"\n                    :type=\"type\"\n                    :title=\"(mode == 'create')?text.studyplanpage_add:text.studyplanpage_edit\"\n                    ><slot><i class='fa fa-gear'></i></slot></mform>\n            </span>\n            `\n        });\n\n\n        /*\n        * T-STUDYPLAN-ASSOCIATE\n        */\n        Vue.component('t-studyplan-associate', {\n            props: ['value',],\n            data() {\n                return {\n                    show: false,\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    association: {\n                        cohorts: [],\n                        users: [],\n                    },\n                    loading: {\n                        cohorts: false,\n                        users: false,\n                    },\n                    search: {users: [], cohorts:[]},\n                    selected: {\n                         search: {users: [] , cohorts:[]},\n                         associated: {users: [] , cohorts:[]}\n                    },\n                    text: strings.studyplan_associate,\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            methods: {\n                showModal(){\n                    this.show = true;\n                    this.loadAssociations();\n                },\n                cohortOptionModel(c){\n                    return {\n                        value: c.id,\n                        text: c.name + ' (' + c.context.path.join(' / ') + ')',\n                    };\n                },\n                userOptionModel(u){\n                    return {\n                        value: u.id,\n                        text: u.firstname + ' ' + u.lastname,\n                    };\n                },\n                loadAssociations(){\n                    const self = this;\n                    self.loading.cohorts = true;\n                    self.loading.users = true;\n                    call([{\n                        methodname: 'local_treestudyplan_associated_users',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.users = response.map(self.userOptionModel);\n                        self.loading.users = false;\n                    }).fail(notification.exception);\n\n                    call([{\n                        methodname: 'local_treestudyplan_associated_cohorts',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.cohorts = response.map(self.cohortOptionModel);\n                        self.loading.cohorts = false;\n                    }).fail(notification.exception);\n                },\n                searchCohorts(searchtext){\n                    const self = this;\n\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_list_cohort',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.cohorts = response.map(self.cohortOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.cohorts = [];\n                    }\n                },\n                cohortAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.cohorts;\n                    const search = self.search.cohorts;\n                    const searchselected = self.selected.search.cohorts;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                cohortDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associatedselected = self.selected.associated.cohorts;\n                    const associated = self.association.cohorts;\n                    const search =  self.search.cohorts;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                searchUsers(searchtext){\n                    const self = this;\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_find_user',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.users = response.map(self.userOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.users = [];\n                    }\n                },\n                userAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const search =  self.search.users;\n                    const searchselected =  self.selected.search.users;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                userDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const associatedselected = self.selected.associated.users;\n                    const search = self.search.users;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n            }\n            ,\n            template:\n`\n<span class='s-studyplan-associate'\n    ><a href='#' @click.prevent=\"showModal\" ><slot><i class='fa fa-users'></i></slot></a>\n    <b-modal\n        v-model=\"show\"\n        size=\"lg\"\n        ok-variant=\"primary\"\n        :title=\"text.associations + ' - ' + value.name\"\n        ok-only>\n        <b-tabs class='s-studyplan-associate-window'>\n            <b-tab :title=\"text.cohorts\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\" @input=\"searchCohorts($event)\"\n                                :placeholder=\"text.search\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.cohorts\"\n                                :options=\"association.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.cohorts\"\n                                :options=\"search.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                            <b-button variant='danger' @click=\"cohortDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"cohortAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title=\"text.users\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\"\n                                @input=\"searchUsers($event)\"\n                                placeholder=\"Search users\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.users\"\n                                :options=\"association.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.users\"\n                                :options=\"search.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                                <b-button variant='danger' @click=\"userDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"userAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n`\n        });\n\n        /*******************\n         *\n         * Period editor\n         *\n         *************/\n\n        Vue.component('t-period-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'minstart' : {\n                    type: String,\n                    default() { return null;},\n                },\n                'maxend' : {\n                    type: String,\n                    default() { return null;},\n                }\n            },\n            data() {\n                return {\n                    show: false,\n                    editdata: {\n                        fullname: '',\n                        shortname: '',\n                        startdate: (new Date()).getFullYear() + '-08-01',\n                        enddate:  ((new Date()).getFullYear()+1) + '-08-01',\n                    },\n                    text: strings.period_edit,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n            },\n            methods: {\n                editStart(){\n                    objCopy(this.editdata,this.value,PERIOD_EDITOR_FIELDS);\n                    this.show = true;\n                },\n                editFinish(){\n                    const self = this;\n                    let args = { 'id': this.value.id };\n\n                    objCopy(args,this.editdata,PERIOD_EDITOR_FIELDS);\n\n                    call([{\n                        methodname: 'local_treestudyplan_edit_period',\n                        args: args\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                        self.$emit('edited',self.value);\n                    }).fail(notification.exception);\n                },\n                refresh(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_get_period',\n                        args: { 'id': this.value.id },\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                    }).fail(notification.exception);\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n            }\n            ,\n            template:\n            `\n            <span class='t-period-edit'>\n                <b-button :variant=\"variant\" v-if='type == \"button\"' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></b-button>\n                <a variant=\"variant\" v-else href='#' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></a>\n                <b-modal\n                    v-model=\"show\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.edit\"\n                    @ok=\"editFinish()\"\n                    :ok-disabled=\"Math.min(editdata.fullname.length,editdata.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.fullname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.fullname\"\n                                :state='editdata.fullname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.shortname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.shortname\"\n                                :state='editdata.shortname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.startdate\"\n                                    :min=\"(minstart ? minstart : '')\"\n                                    :max=\"sub_day(value.enddate)\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.enddate\"\n                                    :min=\"add_day(value.startdate)\"\n                                    :max=\"(maxend ? maxend : '')\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `\n        });\n\n        // TAG: Start studyplan component\n        /*\n        * T-STUDYPLAN\n        */\n        Vue.component('t-studyplan', {\n            props: [ 'value', 'index', ],\n            data() {\n                return {\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    create: {\n                        studyline: {\n                            'name': '',\n                            'shortname': '',\n                            'color': '#DDDDDD',\n                        },\n                        page: {\n                            'id': -1,\n                            'name' : '',\n                            'shortname' : ''\n                        }\n                    },\n                    edit: {\n                        toolbox_shown: false,\n                        studyline: {\n                            editmode: false,\n                            data: {\n                                name: '',\n                                shortname: '',\n                                color: '#DDDDDD',\n                            },\n                            original: {},\n                        },\n                        studyplan: {\n                            data: {\n                                name: '',\n                                shortname: '',\n                                description: '',\n                                slots : 4,\n                                startdate: '2020-08-01',\n                                enddate: '',\n                                aggregation: '',\n                                aggregation_config: '',\n                                aggregation_info: {\n                                    useRequiredGrades: true,\n                                    useItemCondition: false,\n                                },\n\n                            },\n                            original: {},\n                        }\n                    },\n                    text: strings.studyplan_text,\n                    cache: {\n                        linelayers: {},\n                    },\n                    selectedpageindex: 0,\n                    emptyline: {\n                        id: -1,\n                        name: '<No study lines defined>',\n                        shortname: '<No study lines>',\n                        color: '#FF0000',\n                        filterslots: [{}],\n                        courseslots: [{}]\n                    }\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n                if(this.value.pages[0].studylines.length == 0){\n                    // start in editmode if studylines are empty\n                    this.edit.studyline.editmode = true;\n                }\n                this.$root.$emit('redrawLines');\n            },\n            updated() {\n                this.$root.$emit('redrawLines');\n                ItemEventBus.$emit('redrawLines');\n            },\n            computed: {\n                selectedpage() {\n                    return this.value.pages[this.selectedpageindex];\n                }\n            },\n            methods: {\n                columns(page) {\n                    return 1+ (page.periods * 2);\n                },\n                columns_stylerule(page) {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                trashbin_accepts(type){\n                    if(type.item){\n                        return true;\n                    } else {\n                        return false;\n                    }\n                },\n                countLineLayers(line,page){\n                    // For some optimization, we cache the value of this calculation for about a second\n                    // Would be a lot nicer if we could use a computed property for this.....\n                    if( this.cache.linelayers[line.id]\n                        && ((new Date()) - this.cache.linelayers[line.id].timestamp < 1000 )\n                    ){\n                        return this.cache.linelayers[line.id].value;\n                    }\n                    else\n                    {\n                        let maxLayer = -1;\n                        for(let i = 0; i <= page.periods; i++){\n                            if(line.slots[i]){\n                                const slot = line.slots[i];\n                                // Determine the amount of used layers in a studyline slit\n                                for(const ix in line.slots[i].courses){\n                                    const item = line.slots[i].courses[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n                                for(const ix in line.slots[i].filters){\n                                    const item = line.slots[i].filters[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n\n                            }\n                        }\n                        this.cache.linelayers[line.id] = {\n                            value: (maxLayer + 1),\n                            timestamp: (new Date()),\n                        };\n                        return maxLayer+1;\n                    }\n                },\n                slotsempty(slots) {\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                movedStudyplan(plan,from,to) {\n                    this.$emit('moved',plan,from,to); // Throw the event up....\n                },\n                addStudyLine(page,newlineinfo) {\n                    call([{\n                        methodname: 'local_treestudyplan_add_studyline',\n                        args: {\n                            'page_id': page.id,\n                            'name': newlineinfo.name,\n                            'shortname': newlineinfo.shortname,\n                            'color': newlineinfo.color,\n                            'sequence': page.studylines.length,\n                        }\n                    }])[0].done(function(response){\n                        page.studylines.push(response);\n                        newlineinfo.name = '';\n                        newlineinfo.shortname = '';\n                        newlineinfo.color = \"#dddddd\";\n                    }).fail(notification.exception);\n                },\n                editLineStart(line) {\n                    Object.assign(this.edit.studyline.data,line);\n                    this.edit.studyline.original = line;\n                    this.$bvModal.show('modal-edit-studyline-'+this.value.id);\n                },\n                editLineFinish() {\n                    let editedline = this.edit.studyline.data;\n                    let originalline = this.edit.studyline.original;\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyline',\n                        args: { 'id': editedline.id,\n                                'name': editedline.name,\n                                'shortname': editedline.shortname,\n                                'color': editedline.color,}\n                    }])[0].done(function(response){\n                        originalline['name'] = response['name'];\n                        originalline['shortname'] = response['shortname'];\n                        originalline['color'] = response['color'];\n                    }).fail(notification.exception);\n                },\n                deleteLine(page,line) {\n                    const self=this;\n                    get_strings([\n                            {key: 'studyline_confirm_remove', param: line.name, component: 'local_treestudyplan' },\n                            {key: 'delete', component: 'core' },\n                        ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyline',\n                                    args: { 'id': line.id, }\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        let index = page.studylines.indexOf(line);\n                                        page.studylines.splice(index, 1);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                reorderLines(event,lines){\n\n                    // apply reordering\n                    event.apply(lines);\n                    // send the new sequence to the server\n                    let sequence = [];\n                    for(let idx in lines)\n                    {\n                        sequence.push({'id': lines[idx].id,'sequence': idx});\n                    }\n                    call([{\n                        methodname: 'local_treestudyplan_reorder_studylines',\n                        args: { 'sequence': sequence }\n                    }])[0].done(function(response){\n                    }).fail(notification.exception);\n                },\n                deletePlan(studyplan){\n                    const self=this;\n                    get_strings([\n                        {key: 'studyplan_confirm_remove', param: studyplan.name, component: 'local_treestudyplan' },\n                        {key: 'delete', component: 'core' },\n                    ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyplan',\n                                    args: { 'id': studyplan.id, force: true}\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        self.$root.$emit(\"studyplanRemoved\",studyplan);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                deleteStudyItem(event){\n                    //const self = this;\n                    let item = event.data;\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyitem',\n                        args: { 'id': item.id, }\n                    }])[0].done(function(response){\n                        if(response.success == true){\n                            event.source.$emit('cut',event);\n                        }\n                    }).fail(notification.exception);\n\n                },\n                showslot(page,line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                periodEdited(pi) {\n                    const prev = this.$refs[\"periodeditor-\" + (pi.period - 1)][0];\n                    if(prev) {\n                        prev.refresh();\n                    }\n                    const next = this.$refs[\"periodeditor-\" + (pi.period + 1)][0];\n                    if(next) {\n                        next.refresh();\n                    }\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n                toolbox_switched(event){\n                    this.$emit('toggletoolbox',event);\n                },\n                pagecreated(page) {\n                    this.value.pages.push(page);\n                },\n                selectedpageChanged(newTabIndex,prevTabIndex) {\n                    const page = this.value.pages[newTabIndex];\n\n                    if (page.studylines.length == 0) {\n                        this.edit.studyline.editmode = true;\n                    } else {\n                        this.edit.studyline.editmode = false;\n                    }\n                }\n            }\n            ,\n            template:\n            `\n            <div>\n                <div class='controlbox t-studyplan-controlbox'>\n                    <div class=\"controlbox-group\">\n                        <b-form-checkbox v-model=\"edit.studyline.editmode\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); \"\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if=\"!edit.studyline.editmode\" v-model=\"edit.toolbox_shown\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched\"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode='copy'\n                            class='t-item-deletebox text-danger border-danger'\n                            @drop='deleteStudyItem'\n                            :accepts-type=\"trashbin_accepts\"\n                            ><i class='fa fa-trash'></i>\n                        </drop>\n                    </div>\n                    <div class=\"controlbox-group\">\n                        <span class='control editable'>\n                            <t-studyplan-advanced v-model=\"value\"></t-studyplan-advanced>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-associate\n                                v-model=\"value\"><i class='fa fa-users'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-edit v-model=\"value\" @moved=\"movedStudyplan\" \n                                ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class='control deletable'>\n                            <a v-if='value.pages.length == 0' href='#' @click='deletePlan(value)'\n                                ><i class='text-danger fa fa-trash'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <b-card no-body>\n                    <b-tabs \n                        v-model='selectedpageindex' \n                        @activate-tab='selectedpageChanged'\n                        content-class=\"mt-1\">\n                        <!-- New Tab Button (Using tabs-end slot) -->\n                        <template #tabs-end>\n                            <t-studyplan-page-edit \n                                :studyplan=\"value\"\n                                v-model=\"create.page\"\n                                type=\"link\"\n                                mode=\"create\"\n                                @created=\"pagecreated\"\n                            ><i class='fa fa-plus'></i></t-studyplan-page-edit>\n                        </template>\n                        <b-tab\n                            v-for=\"(page,pageindex) in value.pages\"\n                            :key=\"page.id\"\n                            >\n                            <template #title>\n                                {{page.shortname}}\n                                <t-studyplan-page-edit \n                                    v-if=\"pageindex == selectedpageindex\"\n                                    v-model=\"value.pages[pageindex]\"\n                                    :studyplan=\"value\"\n                                    type=\"link\"\n                                ></t-studyplan-page-edit>\n                            </template>\n                            <div class='t-studyplan-content-edit' \n                                v-if=\"edit.studyline.editmode\">\n                                <drop-list\n                                    :items=\"page.studylines\"\n                                    class=\"t-slot-droplist\"\n                                    :accepts-type=\"'studyline-'+page.id\"\n                                    xreorder=\"$event.apply(page.studylines)\"\n                                    @reorder=\"reorderLines($event,page.studylines)\"\n                                    mode=\"copy\"\n                                    row\n                                >\n                                    <template v-slot:item=\"{item}\">\n                                        <drag\n                                            :key=\"item.id\"\n                                            class='t-studyline-drag'\n                                            :data=\"item\"\n                                            :type=\"'studyline-'+page.id\"\n                                            >\n                                            <template v-slot:drag-image>\n                                                <i class=\"fa fa-arrows text-primary\"></i>\n                                            </template>\n                                            <t-studyline-edit\n                                                v-model=\"item\"\n                                                @edit='editLineStart(item)'\n                                                @delete='deleteLine(page,item)'\n                                                >\n                                                <div v-if=\"!slotsempty(item.slots)\"> {{ text.editmode_modules_hidden}} </div>\n                                            </t-studyline-edit>\n                                        </drag>\n                                    </template>\n                                </drop-list>\n                            </div>\n                            <div class='t-studyplan-content' v-else>\n                                <!-- Now paint the headings column -->\n                                <div class='t-studyplan-headings'>\n                                    <s-studyline-header-heading :identifier='Number(page.id)'></s-studyline-header-heading>\n                                    <template v-if=\"page.studylines.length > 0\">\n                                        <t-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                                            :key=\"line.id\"\n                                            @resize=\"headingresized(lineindex,$event)\"\n                                            v-model=\"page.studylines[lineindex]\"\n                                            :layers='countLineLayers(line,page)+1'\n                                            :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                                    + ((lineindex==0)?' first ':' ')\n                                                    + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                        ></t-studyline-heading>\n                                    </template>\n                                    <t-studyline-heading v-else\n                                        @resize=\"headingresized(0,$event)\"\n                                        \n                                        :layers=\"1\"\n                                        :class=\"'odd first last'\"\n                                    ></t-studyline-heading>\n                                </div>\n                                <!-- Next, paint all the cells in the scrollable -->\n                                <div class=\"t-studyplan-scrollable\" >\n                                    <div class=\"t-studyplan-timeline\" :style=\"columns_stylerule(page)\">\n                                    <!-- add period information --> \n                                    <template v-for=\"(n,index) in (page.periods+1)\">\n                                        <s-studyline-header-period\n                                            :identifier='Number(page.id)'\n                                            v-if=\"index > 0\"\n                                            v-model=\"page.perioddesc[index-1]\"\n                                            ><t-period-edit\n                                                :ref=\"'periodeditor-'+index\"\n                                                @edited=\"periodEdited\"\n                                                v-model=\"page.perioddesc[index-1]\"\n                                                :minstart=\"(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null\"\n                                                :maxend=\"(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null\"\n                                            ></t-period-edit\n                                        ></s-studyline-header-period>\n                                        <div class=\"s-studyline-header-filter\"></div>\n                                    </template>\n\n                                    <!-- Line by line add the items -->\n                                    <!-- The grid layout handles putting it in rows and columns -->\n                                    <template v-for=\"(line,lineindex) in page.studylines\"\n                                        ><template v-for=\"(layernr,layeridx) in countLineLayers(line,page)+1\"\n                                            ><template v-for=\"(n,index) in (page.periods+1)\"\n                                                >\n                                                <t-studyline-slot\n                                                    v-if=\"index > 0 && showslot(page,line, index, layeridx, 'gradable')\"\n                                                    type='gradable'\n                                                    v-model=\"line.slots[index].courses\"\n                                                    :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                                    :slotindex=\"index\"\n                                                    :line=\"line\"\n                                                    :plan=\"value\"\n                                                    :page=\"page\"\n                                                    :period=\"page.perioddesc[index-1]\"\n                                                    :layer=\"layeridx\"\n                                                    :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                            + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                            + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                            + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\n                                                            + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')\"\n                                                ></t-studyline-slot\n                                                ><t-studyline-slot\n                                                    type='filter'\n                                                    v-if=\"showslot(page,line, index, layeridx, 'filter')\"\n                                                    v-model=\"line.slots[index].filters\"\n                                                    :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                                    :slotindex=\"index\"\n                                                    :line=\"line\"\n                                                    :plan=\"value\"\n                                                    :page=\"page\"\n                                                    :layer=\"layeridx\"\n                                                    :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                            + ((lineindex==0 && layernr==1)?' first ':'')\n                                                            + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                            + ((index==page.periods)?' rightmost':'')\n                                                            + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\n                                                            + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')\"\n                                                ></t-studyline-slot\n                                            ></template\n                                        ></template\n                                    ></template\n                                    ></div>\n                                </div>\n                            </div>\n                            <div v-if=\"edit.studyline.editmode\" class='t-studyline-add ml-2 mt-1'>\n                                <a href=\"#\" v-b-modal=\"'modal-add-studyline-'+page.id\" @click=\"false;\"\n                                    ><i class='fa fa-plus'></i>{{ text.studyline_add }}</a>\n                            </div>\n                            <b-modal\n                                :id=\"'modal-add-studyline-'+page.id\"\n                                size=\"lg\"\n                                :ok-title=\"text.add$core\"\n                                ok-variant=\"primary\"\n                                :title=\"text.studyline_add\"\n                                @ok=\"addStudyLine(page,create.studyline)\"\n                                :ok-disabled=\"Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0\"\n                                >\n                                <b-container>\n                                    <b-row>\n                                        <b-col cols=\"3\">{{text.studyline_name}}</b-col>\n                                        <b-col>\n                                            <b-form-input v-model=\"create.studyline.name\" :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols=\"3\">{{text.studyline_shortname}}</b-col>\n                                        <b-col>\n                                        <b-form-input\n                                            v-model=\"create.studyline.shortname\"\n                                            :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols=\"3\">{{text.studyline_color}}</b-col>\n                                        <b-col>\n                                            <input type=\"color\" v-model=\"create.studyline.color\" />\n                                            <!-- hsluv-picker v-model=\"create.studyline.color\" horizontal displaysize=\"175\" ></hsluv-picker -->\n                                        </b-col>\n                                    </b-row>\n                                </b-container>\n                            </b-modal>\n                            <b-modal\n                                :id=\"'modal-edit-studyline-'+page.id\"\n                                size=\"lg\"\n                                ok-variant=\"primary\"\n                                :title=\"text.studyline_edit\"\n                                @ok=\"editLineFinish()\"\n                                :ok-disabled=\"Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0\"\n                                >\n                                <b-container>\n                                    <b-row>\n                                        <b-col cols=\"3\">{{ text.studyline_name}}</b-col>\n                                        <b-col>\n                                            <b-form-input\n                                                v-model=\"edit.studyline.data.name\"\n                                                :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols=\"3\">{{ text.studyline_shortname}}</b-col>\n                                        <b-col>\n                                        <b-form-input\n                                            v-model=\"edit.studyline.data.shortname\"\n                                            :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                                        </b-col>\n                                    </b-row>\n                                    <b-row>\n                                        <b-col cols=\"3\">{{ text.studyline_color}}</b-col>\n                                        <b-col>\n                                            <input type=\"color\" v-model=\"edit.studyline.data.color\" />\n                                        </b-col>\n                                    </b-row>\n                                </b-container>\n                            </b-modal>\n                        </b-tab>\n                    </b-tabs>\n                </b-card>\n            </div>\n            `\n        });\n\n\n       /*\n        * T-STUDYLINE-HEADER\n        */\n       Vue.component('t-studyline-heading', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                },\n                layers: {\n                    type: Number,\n                    default: 1,\n                },\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onLineHeightChange(lineid,layerid,newheight){\n                    // All layers for this line have the first slot send an update message on layer height change.\n                    // When one of those updates is received, record the height and recalculate the total height of the\n                    // header\n                    if(this.$refs.main && lineid == this.value.id){\n                        const items = document.querySelectorAll(\n                            `.t-studyline-slot-0[data-studyline='${this.value.id}']`);\n\n                        // determine the height of all the lines and add them up.\n                        let heightSum = 0;\n                        items.forEach((el) => {\n                            // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n                            const r = el.getBoundingClientRect();\n                            const height = r.height;\n                            heightSum += height;\n                        });\n\n                        const heightStyle=`${heightSum}px`;\n                        this.$refs.main.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"t-studyline t-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"main\"\n                ><div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <abbr v-b-tooltip.hover.right :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n        * T-STUDYLINE (Used only for study line edit mode)\n        */\n        Vue.component('t-studyline-edit', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                }\n           },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                deletable() {\n                    // Check if all the slots are empty\n                    const slots = this.value.slots;\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                editable() {\n                    return true;\n                }\n            },\n            methods: {\n                onEdit() {\n                    this.$emit('edit',this.value);\n                },\n                onDelete() {\n                    this.$emit('delete',this.value);\n                },\n\n            },\n            template: `\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n         * During a redisign it was decided to have the studyline still get the entire array as a value,\n         * even though it only shows one drop slot for the layer it is in. This is to make repainting easier,\n         * since we modify the array for the layer we handle. FIXME: Make this less weird\n         */\n        Vue.component('t-studyline-slot', {\n            props: {\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: '',\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                value: {\n                    type: Array, // dict with layer as index\n                    default(){ return [];},\n                },\n                plan: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                period: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n            },\n            mounted() {\n                const self=this;\n                if(self.type == \"gradable\" && self.slotindex == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                slotkey(){\n                    return `${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`;\n                },\n                itemidx(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return ix;\n                        }\n                    }\n                    return null;\n                },\n                item(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return itm;\n                        }\n                    }\n                    return null;\n                },\n                listtype() {\n                    return this.type;\n                },\n                dragacceptlist(){\n                    if(this.type == \"gradable\"){\n                        return [\"course\", \"gradable-item\"];\n                    } else {\n                        return [\"filter\", \"filter-item\"];\n                    }\n                },\n                courseHoverDummy(){\n                    return {course: this.hover.component};\n                },\n                current(){\n                    if( this.period && this.period.startdate && this.period.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.period.startdate);\n                        const pend = new Date(this.period.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                spanCss(){\n                    if(this.item && this.item.span > 1){\n                        const span = (2 * this.item.span) - 1;\n                        return `width: 100%; grid-column: span ${span};`;\n                    } else {\n                        return \"\";\n                    }\n                }\n            },\n            data() {\n                return {\n                    text: strings.course_timing,\n                    resizeListener: null,\n                    hover: {\n                        component:null,\n                        type: null,\n                    },\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        default: false,\n                        defaultchoice: false,\n                        hidewarn: false,\n                    }\n                };\n            },\n            methods: {\n                onDrop(event) {\n                    this.hover.component = null;\n                    this.hover.type = null;\n                    debug.info(event);\n                    const self = this;\n                    if(event.type.item) {\n                        let item = event.data;\n\n                        // To avoid weird visuals with the lines,\n                        // we add the item to the proper place in the front-end first\n                        item.layer = this.layer;\n                        item.slot = this.slotindex;\n                        self.value.push(item);\n                        self.$emit(\"input\",self.value);\n\n                        // then on the next tick, we inform the back end\n                        // Since moving things around has never been unsuccessful, unless you have other problems,\n                        // it's better to have nice visuals.\n                        self.relocateStudyItem(item).done(()=>{\n                            if(this.$refs.timingChecker){\n                                this.$refs.timingChecker.validate_course_period();\n                            }\n                        });\n                    }\n                    else if(event.type.component){\n                        debug.info(\"Adding new component\");\n                        if(event.type.type == \"gradable\"){\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"layer\" : self.layer,\n                                    \"type\": 'course',\n                                    \"details\": {\n                                        \"competency_id\": null,\n                                        'conditions':'',\n                                        'course_id':event.data.id,\n                                        'badge_id':null,\n                                        'continuation_id':null,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n\n                                    // call the validate period function on next tick,\n                                    // since it paints the item in the slot first\n                                    this.$nextTick(() => {\n                                        if(this.$refs.timingChecker){\n                                            this.$refs.timingChecker.validate_course_period();\n                                        }\n                                    });\n                                });\n                            }).fail(notification.exception);\n                        }\n                        else  if(event.type.type == \"filter\") {\n                            debug.info(\"Adding new filter compenent\");\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"type\": event.data.type,\n                                    \"details\":{\n                                        \"badge_id\": event.data.badge?event.data.badge.id:undefined,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    item.layer = this.layer;\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n                                });\n                            }).fail(notification.exception);\n                        }\n                    }\n                },\n                onCut(event) {\n                    const self=this;\n                    let id = event.data.id;\n                    for(let i = 0; i < self.value.length; i++){\n                        if(self.value[i].id == id){\n                            self.value.splice(i, 1); i--;\n                            break; // just remove one\n                        }\n                    }\n                    // Do something to signal that this item has been removed\n                    this.$emit(\"input\",this.value);\n                },\n                relocateStudyItem(item){\n                    const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};\n                    return call([{\n                        methodname: 'local_treestudyplan_reorder_studyitems',\n                        args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array\n                    }])[0].fail(notification.exception);\n                },\n                onDragEnter(event){\n                    this.hover.component = event.data;\n                    this.hover.type = event.type;\n                },\n                onDragLeave(){\n                    this.hover.component = null;\n                    this.hover.type = null;\n                },\n                maxSpan(){\n                    // Determine the maximum span for components in this slot\n                    // Used for setting the max in the timing adjustment screen(s)\n                    // And for checking the filter types\n\n                    // Assume this slot is first one available\n                    let freeIndex = this.slotindex;\n                    // Determine last free slot following this one in the layer\n                    for(let i = this.slotindex + 1; i <= this.page.periods; i++){\n                        if(this.line.slots && this.line.slots[i] && this.line.slots[i].courses){\n                            const clist = this.line.slots[i].courses;\n                            const flist = this.line.slots[i-1].filters; // next filter is in the same slot\n                            let busy = false;\n                            for(const ix in clist) {\n                                if( clist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n                            for(const ix in flist) {\n                                if( flist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n\n                            if(! busy) {\n                                // slot is free in this layer\n                                freeIndex = i;\n                            } else {\n                                break; // stop checking next slots\n                            }\n\n                        } else {\n                            break; // stop processing\n                        }\n                    }\n                    // calculate span from that\n                    return freeIndex - this.slotindex + 1;\n\n                },\n                makeType(item){\n                    return {\n                        item: true,\n                        component: false,\n                        span: item.span,\n                        type: this.type,\n                    };\n                },\n                checkType(type) {\n                    if(type.type == this.type){\n                        if(type == 'filter'){\n                             return true;\n                        } else if(type.span <= this.maxSpan()){\n                            return true;\n                        } else {\n                            return false;\n                        }\n                    } else {\n                        return false;\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')\n                         + (current?'current ':' ')\"\n                :data-studyline=\"line.id\" ref=\"main\"\n                :style='spanCss'\n                ><drag v-if=\"item\"\n                    :key=\"item.id\"\n                    class=\"t-slot-item\"\n                    :data=\"item\"\n                    :type=\"makeType(item)\"\n                    @cut=\"onCut\"\n                        ><t-item\n                            @deleted=\"onCut\"\n                            v-model=\"value[itemidx]\"\n                            :plan=\"plan\"\n                            :line='line'\n                            :page='page'\n                            :period='period'\n                            :maxspan='maxSpan()'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class=\"'t-slot-drop '+type + (layer > 0?' secondary':' primary')\"\n                    :accepts-type=\"checkType\"\n                    @drop=\"onDrop\"\n                    mode=\"cut\"\n                    @dragenter=\"onDragEnter\"\n                    @dragleave=\"onDragLeave\"\n                ><template v-if=\"hover.component\">\n                        <div v-if=\"hover.type.item\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.component.id\"\n                            ><t-item v-model=\"hover.component\" dummy></t-item\n                            ></div\n                        ><div v-else-if=\"hover.type.type == 'gradable'\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"'course-'+hover.component.id\"\n                            ><t-item-course v-model=\"courseHoverDummy\"></t-item-course></div\n                        ><div v-else-if=\"hover.type.type == 'filter'\"\n                            class=\"t-slot-item feedback\"\n                            key=\"tooldrop\"\n                            ><t-item-junction    v-if=\"hover.component.type == 'junction'\" ></t-item-junction\n                            ><t-item-start       v-else-if=\"hover.component.type == 'start'\"    ></t-item-start\n                            ><t-item-finish      v-else-if=\"hover.component.type == 'finish'\"   ></t-item-finish\n                            ><t-item-badge       v-else-if=\"hover.component.type == 'badge'\"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.type\">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if=\"value && value[itemidx] && value[itemidx].course\"\n                    ref=\"timingChecker\"\n                    :maxspan=\"maxSpan()\"\n                    :page=\"page\"\n                    :period=\"period\"\n                    v-model=\"value[itemidx]\"\n                    ></t-item-timing-checker>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item-timing-checker', {\n            props: {\n                value: {\n                    type: Object, // t-item model\n                },\n                page: {\n                    type: Object, // Studyplan data\n                },\n                period: {\n                    type: Object, // Studyplan data\n                },\n                maxspan: {\n                    type: Number,\n                },\n                hidden: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            computed: {\n                endperiod() {\n                    const endperiodnr = Math.min(this.page.periods,this.period.period + (this.value.span - 1));\n                    return this.page.perioddesc[endperiodnr-1];\n                },\n                course_period_matches() {\n                    const self=this;\n                    if(self.value && self.value.type == 'course'){\n                        self.datechanger.coursespan = datespaninfo(self.value.course.startdate,self.value.course.enddate);\n                        self.datechanger.periodspan = datespaninfo(self.period.startdate,self.endperiod.enddate);\n                        if( self.datechanger.coursespan.first.getTime() == self.datechanger.periodspan.first.getTime()\n                            && self.datechanger.coursespan.last.getTime() == self.datechanger.periodspan.last.getTime()  ){\n                            return true;\n                        }\n                        else {\n                            return false;\n                        }\n                    } else {\n                        debug.warn(\"Timing thing not proper configured\",self.value,self.period,self.maxspan);\n                        return false;\n                    }\n                },\n            },\n            data() {\n                return {\n                    // Create random id to avoid opening the wrong modals\n                    id: Math.floor(Math.random() * Date.now()).toString(16),\n                    text: strings.course_timing,\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        globals: datechanger_globals,\n                    }\n                };\n            },\n            methods: {\n\n                validate_course_period(force) {\n                    const self = this;\n\n                    debug.info(\"Validating course and period\");\n                    if(!(self.course_period_matches)){\n                        debug.info(\"Course timing does not match period timing\");\n\n                        if(self.value.course.canupdatecourse){\n                            if(!self.hidden || !self.datechanger.globals.default){\n                                // Periods do not match, pop up the date change request\n                                this.$bvModal.show('t-course-timing-matching-'+this.id);\n                            } else if (self.datechanger.globals.defaultvalue){\n                                // go for it without asking\n                                self.change_course_period();\n                            }\n                        }\n                        else {\n                            // user is not able to change course timing - show a warning\n                            if(!self.hidden || !self.datechanger.globals.hidewarn){\n                                this.$bvModal.show('t-course-timing-warning-'+this.id);\n                            }\n                        }\n                    }\n                    else {\n                        debug.info(\"Course timing matches period\",self.datechanger);\n                    }\n                },\n                change_course_period() {\n                    const self=this;\n                    // Save the state\n                    if(self.datechanger.globals.default){\n                        self.datechanger.globals.defaultvalue = true;\n                    }\n                    return call([{\n                        methodname: 'local_treestudyplan_course_period_timing',\n                        args: { period_id: self.period.id,\n                                course_id: this.value.course.id,\n                                span: this.value.span,\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.course.startdate = response.startdate;\n                        self.value.course.enddate = response.enddate;\n                        self.value.course.timing = response.timing;\n                        self.$emit(\"input\",self.value);\n                    });\n                },\n                change_span(span) {\n                    const self=this;\n                    return call([{\n                        methodname: 'local_treestudyplan_set_studyitem_span',\n                        args: { id: self.value.id,\n                                span: span\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.span = response.span;\n                        self.$emit('input',self.value);\n                        self.$nextTick(() => {\n                            self.validate_course_period();\n                        });\n                    } );\n                },\n                format_duration(dsi){\n                    let s = \"\";\n                    if(dsi.years == 1){ s += `1 ${this.text.year}, `;}\n                    else if(dsi.years > 1){ s += `${dsi.years} ${this.text.years}, `;}\n                    if(dsi.weeks == 1){ s += `1 ${this.text.week}, `;}\n                    else if(dsi.weeks > 1){ s += `${dsi.weeks} ${this.text.weeks}, `;}\n                    if(dsi.days == 1){ s += `1 ${this.text.day}, `;}\n                    else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}\n\n                    return s.toLocaleLowerCase();\n                },\n            },\n            // To avoid the span creeping in the dom where it shouldn't, set display to none if it is hidden\n            // This does not affect the modals, which are rendered outside of this element when needed\n            template: `\n            <div :class=\"'t-item-timing-checker'\" :style=\"hidden?'display: none ':''\">\n                <template v-if=\"!hidden\" >\n                    <span class=\"mr-1\" v-if=\"course_period_matches\">\n                        <i  class=\"text-success fa fa-calendar-check-o\"\n                            v-b-tooltip.hover.topright :title=\"text.timing_ok\"\n                        ></i>\n                    </span>\n                    <span class=\"mr-1\" v-else>\n                        <a  href='#' @click=\"validate_course_period()\" class=\"text-warning\"\n                            v-b-tooltip.hover.bottomleft :title=\"text.timing_off\"\n                            ><i class=\"fa fa-calendar-times-o\"\n                            ></i\n                            ><i class=\"fa fa-question-circle text-black-50\"\n                                style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class=\"ml-1\" v-b-tooltip.hover.bottomleft :title=\"text.periodspan_desc\"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=\"\"\n                            size=\"sm\" @change=\"change_span\" v-model=\"value.span\">\n                            <b-form-select-option v-for=\"(n,i) in maxspan\" :value='n' :key='i'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class=\"fa fa-question-circle text-black-50\"\n                            style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id=\"'t-course-timing-matching-'+this.id\"\n                    size=\"lg\"\n                    :title=\"text.title\"\n                    @ok=\"change_course_period\"\n                    :ok-title=\"text.yes\"\n                    ok-variant=\"danger\"\n                    :cancel-title=\"text.no\"\n                    cancel-variant=\"primary\"\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.default\">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id=\"'t-course-timing-warning-'+this.id\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.title\"\n                    :ok-title=\"text.yes\"\n                    ok-only\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.hidewarn\">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                dummy :{\n                    type: Boolean,\n                    default() { return false;},\n                },\n                plan: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                line: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                page: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                period: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;},\n                },\n            },\n            data() {\n                return {\n                    dragLine: null,\n                    dragEventListener: null,\n                    deleteMode: false,\n                    condition_options: string_keys.conditions,\n                    text: strings.item_text,\n                    showContext: false,\n                    lines: [],\n                };\n            },\n            methods: {\n                dragStart(event){\n                    // Add line between start point and drag image\n                    this.deleteMode = false;\n                    let start = document.getElementById('studyitem-'+this.value.id);\n                    let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.position.x+'px';\n                    dragelement.style.top = event.position.y+'px';\n                    this.dragLine = new SimpleLine(start,dragelement,{\n                            color: \"#777\",\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    // Add separate event listener to reposition mouse move\n                    document.addEventListener(\"mousemove\",this.onMouseMove);\n                },\n                dragEnd(){\n                    if(this.dragLine !== null) {\n                        this.dragLine.remove();\n                    }\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.removeProperty('left');\n                    dragelement.style.removeProperty('top');\n                    dragelement.style.removeProperty('position');\n                    document.removeEventListener(\"mousemove\",this.onMouseMove);\n                },\n                onMouseMove: function(event){\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.clientX+'px';\n                    dragelement.style.top = event.clientY+'px';\n                    // line will follow automatically\n                },\n                onDrop(event){\n                    let from_id = event.data.id;\n                    let to_id = this.value.id;\n                    this.redrawLines();\n                    call([{\n                        methodname: 'local_treestudyplan_connect_studyitems',\n                        args: { 'from_id': from_id, 'to_id': to_id }\n                    }])[0].done((response)=>{\n                        let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};\n                        ItemEventBus.$emit(\"createdConnection\",conn);\n                        this.value.connections.in.push(conn);\n                    }).fail(notification.exception);\n                },\n                redrawLine(conn){\n                    const lineColor = \"var(--success)\";\n                    const start = document.getElementById(`studyitem-${conn.from_id}`);\n                    const end = document.getElementById(`studyitem-${conn.to_id}`);\n\n                    // delete old line\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                    // create a new line if the start and finish items are visible\n                    if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n                        this.lines[conn.to_id] = new SimpleLine( start,end,{\n                            color: lineColor,\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    }\n\n                },\n                deleteLine(conn){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_disconnect_studyitems',\n                        args: { 'from_id': conn.from_id, 'to_id': conn.to_id }\n                    }])[0].done((response)=>{\n                        if(response.success){\n                            this.removeLine(conn);\n                            // send disconnect event on message bus, so the connection on the other end can delete it too\n                            ItemEventBus.$emit(\"connectionDisconnected\",conn);\n                            // Remove connection from our outgoing list\n                            let index = self.value.connections.out.indexOf(conn);\n                            self.value.connections.out.splice(index, 1);\n                        }\n                    }).fail(notification.exception);\n                },\n                highlight(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--danger)\",});\n                    }\n                },\n                normalize(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--success)\",});\n                    }\n                },\n                updateItem() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                'continuation_id': this.value.continuation_id,}\n                    }])[0].fail(notification.exception);\n                },\n                doShowContext(event) {\n                    if(this.hasContext){\n                        this.showContext=true;\n                        event.preventDefault();\n                    }\n                },\n                redrawLines(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n\n                // EVENT LISTENERS\n                onCreatedConnection(conn){\n                    if(conn.from_id == this.value.id){\n                        this.value.connections.out.push(conn);\n                        this.redrawLine(conn);\n                    }\n                },\n                // Listener for the signal that a connection was removed by the outgoing item\n                onRemovedConnection(conn){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.in){\n                            let c_in = this.value.connections.in[i];\n                            if(conn.id == c_in.id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n                // Listener for reposition events\n                // When an item in the list is repositioned, all lines need to be redrawn\n                onRePositioned(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n                // When an item is disPositioned - (temporarily) removed from the list,\n                // all connections need to be deleted.\n                onDisPositioned(re_id){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == re_id){\n                                this.removeLine(conn);\n                            }\n                        }\n                    }\n                },\n\n                // When an item is deleted\n                // all connections to/from that item need to be cleaned up\n                onItemDeleted(item_id){\n                    const self = this;\n                    if(this.value.connections && this.value.connections.out){\n                        for(const i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == item_id){\n                                self.removeLine(conn);\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                    if(this.value.connections && this.value.connections.in){\n                        for(const i in this.value.connections.in){\n                            let conn = this.value.connections.in[i];\n                            if(conn.from_id == item_id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n\n                onRedrawLines(){\n                    this.redrawLines();\n                },\n\n                removeLine(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                },\n                deleteItem(){\n                    const self = this;\n                    const msgparams = {\n                        item: this.text['type_' + this.value.type].toLocaleLowerCase(),\n                        name: (this.value.type=='course')?this.value.course.displayname:\"\",\n                        line: (this.line) ? this.line.name : \"\",\n                        period: (this.period) ? this.period.fullname : this.plan.name,\n                    };\n\n                    this.$bvModal.msgBoxConfirm(strformat(this.text.item_delete_message, msgparams), {\n                        okVariant : 'danger',\n                        okTitle : this.text.ok,\n                        cancelTitle: this.text.cancel,\n                    }).then(value => {\n                        if ( value ) {\n                            // Confirmed to delete.\n                            call([{\n                                methodname: 'local_treestudyplan_delete_studyitem',\n                                args: { 'id': self.value.id, }\n                            }])[0].done(function(response){\n                                if(response.success == true){\n                                    self.$emit(\"deleted\",{ data: self.value });\n                                }\n                            }).fail(notification.exception);\n                        }\n                    }).catch(err => {\n                        debug.console.error(err);\n                    });\n                }\n\n\n            },\n            computed: {\n                hasConnectionsOut() {\n                    return !([\"finish\",].includes(this.value.type));\n                },\n                hasConnectionsIn() {\n                    return !([\"start\",].includes(this.value.type));\n                },\n                hasContext() {\n                    return ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n                // Add event listeners on the message bus\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n                if(!this.dummy){\n\n                    // Listener for the signal that a new connection was made and needs to be drawn\n                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                    ItemEventBus.$on('createdConnection', this.onCreatedConnection);\n                    // Listener for the signal that a connection was removed by the outgoing item\n                    ItemEventBus.$on('removedConnection', this.onRemovedConnection);\n                    // Listener for reposition events\n                    // When an item in the list is repositioned, all lines need to be redrawn\n                    ItemEventBus.$on('rePositioned', this.onRePositioned);\n                    // When an item is disPositioned - (temporarily) removed from the list,\n                    // all connections need to be deleted.\n                    ItemEventBus.$on('disPositioned', this.onDisPositioned);\n                    // When an item is deleted\n                    // all connections to/from that item need to be cleaned up\n                    ItemEventBus.$on('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$on('redrawLines', this.onRedrawLines);\n\n\n                }\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n\n                if(!this.dummy)\n                {\n                    this.redrawLines();\n                    setTimeout(()=>{\n                        ItemEventBus.$emit(\"rePositioned\",this.value.id);\n                    },10);\n                }\n            },\n            beforeDestroy(){\n                if(!this.dummy) {\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.removeLine(conn);\n                    }\n                    ItemEventBus.$emit(\"disPositioned\",this.value.id);\n\n                    // Remove event listeners\n                    ItemEventBus.$off('createdConnection', this.onCreatedConnection);\n                    ItemEventBus.$off('removedConnection', this.onRemovedConnection);\n                    ItemEventBus.$off('rePositioned', this.onRePositioned);\n                    ItemEventBus.$off('disPositioned', this.onDisPositioned);\n                    ItemEventBus.$off('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$off('redrawLines', this.onRedrawLines);\n                }\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"t-item-base\" :id=\"'studyitem-'+value.id\">\n                <t-item-course\n                    v-if=\"value.type == 'course'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                    :plan='plan'\n                    :page='page'\n                    :period='period'\n                    :maxspan='maxspan'\n                ></t-item-course>\n                <t-item-junction\n                    v-if=\"value.type == 'junction'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-junction>\n                <t-item-start\n                    v-if=\"value.type == 'start'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-start>\n                <t-item-finish\n                    v-if=\"value.type == 'finish'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if=\"value.type == 'badge'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if=\"value.type == 'invalid'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-invalid>\n                <drop v-if='!dummy && hasConnectionsIn' accepts-type=\"linestart\"\n                    :id=\"'t-item-cend-'+value.id\"\n                    class=\"t-item-connector-end\"\n                    mode=\"copy\"\n                    @drop=\"onDrop\"\n                    ><svg width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg></drop>\n                <drag v-if='!dummy && hasConnectionsOut' type=\"linestart\"\n                    :id=\"'t-item-cstart-'+value.id\"\n                    :class=\"'t-item-connector-start ' + ((deleteMode&&value.connections.out.length)?'deleteMode':'')\"\n                    :data=\"value\"\n                    @dragstart=\"dragStart\"\n                    @dragend=\"dragEnd\"\n                    @click=\"deleteMode = (value.connections.out.length)?(!deleteMode):false\"\n                    >\n                    <svg  width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg>\n                    <template v-slot:drag-image=\"{data}\"> <i :id=\"'t-item-cdrag-'+value.id\" class=\"fa\"></i>\n                    </template>\n                </drag>\n                <div class=\"deletebox\" v-if=\"deleteMode && value.connections.out.length > 0\"\n                    >\n                    <a v-for=\"conn in value.connections.out\"\n                        @click=\"deleteLine(conn)\"\n                        @mouseenter=\"highlight(conn)\"\n                        @mouseleave=\"normalize(conn)\"\n                        class=\"t-connection-delete text-danger\"\n                        :title=\"conn.id\">\n                        <i class=\"fa fa-trash\"></i>\n                    </a>\n                </div>\n                <a  v-if=\"hasContext\" class=\"t-item-config\"\n                    v-b-modal=\"'t-item-config-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal no-body class=\"\"\n                    :id=\"'t-item-config-'+value.id\"\n                    :title=\"text['item_configuration']\"\n                    scrollable\n                    ok-only\n                    class=\"t-item-contextview b-modal-justify-footer-between\"\n                >\n                    <b-form-group\n                        v-if=\"value.type != 'start'\"\n                        :label=\"text.select_conditions\"\n                    >\n                        <b-form-select size=\"sm\"\n                            @input=\"updateItem\"\n                            v-model=\"value.conditions\"\n                            :options=\"condition_options\"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer=\"{ ok, cancel, hide }\" >\n                    <a href='#' @click='deleteItem()' class=\"text-danger\"\n                        ><i class=\"fa fa-trash\"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-invalid', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    text: strings.invalid,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class=\"t-item-invalid\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"t-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{text.error}}\n                            <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course', {\n            props: {\n                value:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                plan:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // PAge data\n                    default() { return null;}\n                },\n                period: {\n                    type: Object, // Period data\n                    default() { return null;}\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;}\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useItemConditions() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined){\n                        return this.plan.aggregation_info.useItemConditions;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n\n                configurationState(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"t-configured-ok\";\n                    } else {\n                        return \"t-configured-alert\";\n                    }\n                },\n\n                configurationIcon(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"check\";\n                    } else {\n                        return \"exclamation-circle\";\n                    }\n                },\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n\n            },\n            methods: {\n                hasGrades() {\n                    if(this.value.course.grades && this.value.course.grades.length > 0){\n                        for(const g of this.value.course.grades){\n                            if(g.selected){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                hasCompletions() {\n                    if(this.value.course.completion && this.value.course.completion.conditions) {\n                        for(const cgroup of this.value.course.completion.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                updateConditions() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div class=\"t-item-course\">\n            <b-card no-body >\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'t-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body >\n                            <a  class=\"t-item-course-config\"\n                                v-b-modal=\"'t-item-course-config-'+value.id\"\n                                href=\"#\" @click.prevent=\"\"\n                                ><i :class=\"'fa fa-'+configurationIcon+' ' + configurationState\"></i></a>\n                            <a  v-b-modal=\"'t-item-course-config-'+value.id\"\n                                :id=\"'t-item-course-details-'+value.id\"\n                                :href=\"'/course/view.php?id='+value.course.id\"\n                                @click.prevent.stop=\"\">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=\"\"\n                    :id=\"'t-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    size=\"lg\"\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <a v-if='!!value.course.completion'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.shortname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class=\"mt-1\"\n                                :maxspan=\"maxspan\"\n                                :page=\"page\"\n                                :period=\"period\"\n                                v-model=\"value\"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value' :plan=\"plan\"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n\n        Vue.component('t-item-course-grades', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'plan' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                selectedgrades(){\n                    let list = [];\n                    for(let ix in this.value.course.grades){\n                        let g = this.value.course.grades[ix];\n                        if(g.selected){\n                            list.push(g);\n                        }\n                    }\n                    return list;\n                },\n            },\n            methods: {\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div>\n                <b-form-group\n                    :label=\"text.select_grades\"\n                    ><ul class=\"t-item-module-children\">\n                        <li class=\"t-item-course-gradeinfo\">\n                            <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                            ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                        </li>\n                        <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                            <b-form-checkbox inline\n                                @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                ></b-form-checkbox>\n                            <span :title=\"g.typename\" v-html=\"g.icon\"></span>\n                            <s-edit-mod\n                                :title=\"value.course.fullname\"\n                                @saved=\"(fd) => g.name = fd.get('name')\"\n                                v-if=\"g.cmid > 0\"\n                                :cmid=\"g.cmid\"\n                                :coursectxid=\"value.course.ctxid\"\n                                genericonly><span v-html=\"g.name\"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course-completion',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                course: {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            created(){\n                const self = this;\n                // Get text strings for condition settings\n                let stringkeys = [];\n                for(const key in  this.text){\n                    stringkeys.push({ key: key, component: 'local_treestudyplan'});\n                }\n                get_strings(stringkeys).then(function(strings){\n                    let i = 0;\n                    for(const key in  self.text){\n                        self.text[key] = strings[i];\n                        i++;\n                    }\n                });\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"complete\":\n                            return \"check-circle\";\n                        case \"complete-pass\":\n                            return \"check-circle\";\n                        case \"complete-fail\":\n                            return \"times-circle\";\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                    }\n                },\n\n                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n\n        /************************************\n        *                                  *\n        * Toolbox list components          *\n        *                                  *\n        ************************************/\n        Vue.component('t-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return { badge: {}};},\n                },\n            },\n            data() {\n                return {\n                    txt: strings,\n                    text: strings.item_text,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-badge t-item-filter' v-b-tooltip.hover :title=\"value.badge.name\">\n                <svg class=\"t-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"/>\n                </svg>\n                <a class=\"t-item-config badge\"\n                v-b-modal=\"'t-item-badge-details-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal class=\"\"\n                    :id=\"'t-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            `,\n        });\n\n        Vue.component('t-coursecat-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <ul class=\"t-coursecat-list\">\n                <t-coursecat-list-item\n                    v-for=\"coursecat,idx in value\"\n                    v-model=\"value[idx]\"\n                    :key=\"coursecat.id\"></t-coursecat-list-item>\n            </ul>\n            `,\n        });\n\n        Vue.component('t-coursecat-list-item',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    loading: false,\n\n                };\n            },\n            computed: {\n                showSpinner() {\n                    return this.canLoadMore();\n                },\n                hasDetails() {\n                    return (this.value.haschildren || this.value.hascourses);\n                }\n\n            },\n            methods: {\n                canLoadMore() {\n                    return (this.value.haschildren && (!this.value.children || this.value.children.length == 0)) ||\n                        (this.value.hascourses && (!this.value.courses || this.value.courses.length == 0));\n                },\n                onShowDetails(){\n                    const self = this;\n                    if(this.canLoadMore()) {\n                        call([{\n                            methodname: 'local_treestudyplan_get_category',\n                            args: { \"id\": this.value.id}\n                        }])[0].done(function(response){\n                            self.$emit('input', response);\n                        }).fail(notification.exception);\n                    }\n                }\n            },\n            template: `\n            <li class=\"t-coursecat-list-item\">\n                <span v-if=\"hasDetails\" v-b-toggle=\"'coursecat-'+value.id\">\n                    <i class=\"when-closed fa fa-caret-right\"></i>\n                    <i class=\"when-open fa fa-caret-down\"></i>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if=\"hasDetails\" :id=\"'coursecat-'+value.id\"\n                    @show=\"onShowDetails\" :visible=\"!!(value.children) || !!(value.courses)\">\n                    <b-spinner class=\"ml-4\" v-if=\"showSpinner\" small variant=\"primary\"></b-spinner>\n                    <t-coursecat-list v-if=\"value.children\" v-model=\"value.children\"></t-coursecat-list>\n                    <t-course-list v-if=\"value.courses\" v-model=\"value.courses\"></t-course-list>\n                </b-collapse>\n            </li>\n            `,\n        });\n\n        Vue.component('t-course-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n                makeType(){\n                    return {\n                        item: false,\n                        component: true,\n                        span: 1, //TODO: Detect longer courses and give them an appropriate span\n                        type: 'gradable',\n                    };\n                },\n            },\n            template: `\n            <ul class=\"t-course-list\">\n                <li class=\"t-course-list-item\" v-for=\"course in value\" :key=\"course.id\">\n                    <drag\n                        class=\"draggable-course\"\n                        :data=\"course\"\n                        :type=\"makeType()\"\n                        @cut=\"\"\n                    >\n                    <i class=\"t-course-list-item fa fa-book\"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            `,\n        });\n\n    },\n};\n"],"names":["STUDYPLAN_EDITOR_FIELDS","PERIOD_EDITOR_FIELDS","datechanger_globals","default","defaultchoice","hidewarn","install","Vue","use","TSComponents","mFormComponents","debug","Debugger","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","string_keys","conditions","value","textkey","strings","studyplan_text","studyline_editmode","toolbox_toggle","editmode_modules_hidden","studyline_add","add$core","edit$core","studyline_name","studyline_name_ph","studyline_shortname","studyline_shortname_ph","studyline_color","associations","associated_cohorts","associated_users","studyline_edit","studyplan_name","studyplan_name_ph","studyplan_shortname","studyplan_shortname_ph","studyplan_description","studyplan_description_ph","studyplan_idnumber","studyplan_idnumber_ph","studyplan_slots","studyplan_startdate","studyplan_enddate","studyplan_advanced","advanced_tools","confirm_cancel","confirm_ok","success$core","error$core","advanced_converted","advanced_skipped","advanced_failed","advanced_locked","advanced_multiple","advanced_error","advanced_tools_heading","advanced_warning_title","advanced_warning","advanced_pick_scale","advanced_course_manipulation_title","advanced_force_scale_title","advanced_force_scale_desc","advanced_force_scale_button","advanced_disable_autoenddate_title","advanced_disable_autoenddate_desc","advanced_disable_autoenddate_button","advanced_confirm_header","advanced_force_scale_confirm","advanced_import","advanced_export","advanced_export_csv","advanced_import_from_file","advanced_purge","advanced_purge_expl","advanced_cascade_cohortsync_title","advanced_cascade_cohortsync_desc","advanced_cascade_cohortsync","studyplan_edit","studyplan_add","studyplanpage_add","studyplanpage_edit","period_edit","edit","fullname","shortname","startdate","enddate","course_timing","title","desc","question","warning","timing_ok","timing_off","course","period","yes","no","duration","years","year","weeks","week","days","day","rememberchoice","hidewarning","periodspan","periods","periodspan_desc","studyplan_associate","associate_cohorts","associate_users","add_association","delete_association","associations_empty","associations_search","cohorts","users","selected","name","context","item_text","select_conditions","item_configuration","ok","delete","item_delete_message","type_course","type_junction","type_start","type_finish","type_badge","type_invalid","item_course_text","select_grades","coursetiming_past","coursetiming_present","coursetiming_future","grade_include","grade_require","cancel","invalid","error","completion","completion_completed","completion_incomplete","aggregation_all","aggregation_any","aggregation_overall_all","aggregation_overall_any","completion_not_configured","configure_completion","badge","share_badge","dateissued","dateexpire","badgeinfo","component","props","type","Object","data","force_scales","selected_scale","result","text","created","mounted","updated","computed","scales","id","disabled","this","concat","advanced","methods","disable_autoenddate","self","methodname","args","studyplan_id","done","response","$bvModal","msgBoxConfirm","success","msg","fail","notification","exception","force_scales_start","okVariant","okTitle","cancelTitle","then","scale_id","export_plan","format","undefined","includes","content","import_studylines","filename","location","reload","purge_studyline","force","cascade_cohortsync","msgBoxOk","modal_close","template","String","Number","planSaved","updatedplan","info","mode","$emit","moved_from","context_id","moved_to","moved","pages","updatedpage","page","show","config","userfields","key","cohortfields","association","loading","search","associated","showModal","loadAssociations","cohortOptionModel","c","path","join","userOptionModel","u","firstname","lastname","map","searchCohorts","searchtext","like","exclude_id","cohortAssociate","requests","searchselected","i","r","push","cohort_id","cohortDisassociate","associatedselected","searchUsers","userAssociate","user_id","userDisassociate","editdata","Date","getFullYear","editStart","editFinish","refresh","add_day","date","sub_day","create","studyline","toolbox_shown","editmode","color","original","studyplan","description","slots","aggregation","aggregation_config","aggregation_info","useRequiredGrades","useItemCondition","cache","linelayers","selectedpageindex","emptyline","filterslots","courseslots","studylines","$root","selectedpage","columns","columns_stylerule","s","trashbin_accepts","item","countLineLayers","line","timestamp","maxLayer","ix","courses","layer","filters","slotsempty","Array","isArray","count","movedStudyplan","plan","from","to","addStudyLine","newlineinfo","editLineStart","assign","editLineFinish","editedline","originalline","deleteLine","param","modalresponse","index","indexOf","splice","reorderLines","event","lines","apply","sequence","idx","deletePlan","deleteStudyItem","source","showslot","layeridx","forGradable","list","span","periodEdited","pi","prev","$refs","next","toolbox_switched","pagecreated","selectedpageChanged","newTabIndex","prevTabIndex","layers","layerHeights","$on","onLineHeightChange","lineid","layerid","newheight","main","items","document","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","deletable","editable","onEdit","onDelete","slotindex","resizeListener","ResizeObserver","size","observe","unmounted","disconnect","slotkey","itemidx","itm","listtype","dragacceptlist","courseHoverDummy","hover","current","now","pstart","pend","spanCss","datechanger","coursespan","onDrop","slot","relocateStudyItem","timingChecker","validate_course_period","$nextTick","onCut","iteminfo","onDragEnter","onDragLeave","maxSpan","freeIndex","clist","flist","busy","makeType","checkType","maxspan","hidden","Boolean","endperiod","endperiodnr","Math","min","perioddesc","course_period_matches","first","getTime","last","warn","floor","random","toString","globals","canupdatecourse","defaultvalue","change_course_period","period_id","course_id","timing","change_span","format_duration","dsi","toLocaleLowerCase","dummy","dragLine","dragEventListener","deleteMode","condition_options","showContext","dragStart","start","getElementById","dragelement","position","left","x","top","y","SimpleLine","gravity","end","addEventListener","onMouseMove","dragEnd","remove","removeProperty","removeEventListener","clientX","clientY","from_id","to_id","redrawLines","conn","connections","in","redrawLine","removeLine","out","highlight","setConfig","normalize","updateItem","continuation_id","doShowContext","hasContext","preventDefault","onCreatedConnection","onRemovedConnection","c_in","onRePositioned","onDisPositioned","re_id","onItemDeleted","item_id","onRedrawLines","deleteItem","msgparams","displayname","catch","err","console","hasConnectionsOut","hasConnectionsIn","setTimeout","beforeDestroy","$off","beforeUpdate","useItemConditions","configurationState","hasGrades","hasCompletions","configurationIcon","noenddate","grades","g","cgroup","includeChanged","newValue","required","requiredChanged","updateConditions","selectedgrades","guestmode","stringkeys","completion_icon","completion_tag","txt","showSpinner","canLoadMore","hasDetails","haschildren","hascourses","children","onShowDetails"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index 67573f5..6baa059 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -128,6 +128,15 @@ export default {
                 required_goal: "required_goal",
                 student_from_plan_enrolled: "student_from_plan_enrolled",
                 students_from_plan_enrolled: "students_from_plan_enrolled",
+            },
+            pageinfo: {
+                edit: 'period_edit',
+                fullname: 'studyplan_name',
+                shortname: 'studyplan_shortname',
+                startdate: 'studyplan_startdate',
+                enddate: 'studyplan_enddate',
+                description: 'studyplan_description',
+                duration: 'studyplan_duration'
             }
 
         });
@@ -303,29 +312,34 @@ export default {
             },
             data() {
                 return {
+                    selectedpageindex: 0,
+                    text: strings.pageinfo,
                 };
             },
             computed: {
-                columns() {
-                    return 1+ (this.page.periods * 2);
+
+                selectedpage() {
+                    return this.value.pages[this.selectedpageindex];
                 },
-                columns_stylerule() {
+            },
+            methods: {
+                pageduration(page){
+                    return format_date(page.startdate,false) + " - " + format_date(page.enddate,false);
+                },
+                columns(page) {
+                    return 1+ (page.periods * 2);
+                },
+                columns_stylerule(page) {
                     // Uses css variables, so width for slots and filters can be configured in css
                     let s = "grid-template-columns: var(--studyplan-filter-width)"; // use css variable here
-                    for(let i=0; i<this.page.periods;i++){
+                    for(let i=0; i<page.periods;i++){
                         s+= " var(--studyplan-course-width) var(--studyplan-filter-width)";
                     }
                     return s+";";
                 },
-                page() {
-                    //FIXME: Replace this when actual page management is implemented
-                    return this.value.pages[0];
-                },
-            },
-            methods: {
-                countLineLayers(line){
+                countLineLayers(line,page){
                     let maxLayer = -1;
-                    for(let i = 0; i <= this.page.periods; i++){
+                    for(let i = 0; i <= page.periods; i++){
                         const slot = line.slots[i];
                         // Determine the amount of used layers in a studyline slit
                         for(const ix in line.slots[i].courses){
@@ -343,11 +357,11 @@ export default {
                     }
                     return (maxLayer >= 0)?(maxLayer+1):1;
                 },
-                showslot(line,index, layeridx, type){
+                showslot(page,line,index, layeridx, type){
                     // check if the slot should be hidden because a previous slot has an item with a span
                     // so big that it hides this slot
                     const forGradable = (type == 'gradable')?true:false;
-                    const periods = this.page.periods;
+                    const periods = page.periods;
                     let show = true;
                     for(let i = 0; i < periods; i++){
                         if(line.slots[index-i] && line.slots[index-i].courses){
@@ -370,6 +384,10 @@ export default {
                     }
 
                     return show;
+                },
+                selectedpageChanged(newTabIndex,prevTabIndex) {
+                    const page = this.value.pages[newTabIndex];
+                    scrollCurrentIntoView(this.value.id);
                 }
             },
             mounted() {
@@ -381,76 +399,129 @@ export default {
 
             },
             template: `
-                <div class='r-studyplan-content'>
-                    <!-- First paint the headings-->
-                    <div class='r-studyplan-headings'
-                        ><s-studyline-header-heading></s-studyline-header-heading>
-                        <r-studyline-heading  v-for="(line,lineindex) in page.studylines"
-                            :key="line.id"
-                            v-model="page.studylines[lineindex]"
-                            :layers='countLineLayers(line)+1'
-                            :class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
-                                    + ((lineindex==0)?' first ':' ')
-                                    + ((lineindex==page.studylines.length-1)?' last ':' ')"
-                        ></r-studyline-heading
-                    ></div>
-                    <!-- Next, paint all the cells in the scrollable -->
-                    <div class="r-studyplan-scrollable" >
-                        <div class="r-studyplan-timeline" :style="columns_stylerule">
-                        <!-- add period information -->
-                        <template v-for="(n,index) in (page.periods+1)">
-                            <s-studyline-header-period
-                                v-if="index > 0"
-                                v-model="page.perioddesc[index-1]"
-                                ></s-studyline-header-period>
-                            <div class="s-studyline-header-filter"></div>
+            <div>
+            <b-card no-body>
+                <b-tabs 
+                    v-model='selectedpageindex' 
+                    @activate-tab='selectedpageChanged'
+                    content-class="mt-1">
+                    <b-tab
+                        v-for="(page,pageindex) in value.pages"
+                        :key="page.id"
+                        :title-item-class="'s-studyplanpage-tab '+ page.timing"
+                        ><template #title>
+                            <span v-b-tooltip.hover :title='page.fullname'>{{page.shortname}}</span>
+                            <a href="#" v-b-modal="'studyplanpage-info-'+page.id" variant='info'
+                             v-if='pageindex == selectedpageindex'
+                            ><i class='fa fa-info-circle'></i></a>
                         </template>
+                        
+                        <b-modal
+                            :id="'studyplanpage-info-'+page.id"
+                            scrollable
+                            ok-only
+                            >
+                            <template #modal-title>
+                                {{page.fullname}}
+                            </template>
+                            <b-container>
+                                <b-row>
+                                    <b-col cols="4"><b>{{ text.shortname}}</b></b-col>
+                                    <b-col cols="8">
+                                        {{ page.shortname }}
+                                    </b-col>
+                                </b-row>
+                                <b-row>
+                                    <b-col cols="4"><b>{{ text.duration}}</b></b-col>
+                                    <b-col cols="8">
+                                        {{ pageduration(page) }}
+                                    </b-col>
+                                </b-row>
+                                <b-row v-if="page.description">
+                                    <b-col cols="12"><b>{{ text.description}}</b></b-col>
+                                </b-row>
+                                <b-row v-if="page.description">
+                                    <b-col cols="12">
+                                        <span v-html="page.description"></span>
+                                    </b-col>
+                                </b-row>
+                            </b-container>
+                        </b-modal>
+                        <div v-if="page.studylines.length > 0" class='r-studyplan-content'>
+                            <!-- First paint the headings-->
+                            <div class='r-studyplan-headings'
+                                ><s-studyline-header-heading :identifier="Number(page.id)"></s-studyline-header-heading>
+                                <r-studyline-heading  v-for="(line,lineindex) in page.studylines"
+                                    :key="line.id"
+                                    v-model="page.studylines[lineindex]"
+                                    :layers='countLineLayers(page,line)+1'
+                                    :class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
+                                            + ((lineindex==0)?' first ':' ')
+                                            + ((lineindex==page.studylines.length-1)?' last ':' ')"
+                                ></r-studyline-heading
+                            ></div>
+                            <!-- Next, paint all the cells in the scrollable -->
+                            <div class="r-studyplan-scrollable" >
+                                <div class="r-studyplan-timeline" :style="columns_stylerule(page)">
+                                <!-- add period information -->
+                                <template v-for="(n,index) in (page.periods+1)">
+                                    <s-studyline-header-period
+                                        v-if="index > 0"
+                                        v-model="page.perioddesc[index-1]"
+                                        :identifier="Number(page.id)"
+                                        ></s-studyline-header-period>
+                                    <div class="s-studyline-header-filter"></div>
+                                </template>
 
-                        <!-- Line by line add the items -->
-                        <!-- The grid layout handles putting it in rows and columns -->
-                        <template v-for="(line,lineindex) in page.studylines"
-                            ><template v-for="(layernr,layeridx) in countLineLayers(line)"
-                                ><template v-for="(n,index) in (page.periods+1)"
-                                    ><r-studyline-slot
-                                        v-if="index > 0 && showslot(line, index, layeridx, 'gradable')"
-                                        type='gradable'
-                                        v-model="line.slots[index].courses"
-                                        :key="'c-'+lineindex+'-'+index+'-'+layernr"
-                                        :slotindex="index"
-                                        :line="line"
-                                        :plan="value"
-                                        :page="page"
-                                        :period="page.perioddesc[index-1]"
-                                        :guestmode='guestmode'
-                                        :teachermode='teachermode'
-                                        :layer="layeridx"
-                                        :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
-                                                + ((lineindex==0 && layernr==1)?' first ':' ')
-                                                + ((lineindex==page.studylines.length-1)?' last ':' ')"
-                                    ></r-studyline-slot
-                                    ><r-studyline-slot
-                                        v-if="showslot(line, index, layeridx, 'gradable')"
-                                        type='filter'
-                                        v-model="line.slots[index].filters"
-                                        :teachermode='teachermode'
-                                        :key="'f-'+lineindex+'-'+index+'-'+layernr"
-                                        :slotindex="index"
-                                        :line="line"
-                                        :plan="value"
-                                        :page="page"
-                                        :layer="layeridx"
-                                        :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
-                                                + ((lineindex==0 && layernr==1)?' first ':'')
-                                                + ((lineindex==page.studylines.length-1)?' last ':' ')
-                                                + ((index==page.periods)?' rightmost':'')"
-                                        >
-                                    </r-studyline-slot
+                                <!-- Line by line add the items -->
+                                <!-- The grid layout handles putting it in rows and columns -->
+                                <template v-for="(line,lineindex) in page.studylines"
+                                    ><template v-for="(layernr,layeridx) in countLineLayers(page,line)"
+                                        ><template v-for="(n,index) in (page.periods+1)"
+                                            ><r-studyline-slot
+                                                v-if="index > 0 && showslot(page,line, index, layeridx, 'gradable')"
+                                                type='gradable'
+                                                v-model="line.slots[index].courses"
+                                                :key="'c-'+lineindex+'-'+index+'-'+layernr"
+                                                :slotindex="index"
+                                                :line="line"
+                                                :plan="value"
+                                                :page="page"
+                                                :period="page.perioddesc[index-1]"
+                                                :guestmode='guestmode'
+                                                :teachermode='teachermode'
+                                                :layer="layeridx"
+                                                :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+                                                        + ((lineindex==0 && layernr==1)?' first ':' ')
+                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')"
+                                            ></r-studyline-slot
+                                            ><r-studyline-slot
+                                                v-if="showslot(page,line, index, layeridx, 'gradable')"
+                                                type='filter'
+                                                v-model="line.slots[index].filters"
+                                                :teachermode='teachermode'
+                                                :key="'f-'+lineindex+'-'+index+'-'+layernr"
+                                                :slotindex="index"
+                                                :line="line"
+                                                :plan="value"
+                                                :page="page"
+                                                :layer="layeridx"
+                                                :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+                                                        + ((lineindex==0 && layernr==1)?' first ':'')
+                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')
+                                                        + ((index==page.periods)?' rightmost':'')"
+                                                >
+                                            </r-studyline-slot
+                                        ></template
+                                    ></template
                                 ></template
-                            ></template
-                        ></template
-                        ></div
-                    ></div
-                ></div>
+                                ></div
+                            ></div
+                        ></div>
+                    </b-tab>
+                </b-tabs>
+            </b-card>
+            </div>
             `,
         });
 
diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index f8049a6..4448b20 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -136,6 +136,8 @@ export default {
             studyplan_edit: {
                 studyplan_edit: 'studyplan_edit',
                 studyplan_add: 'studyplan_add',
+                studyplanpage_add: 'studyplanpage_add',
+                studyplanpage_edit: 'studyplanpage_edit',
             },
             period_edit: {
                 edit: 'period_edit',
@@ -241,6 +243,7 @@ export default {
                     type: Object,
                     default(){ return null;},
                 },
+
             },
             data() {
                 return {
@@ -628,7 +631,7 @@ export default {
                     @saved="planSaved"
                     :variant="variant"
                     :type="type"
-                    :title="(mode == 'create')?text.studyplan_add:text.studyplan_edit"
+                    :title="(mode == 'create')?text.studyplanpage_add:text.studyplanpage_edit"
                     ><slot><i class='fa fa-gear'></i></slot></mform>
             </span>
             `
@@ -1163,6 +1166,15 @@ export default {
                     cache: {
                         linelayers: {},
                     },
+                    selectedpageindex: 0,
+                    emptyline: {
+                        id: -1,
+                        name: '<No study lines defined>',
+                        shortname: '<No study lines>',
+                        color: '#FF0000',
+                        filterslots: [{}],
+                        courseslots: [{}]
+                    }
                 };
             },
             created() {
@@ -1180,7 +1192,9 @@ export default {
                 ItemEventBus.$emit('redrawLines');
             },
             computed: {
-                
+                selectedpage() {
+                    return this.value.pages[this.selectedpageindex];
+                }
             },
             methods: {
                 columns(page) {
@@ -1360,7 +1374,6 @@ export default {
                 deleteStudyItem(event){
                     //const self = this;
                     let item = event.data;
-
                     call([{
                         methodname: 'local_treestudyplan_delete_studyitem',
                         args: { 'id': item.id, }
@@ -1426,6 +1439,15 @@ export default {
                 },
                 pagecreated(page) {
                     this.value.pages.push(page);
+                },
+                selectedpageChanged(newTabIndex,prevTabIndex) {
+                    const page = this.value.pages[newTabIndex];
+
+                    if (page.studylines.length == 0) {
+                        this.edit.studyline.editmode = true;
+                    } else {
+                        this.edit.studyline.editmode = false;
+                    }
                 }
             }
             ,
@@ -1466,214 +1488,227 @@ export default {
                         </span>
                     </div>
                 </div>
-                <b-tabs content-class="mt-1">
-                    <!-- New Tab Button (Using tabs-end slot) -->
-                    <template #tabs-end>
-                        <t-studyplan-page-edit 
-                            :studyplan="value"
-                            v-model="create.page"
-                            type="link"
-                            mode="create"
-                            @created="pagecreated"
-                        ><i class='fa fa-plus'></i></t-studyplan-page-edit>
-                    </template>
-                    <b-tab
-                        v-for="(page,pageindex) in value.pages"
-                        :key="page.id"
-                        >
-                        <template #title>
-                            {{page.shortname}}
+                <b-card no-body>
+                    <b-tabs 
+                        v-model='selectedpageindex' 
+                        @activate-tab='selectedpageChanged'
+                        content-class="mt-1">
+                        <!-- New Tab Button (Using tabs-end slot) -->
+                        <template #tabs-end>
                             <t-studyplan-page-edit 
-                                v-model="value.pages[pageindex]"
                                 :studyplan="value"
+                                v-model="create.page"
                                 type="link"
-                            ></t-studyplan-page-edit>
+                                mode="create"
+                                @created="pagecreated"
+                            ><i class='fa fa-plus'></i></t-studyplan-page-edit>
                         </template>
-                        <div class='t-studyplan-content-edit' v-if="edit.studyline.editmode">
-                            <drop-list
-                                :items="page.studylines"
-                                class="t-slot-droplist"
-                                :accepts-type="'studyline-'+page.id"
-                                xreorder="$event.apply(page.studylines)"
-                                @reorder="reorderLines($event,page.studylines)"
-                                mode="copy"
-                                row
+                        <b-tab
+                            v-for="(page,pageindex) in value.pages"
+                            :key="page.id"
                             >
-                                <template v-slot:item="{item}">
-                                    <drag
-                                        :key="item.id"
-                                        class='t-studyline-drag'
-                                        :data="item"
-                                        :type="'studyline-'+page.id"
-                                        >
-                                        <template v-slot:drag-image>
-                                            <i class="fa fa-arrows text-primary"></i>
-                                        </template>
-                                        <t-studyline-edit
-                                            v-model="item"
-                                            @edit='editLineStart(item)'
-                                            @delete='deleteLine(page,item)'
+                            <template #title>
+                                {{page.shortname}}
+                                <t-studyplan-page-edit 
+                                    v-if="pageindex == selectedpageindex"
+                                    v-model="value.pages[pageindex]"
+                                    :studyplan="value"
+                                    type="link"
+                                ></t-studyplan-page-edit>
+                            </template>
+                            <div class='t-studyplan-content-edit' 
+                                v-if="edit.studyline.editmode">
+                                <drop-list
+                                    :items="page.studylines"
+                                    class="t-slot-droplist"
+                                    :accepts-type="'studyline-'+page.id"
+                                    xreorder="$event.apply(page.studylines)"
+                                    @reorder="reorderLines($event,page.studylines)"
+                                    mode="copy"
+                                    row
+                                >
+                                    <template v-slot:item="{item}">
+                                        <drag
+                                            :key="item.id"
+                                            class='t-studyline-drag'
+                                            :data="item"
+                                            :type="'studyline-'+page.id"
                                             >
-                                            <div v-if="!slotsempty(item.slots)"> {{ text.editmode_modules_hidden}} </div>
-                                        </t-studyline-edit>
-                                    </drag>
-                                </template>
-                            </drop-list>
-                        </div>
-                        <div class='t-studyplan-content' v-else>
-
-                            <!-- Now paint the headings column -->
-                            <div class='t-studyplan-headings'>
-                                <s-studyline-header-heading :identifier='Number(page.id)'></s-studyline-header-heading>
-                                <t-studyline-heading  v-for="(line,lineindex) in page.studylines"
-                                    :key="line.id"
-                                    @resize="headingresized(lineindex,$event)"
-                                    v-model="page.studylines[lineindex]"
-                                    :layers='countLineLayers(line,page)+1'
-                                    :class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
-                                            + ((lineindex==0)?' first ':' ')
-                                            + ((lineindex==page.studylines.length-1)?' last ':' ')"
-                                ></t-studyline-heading>
-                            </div>
-                            <!-- Next, paint all the cells in the scrollable -->
-                            <div class="t-studyplan-scrollable" >
-                                <div class="t-studyplan-timeline" :style="columns_stylerule(page)">
-                                <!-- add period information --> 
-                                <template v-for="(n,index) in (page.periods+1)">
-                                    <s-studyline-header-period
-                                        :identifier='Number(page.id)'
-                                        v-if="index > 0"
-                                        v-model="page.perioddesc[index-1]"
-                                        ><t-period-edit
-                                            :ref="'periodeditor-'+index"
-                                            @edited="periodEdited"
-                                            v-model="page.perioddesc[index-1]"
-                                            :minstart="(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null"
-                                            :maxend="(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null"
-                                        ></t-period-edit
-                                    ></s-studyline-header-period>
-                                    <div class="s-studyline-header-filter"></div>
-                                </template>
-
-                                <!-- Line by line add the items -->
-                                <!-- The grid layout handles putting it in rows and columns -->
-                                <template v-for="(line,lineindex) in page.studylines"
-                                    ><template v-for="(layernr,layeridx) in countLineLayers(line,page)+1"
-                                        ><template v-for="(n,index) in (page.periods+1)"
-                                            >
-                                            <t-studyline-slot
-                                                v-if="index > 0 && showslot(page,line, index, layeridx, 'gradable')"
-                                                type='gradable'
-                                                v-model="line.slots[index].courses"
-                                                :key="'c-'+lineindex+'-'+index+'-'+layernr"
-                                                :slotindex="index"
-                                                :line="line"
-                                                :plan="value"
-                                                :page="page"
-                                                :period="page.perioddesc[index-1]"
-                                                :layer="layeridx"
-                                                :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
-                                                        + ((lineindex==0 && layernr==1)?' first ':' ')
-                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')
-                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')
-                                                        + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')"
-                                            ></t-studyline-slot
-                                            ><t-studyline-slot
-                                                type='filter'
-                                                v-if="showslot(page,line, index, layeridx, 'filter')"
-                                                v-model="line.slots[index].filters"
-                                                :key="'f-'+lineindex+'-'+index+'-'+layernr"
-                                                :slotindex="index"
-                                                :line="line"
-                                                :plan="value"
-                                                :page="page"
-                                                :layer="layeridx"
-                                                :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
-                                                        + ((lineindex==0 && layernr==1)?' first ':'')
-                                                        + ((lineindex==page.studylines.length-1)?' last ':' ')
-                                                        + ((index==page.periods)?' rightmost':'')
-                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')
-                                                        + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')"
+                                            <template v-slot:drag-image>
+                                                <i class="fa fa-arrows text-primary"></i>
+                                            </template>
+                                            <t-studyline-edit
+                                                v-model="item"
+                                                @edit='editLineStart(item)'
+                                                @delete='deleteLine(page,item)'
                                                 >
-                                            </t-studyline-slot
+                                                <div v-if="!slotsempty(item.slots)"> {{ text.editmode_modules_hidden}} </div>
+                                            </t-studyline-edit>
+                                        </drag>
+                                    </template>
+                                </drop-list>
+                            </div>
+                            <div class='t-studyplan-content' v-else>
+                                <!-- Now paint the headings column -->
+                                <div class='t-studyplan-headings'>
+                                    <s-studyline-header-heading :identifier='Number(page.id)'></s-studyline-header-heading>
+                                    <template v-if="page.studylines.length > 0">
+                                        <t-studyline-heading  v-for="(line,lineindex) in page.studylines"
+                                            :key="line.id"
+                                            @resize="headingresized(lineindex,$event)"
+                                            v-model="page.studylines[lineindex]"
+                                            :layers='countLineLayers(line,page)+1'
+                                            :class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
+                                                    + ((lineindex==0)?' first ':' ')
+                                                    + ((lineindex==page.studylines.length-1)?' last ':' ')"
+                                        ></t-studyline-heading>
+                                    </template>
+                                    <t-studyline-heading v-else
+                                        @resize="headingresized(0,$event)"
+                                        
+                                        :layers="1"
+                                        :class="'odd first last'"
+                                    ></t-studyline-heading>
+                                </div>
+                                <!-- Next, paint all the cells in the scrollable -->
+                                <div class="t-studyplan-scrollable" >
+                                    <div class="t-studyplan-timeline" :style="columns_stylerule(page)">
+                                    <!-- add period information --> 
+                                    <template v-for="(n,index) in (page.periods+1)">
+                                        <s-studyline-header-period
+                                            :identifier='Number(page.id)'
+                                            v-if="index > 0"
+                                            v-model="page.perioddesc[index-1]"
+                                            ><t-period-edit
+                                                :ref="'periodeditor-'+index"
+                                                @edited="periodEdited"
+                                                v-model="page.perioddesc[index-1]"
+                                                :minstart="(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null"
+                                                :maxend="(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null"
+                                            ></t-period-edit
+                                        ></s-studyline-header-period>
+                                        <div class="s-studyline-header-filter"></div>
+                                    </template>
+
+                                    <!-- Line by line add the items -->
+                                    <!-- The grid layout handles putting it in rows and columns -->
+                                    <template v-for="(line,lineindex) in page.studylines"
+                                        ><template v-for="(layernr,layeridx) in countLineLayers(line,page)+1"
+                                            ><template v-for="(n,index) in (page.periods+1)"
+                                                >
+                                                <t-studyline-slot
+                                                    v-if="index > 0 && showslot(page,line, index, layeridx, 'gradable')"
+                                                    type='gradable'
+                                                    v-model="line.slots[index].courses"
+                                                    :key="'c-'+lineindex+'-'+index+'-'+layernr"
+                                                    :slotindex="index"
+                                                    :line="line"
+                                                    :plan="value"
+                                                    :page="page"
+                                                    :period="page.perioddesc[index-1]"
+                                                    :layer="layeridx"
+                                                    :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+                                                            + ((lineindex==0 && layernr==1)?' first ':' ')
+                                                            + ((lineindex==page.studylines.length-1)?' last ':' ')
+                                                            + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')
+                                                            + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')"
+                                                ></t-studyline-slot
+                                                ><t-studyline-slot
+                                                    type='filter'
+                                                    v-if="showslot(page,line, index, layeridx, 'filter')"
+                                                    v-model="line.slots[index].filters"
+                                                    :key="'f-'+lineindex+'-'+index+'-'+layernr"
+                                                    :slotindex="index"
+                                                    :line="line"
+                                                    :plan="value"
+                                                    :page="page"
+                                                    :layer="layeridx"
+                                                    :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+                                                            + ((lineindex==0 && layernr==1)?' first ':'')
+                                                            + ((lineindex==page.studylines.length-1)?' last ':' ')
+                                                            + ((index==page.periods)?' rightmost':'')
+                                                            + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')
+                                                            + ((layernr == countLineLayers(line,page)+1)?' newlyr ':' ')"
+                                                ></t-studyline-slot
+                                            ></template
                                         ></template
                                     ></template
-                                ></template
-                                ></div>
+                                    ></div>
+                                </div>
                             </div>
-                        </div>
-                        <div v-if="edit.studyline.editmode" class='t-studyline-add'>
-                            <a href="#" v-b-modal="'modal-add-studyline-'+page.id" @click="false;"
-                                ><i class='fa fa-plus'></i>{{ text.studyline_add }}</a>
-                        </div>
-                        <b-modal
-                            :id="'modal-add-studyline-'+page.id"
-                            size="lg"
-                            :ok-title="text.add$core"
-                            ok-variant="primary"
-                            :title="text.studyline_add"
-                            @ok="addStudyLine(page,create.studyline)"
-                            :ok-disabled="Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0"
-                            >
-                            <b-container>
-                                <b-row>
-                                    <b-col cols="3">{{text.studyline_name}}</b-col>
-                                    <b-col>
-                                        <b-form-input v-model="create.studyline.name" :placeholder="text.studyline_name_ph"></b-form-input>
-                                    </b-col>
-                                </b-row>
-                                <b-row>
-                                    <b-col cols="3">{{text.studyline_shortname}}</b-col>
-                                    <b-col>
-                                    <b-form-input
-                                        v-model="create.studyline.shortname"
-                                        :placeholder="text.studyline_shortname_ph"></b-form-input>
-                                    </b-col>
-                                </b-row>
-                                <b-row>
-                                    <b-col cols="3">{{text.studyline_color}}</b-col>
-                                    <b-col>
-                                        <input type="color" v-model="create.studyline.color" />
-                                        <!-- hsluv-picker v-model="create.studyline.color" horizontal displaysize="175" ></hsluv-picker -->
-                                    </b-col>
-                                </b-row>
-                            </b-container>
-                        </b-modal>
-                        <b-modal
-                            :id="'modal-edit-studyline-'+page.id"
-                            size="lg"
-                            ok-variant="primary"
-                            :title="text.studyline_edit"
-                            @ok="editLineFinish()"
-                            :ok-disabled="Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0"
-                            >
-                            <b-container>
-                                <b-row>
-                                    <b-col cols="3">{{ text.studyline_name}}</b-col>
-                                    <b-col>
+                            <div v-if="edit.studyline.editmode" class='t-studyline-add ml-2 mt-1'>
+                                <a href="#" v-b-modal="'modal-add-studyline-'+page.id" @click="false;"
+                                    ><i class='fa fa-plus'></i>{{ text.studyline_add }}</a>
+                            </div>
+                            <b-modal
+                                :id="'modal-add-studyline-'+page.id"
+                                size="lg"
+                                :ok-title="text.add$core"
+                                ok-variant="primary"
+                                :title="text.studyline_add"
+                                @ok="addStudyLine(page,create.studyline)"
+                                :ok-disabled="Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0"
+                                >
+                                <b-container>
+                                    <b-row>
+                                        <b-col cols="3">{{text.studyline_name}}</b-col>
+                                        <b-col>
+                                            <b-form-input v-model="create.studyline.name" :placeholder="text.studyline_name_ph"></b-form-input>
+                                        </b-col>
+                                    </b-row>
+                                    <b-row>
+                                        <b-col cols="3">{{text.studyline_shortname}}</b-col>
+                                        <b-col>
                                         <b-form-input
-                                            v-model="edit.studyline.data.name"
-                                            :placeholder="text.studyline_name_ph"></b-form-input>
-                                    </b-col>
-                                </b-row>
-                                <b-row>
-                                    <b-col cols="3">{{ text.studyline_shortname}}</b-col>
-                                    <b-col>
-                                    <b-form-input
-                                        v-model="edit.studyline.data.shortname"
-                                        :placeholder="text.studyline_shortname_ph"></b-form-input>
-                                    </b-col>
-                                </b-row>
-                                <b-row>
-                                    <b-col cols="3">{{ text.studyline_color}}</b-col>
-                                    <b-col>
-                                        <input type="color" v-model="edit.studyline.data.color" />
-                                    </b-col>
-                                </b-row>
-                            </b-container>
-                        </b-modal>
-                    </b-tab>
-                </b-tabs>
+                                            v-model="create.studyline.shortname"
+                                            :placeholder="text.studyline_shortname_ph"></b-form-input>
+                                        </b-col>
+                                    </b-row>
+                                    <b-row>
+                                        <b-col cols="3">{{text.studyline_color}}</b-col>
+                                        <b-col>
+                                            <input type="color" v-model="create.studyline.color" />
+                                            <!-- hsluv-picker v-model="create.studyline.color" horizontal displaysize="175" ></hsluv-picker -->
+                                        </b-col>
+                                    </b-row>
+                                </b-container>
+                            </b-modal>
+                            <b-modal
+                                :id="'modal-edit-studyline-'+page.id"
+                                size="lg"
+                                ok-variant="primary"
+                                :title="text.studyline_edit"
+                                @ok="editLineFinish()"
+                                :ok-disabled="Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0"
+                                >
+                                <b-container>
+                                    <b-row>
+                                        <b-col cols="3">{{ text.studyline_name}}</b-col>
+                                        <b-col>
+                                            <b-form-input
+                                                v-model="edit.studyline.data.name"
+                                                :placeholder="text.studyline_name_ph"></b-form-input>
+                                        </b-col>
+                                    </b-row>
+                                    <b-row>
+                                        <b-col cols="3">{{ text.studyline_shortname}}</b-col>
+                                        <b-col>
+                                        <b-form-input
+                                            v-model="edit.studyline.data.shortname"
+                                            :placeholder="text.studyline_shortname_ph"></b-form-input>
+                                        </b-col>
+                                    </b-row>
+                                    <b-row>
+                                        <b-col cols="3">{{ text.studyline_color}}</b-col>
+                                        <b-col>
+                                            <input type="color" v-model="edit.studyline.data.color" />
+                                        </b-col>
+                                    </b-row>
+                                </b-container>
+                            </b-modal>
+                        </b-tab>
+                    </b-tabs>
+                </b-card>
             </div>
             `
         });
@@ -2118,7 +2153,6 @@ export default {
                 :data-studyline="line.id" ref="main"
                 :style='spanCss'
                 ><drag v-if="item"
-
                     :key="item.id"
                     class="t-slot-item"
                     :data="item"
diff --git a/classes/form/studyplanpage_editform.php b/classes/form/studyplanpage_editform.php
index ec08846..1b570a6 100644
--- a/classes/form/studyplanpage_editform.php
+++ b/classes/form/studyplanpage_editform.php
@@ -240,7 +240,7 @@ class studyplanpage_editform extends formbase {
                         ]);
         }
 
-        /* Return the simple model of the page  to make sure we can update stuff.
+        /* Return the editor structure of the new / edited page
            Parse it through the clean_returnvalue function of exernal api (of which studyplanservice is a subclass)
            so we return it in a consistent way 
         */
diff --git a/classes/studyplanpage.php b/classes/studyplanpage.php
index b7b565b..94a6023 100644
--- a/classes/studyplanpage.php
+++ b/classes/studyplanpage.php
@@ -142,6 +142,40 @@ class studyplanpage {
 
     }
 
+    /** 
+     * Return description with all file references resolved
+     * @return string 
+     */
+    public function description() {
+        $text = file_rewrite_pluginfile_urls(
+            // The content of the text stored in the database.
+            $this->r->description,
+            // The pluginfile URL which will serve the request.
+            'pluginfile.php',
+        
+            // The combination of contextid / component / filearea / itemid
+            // form the virtual bucket that file are stored in.
+            \context_system::instance()->id, // System instance is always used for this
+            'local_treestudyplan',
+            'studyplanpage',
+            $this->id
+        );
+        return $text;
+    }
+
+    public function timing() {
+        $now = new \DateTime();
+        if ($now > $this->startdate) {
+            if ($this->enddate > 0 && $now > $this->enddate) {
+                return "past";
+            } else {
+                return "present";
+            }
+        } else {
+            return "future";
+        }
+    }
+
     /**
      * Webservice structure for basic info
      * @param int $value Webservice requirement constant
@@ -155,6 +189,7 @@ class studyplanpage {
             "description" => new \external_value(PARAM_RAW, 'description of studyplan page'),
             "startdate" => new \external_value(PARAM_TEXT, 'start date of studyplan'),
             "enddate" => new \external_value(PARAM_TEXT, 'end date of studyplan'),
+            "timing" => new \external_value(PARAM_TEXT, '(past|present|future)'),
             "perioddesc" => period::page_structure(),
         ], 'Studyplan page basic info', $value);
     }
@@ -169,9 +204,10 @@ class studyplanpage {
             'fullname' => $this->r->fullname,
             'shortname' => $this->r->shortname,
             'periods' => $this->r->periods,
-            'description' => $this->r->description,
+            'description' => $this->description(),
             'startdate' => $this->r->startdate,
             'enddate' => $this->r->enddate,
+            'timing' => $this->timing(),
             "perioddesc" => period::page_model($this),
         ];
     }
@@ -189,6 +225,7 @@ class studyplanpage {
             "periods" => new \external_value(PARAM_INT, 'number of periods in studyplan page'),
             "startdate" => new \external_value(PARAM_TEXT, 'start date of studyplan page'),
             "enddate" => new \external_value(PARAM_TEXT, 'end date of studyplan page'),
+            "timing" => new \external_value(PARAM_TEXT, '(past|present|future)'),
             "studylines" => new \external_multiple_structure(studyline::editor_structure()),
             "perioddesc" => period::page_structure(),
             ], 'Studyplan page full structure', $value);
@@ -205,10 +242,11 @@ class studyplanpage {
             'id' => $this->r->id,
             'fullname' => $this->r->fullname,
             'shortname' => $this->r->shortname,
-            'description' => $this->r->description,
+            'description' => $this->description(),
             'periods' => $this->r->periods,
             'startdate' => $this->r->startdate,
             'enddate' => $this->r->enddate,
+            'timing' => $this->timing(),
             'studylines' => [],
             "perioddesc" => period::page_model($this),
         ];
@@ -313,6 +351,7 @@ class studyplanpage {
             "periods" => new \external_value(PARAM_INT, 'number of slots in studyplan page'),
             "startdate" => new \external_value(PARAM_TEXT, 'start date of studyplan page'),
             "enddate" => new \external_value(PARAM_TEXT, 'end date of studyplan page'),
+            "timing" => new \external_value(PARAM_TEXT, '(past|present|future)'),
             "studylines" => new \external_multiple_structure(studyline::user_structure()),
             "perioddesc" => period::page_structure(),
         ], 'Studyplan page with user info', $value);
@@ -329,10 +368,11 @@ class studyplanpage {
             'id' => $this->r->id,
             'fullname' => $this->r->fullname,
             'shortname' => $this->r->shortname,
-            'description' => $this->r->description,
+            'description' => $this->description(),
             'periods' => $this->r->periods,
             'startdate' => $this->r->startdate,
             'enddate' => $this->r->enddate,
+            'timing' => $this->timing(),
             'studylines' => [],
             "perioddesc" => period::page_model($this),
         ];
diff --git a/lang/en/local_treestudyplan.php b/lang/en/local_treestudyplan.php
index cfe0b5a..b66cd20 100644
--- a/lang/en/local_treestudyplan.php
+++ b/lang/en/local_treestudyplan.php
@@ -114,7 +114,13 @@ $string["refreshteacherlist_name"] = "Refresh teacher's study plan list";
 $string["studyplan_add"] = 'Add study plan';
 $string["studyplan_edit"] = 'Edit study plan';
 $string["studyplan_remove"] = 'Remove study plan';
-$string["studyplan_confirm_remove"] = 'Are you sure you want to remove study plan {$a}?';
+$string["studyplan_confirm_remove"] = 'Are you sure you want to remove study plan page {$a}?';
+$string["studyplanpage"] = 'Study plan page';
+$string["studyplanpage_add"] = 'Add study plan page';
+$string["studyplanpage_edit"] = 'Edit study plan page';
+$string["studyplanpage_remove"] = 'Remove study plan page';
+$string["studyplanpage_confirm_remove"] = 'Are you sure you want to remove study plan page {$a}?';
+$string["studyplan_duration"] = 'Duration';
 $string["studyplan_name"] = 'Full name';
 $string["studyplan_name_ph"] = '';
 $string["studyplan_icon"] = "Image for this studyplan";
diff --git a/lang/nl/local_treestudyplan.php b/lang/nl/local_treestudyplan.php
index d08b4dc..0bd269d 100644
--- a/lang/nl/local_treestudyplan.php
+++ b/lang/nl/local_treestudyplan.php
@@ -112,6 +112,12 @@ $string["studyplan_add"] = 'Nieuw studieplan';
 $string["studyplan_edit"] = 'Studieplan bewerken';
 $string["studyplan_remove"] = 'Studieplan verwijderen';
 $string["studyplan_confirm_remove"] = 'Weet je zeker dat je studieplan {$a} wilt verwijderen?';
+$string["studyplanpage"] = 'Studieplan-tabblad';
+$string["studyplanpage_add"] = 'Nieuw studieplan-tabblad';
+$string["studyplanpage_edit"] = 'Studieplan-tabblad bewerken';
+$string["studyplanpage_remove"] = 'Studieplan-tabblad verwijderen';
+$string["studyplanpage_confirm_remove"] = 'Weet je zeker dat je studieplan-tabblad {$a} wilt verwijderen?';
+$string["studyplan_duration"] = 'Duur';
 $string["studyplan_name"] = 'Volledige Naam';
 $string["studyplan_name_ph"] = '';
 $string["studyplan_icon"] = "Afbeelding for this studyplan";
diff --git a/lib.php b/lib.php
index f1e7b62..6875b75 100644
--- a/lib.php
+++ b/lib.php
@@ -25,6 +25,7 @@
 
 use local_treestudyplan\local\helpers\webservicehelper;
 use \local_treestudyplan\studyplan;
+use local_treestudyplan\studyplanpage;
 
 /**
  * Describe editor options
@@ -457,6 +458,40 @@ function local_treestudyplan_pluginfile(
             return false;
         }
 
+    } else if (in_array($filearea,["studyplanpage"])) {
+        // The args is an array containing [itemid, path].
+        // Fetch the itemid from the path.
+        $itemid = array_shift($args);
+
+        $page = studyplanpage::find_by_id($itemid);
+        $plan = $page->studyplan();
+        $planctx = $plan->context();
+
+        // Check if the current user has access to this studyplan
+        if ( webservicehelper::has_capabilities($studyplan_filecaps,$planctx) || $plan->has_linked_user($USER)) {
+            // Extract the filename / filepath from the $args array
+            $filename = array_pop($args); // The last item in the $args array.
+            if (empty($args)) {
+                // $args is empty => the path is '/'.
+                $filepath = '/';
+            } else {
+                // $args contains the remaining elements of the filepath.
+                $filepath = '/' . implode('/', $args) . '/';
+            }
+
+            // Retrieve the file from the Files API.
+            $fs = get_file_storage();
+            $file = $fs->get_file(\context_system::instance()->id, 'local_treestudyplan', $filearea, $itemid, $filepath, $filename);
+            if (!$file) {
+                // The file does not exist.
+                return false;
+            }
+            // We can now send the file back to the browser - in this case with a cache lifetime of 1 day and no filtering.
+            send_stored_file($file, 24*60*60, 0, $forcedownload, $options);
+        } else {
+            return false;
+        }
+
     } else if (in_array($filearea,['defaulticon'])) {
         // The args is an array containing [itemid, path].
         // Fetch the itemid from the path.
diff --git a/scss/studyplan.scss b/scss/studyplan.scss
index 6bed57a..f8f6221 100644
--- a/scss/studyplan.scss
+++ b/scss/studyplan.scss
@@ -1117,5 +1117,4 @@
         margin-bottom: auto;
         margin-left: 0.5em;
     }
-
 }
\ No newline at end of file