{{!
    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/view_plan

    Template for rendering the studyplan view 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_view_plan" 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' 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;">
            <template v-if="displayedstudyplan">
                <a href='#' @click.prevent='closeStudyplan'
                    ><i style='font-size: 150%;' class='fa fa-chevron-left'></i> {{text.back}}</a>
                <span>{{text.studyplanSelect}}</span>&nbsp;
                <b-form-select lazy :text='dropdownTitle' :value='displayedstudyplan.id'>
                    <b-form-select-option
                        v-for='(studyplan, planindex) in studyplans'
                        :key='studyplan.id'
                        @click='selectStudyplan(studyplan)'
                        :value='studyplan.id'
                        >{{ studyplan.name }}</b-form-select-option>
                </b-form-select>&nbsp;
                <s-studyplan-details
                    v-model="displayedstudyplan"
                    v-if="displayedstudyplan.description"
                ></s-studyplan-details>
                <div class="flex-grow-1"><!-- Spacer to align student selector right --></div>
                <div>
                    <span>{{text.selectstudentBtn}}</span>
                    <s-prevnext-selector
                        :options="associatedstudents"
                        title="firstname"
                        v-model="selectedstudent"
                        defaultselectable
                        grouped
                        optionsfield='users'
                        arrows
                        @change="showStudentView"
                        class="ml-2"
                        variant="primary"
                        >
                        <template v-slot="{value}">{{value.firstname}} {{value.lastname}}</template>
                        <template #defaultlabel><span class='text-primary'>{{text.showoverview}}</span></template>
                    </s-prevnext-selector>
                </div>
            </template>
        </div>
        <div class='t-studyplan-container'>
            <h2 v-if='displayedstudyplan&& selectedstudent'
                >{{selectedstudent.firstname}} {{selectedstudent.lastname}} - {{displayedstudyplan.name}}</h2>
            <h2 v-else-if='displayedstudyplan'>{{text.showoverview}} - {{displayedstudyplan.name}}</h2>
            <r-studyplan v-if='!loadingstudyplan && displayedstudyplan'
                         v-model='displayedstudyplan' :teachermode='!selectedstudent'
                ></r-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
                        @open='selectStudyplan(studyplan)'
                        ></s-studyplan-card>
                </b-card-group>
            </div>
        </div>
    </div>
</div>