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

    Template for rendering the invitations 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 in the rest of the code.}}
{{= << >> =}}
<div class="local_treestudyplan_result_overview">
    <div 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>
            <h3><b>{{contextname}}</b> / {{studyplanname}}</h3>
            <h4 v-if="pagename != studplanname">{{pagename}}</h4>
            <div class='vue-loader' v-if='!structure'>
                <div class='spinner-border text-primary' role='status'>
                    <span class='sr-only'>Loading...</span>
                </div>
            </div>
            <template v-else>
                <div class='container q-pageperiodselection'>
                    <div class='row'>
                        <div class='col-sm-2 q-label'>{{text.page}}</div>
                        <div class='col-sm-6'>
                            <select class='custom-select' :value='page.id' @change='selectedPage'>
                                <template v-if='studyplan'>
                                    <option v-for='p in studyplan.pages'
                                        :key='p.id'
                                        :value='p.id'
                                        :selected='(page.id == p.id) ? true : false'
                                        >{{p.fullname}}</option>
                                </template>
                                <option v-else disabled>{{text.loading}}</option>
                            </select>
                        </div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-2 q-label' >{{text.period}} ({{text.from}} / {{text.to}})</div>
                        <div class='col-sm-2'>
                            <select class='custom-select' @change='selectedFirstPeriod'>
                                <template v-if='page'>
                                    <option v-for='p in page.perioddesc'
                                        :key='p.id'
                                        :value='p.period'
                                        :selected='(structure.firstperiod == p.period) ? true : false'
                                        >{{p.fullname}}</option>
                                </template>
                                <option v-else disabled>{{text.loading}}</option>
                            </select>
                        </div>
                        <div class='col-sm-2 '>
                            <select class='custom-select' @change='selectedLastPeriod'>
                                <template v-if='page'>
                                    <template v-for='p in page.perioddesc'>
                                        <option v-if='p.period >= structure.firstperiod'
                                            :key='p.id'
                                            :value='p.period'
                                            :selected='(structure.lastperiod == p.period) ? true : false'
                                            >{{p.fullname}}</option>
                                    </template>
                                </template>
                                <option v-else disabled>{{text.loading}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <q-studyplanreport :structure='structure' ></s-studyplanreport>
            </template>
        </div>
    </div>
</div>