{{!
    This file is part of Moodle - https://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template local_treestudyplan/edit_plan

    Template for rendering the manage studyplans page

    Classes required for JS:
    * vue-loader

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * none

    Example context (json):
    {
    }
}}
{{! Next line replaces mustache double curly braces with << and >> for this template,
so it does not mess up vue double curly braces}}
{{= << >> =}}
<div class="local_treestudyplan_edit_plan t-studyplan-limit-width" id='root'>
    <div class='vue-loader' v-show='false'>
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div v-cloak>
        <div v-if='!activestudyplan && usedcontexts && !loadingstudyplan' class='ml-3 mb-3 s-context-selector'>
            <b-form-select :text='contextname' :value="contextid" @change='switchContext'
                :class="(!(usedcontexts.length)) ? 'text-primary' : ''">
                <b-form-select-option v-if='!(usedcontexts.length)' :value="contextid"
                    :class="'text-primary'">
                    <span>{{text.loading}}...</span></b-form-select-option>
                <b-form-select-option v-for='ctx in usedcontexts' :key='ctx.id' :value="ctx.context_id"
                    :class="(ctx.studyplancount > 0) ? 'font-weight-bold' : ''"
                ><span v-for="(p, i) in ctx.category.path"
                    ><span v-if="i>0"> / </span>{{ p }}</span> <span>({{ ctx.studyplancount }})</span>
                </b-form-select-option>
            </b-form-select>
            <div v-if="!(usedcontexts.length)"
                style="position: relative; top: 0.3rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem;"
                class="spinner-border text-primary" role="status"></div>

        </div>
        <h3 v-else>{{contextname}}</h3>
        <div class="m-buttonbar" style="margin-bottom: 1em;">
            <a href='#' v-if='activestudyplan' @click.prevent='closeStudyplan'
                ><i style='font-size: 150%;' class='fa fa-chevron-left'></i> {{text.back}}</a>
            <span v-if='activestudyplan'>{{text.studyplanSelect}}</span>&nbsp;
            <b-form-select v-if='activestudyplan' lazy :text='dropdownTitle' :value='activestudyplan.id' @change="selectStudyplan">
                <b-form-select-option
                    v-for='(studyplan, planindex) in studyplans'
                    :value="studyplan.id"
                    :key='studyplan.id'
                    >{{ studyplan.name }}</b-form-select-option>
            </b-form-select>&nbsp;
            <template v-if='!activestudyplan && !loadingstudyplan'>
                <t-studyplan-edit
                    @created="onStudyPlanCreated"
                    mode="create"
                    v-model="create.studyplan"
                    type="button"
                    variant="primary"
                    :default-aggregation="text.degaultaggregation"
                    :contextid='contextid'
                ><i class='fa fa-plus'></i> {{ text.studyplan_add }}</t-studyplan-edit>
                <b-button
                        variant='danger' href='#' role='presentation' @click="importStudyplan "
                    ><i class='fa fa-upload'></i> {{ text.advanced_import_from_file }}</b-button
                ><mform v-if="templatecount > 0"
                    name="studyplan_fromtemplateform"
                    :params="{contextid: contextid }"
                    @saved="onStudyPlanCreated"
                    variant="success"
                    type="button"
                    :title="text.advanced_import_from_file"
                    ><slot><i class='fa fa-clone'></i> {{ text.advanced_create_from_template }}</slot></mform>
            </template>
        </div>

        <div class='t-studyplan-container'>
            <t-studyplan
                v-if='activestudyplan'
                v-model='activestudyplan'
                @moved="movedStudyplan"
            ></t-studyplan>
            <div v-else-if='loadingstudyplan' class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div v-else class='t-studyplan-notselected'>
                <p>{{text.studyplanNoneselected}}</p>
                <b-card-group deck>
                    <s-studyplan-card
                        v-for='(studyplan, planindex) in studyplans'
                        :key='studyplan.id'
                        v-model='studyplans[planindex]'
                        open
                        ignoresuspend
                        @open='selectStudyplan(studyplan.id)'
                        >
                        <template #title>
                            <span class='s-studyplan-card-title-buttons'>
                                <t-studyplan-edit
                                    v-model="studyplans[planindex]"
                                    @moved="movedStudyplan"
                                    @input="refreshTemplateCount"
                                ></t-studyplan-edit>
                                <t-studyplan-associate v-model="studyplans[planindex]"></t-studyplan-associate>
                            </span>
                        </template>
                    </s-studyplan-card>
                </b-card-group>
            </div>
        </div>
    </div>
</div>