{{!
    This file is part of Moodle - http://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 core_calendar/view_selector

    This template renders display dropdown.

    Example context (json):
    {
        "viewingmonth": true,
        "viewingday": false,
        "viewingupcoming": false
    }
}}
<div data-region="view-selector">
    <button id="calendarviewdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle ms-1 me-2 mb-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="d-sm-inline-block" data-active-item-text>
            {{#viewingmonth}}{{#str}} month {{/str}}{{/viewingmonth}}
            {{#viewingday}}{{#str}} day, core_calendar {{/str}}{{/viewingday}}
            {{#viewingupcoming}}{{#str}} upcomingevents, core_calendar {{/str}}{{/viewingupcoming}}
        </span>
    </button>
    <ul class="dropdown-menu" data-show-active-item aria-labelledby="calendarviewdropdown">
        <li>
            <a class="dropdown-item {{#viewingmonth}}active{{/viewingmonth}}" href="#" data-view="month"
                data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{date.mday}}" data-courseid="{{courseid}}" data-categoryid="{{categoryid}}">
                {{#str}} month {{/str}}
            </a>
        </li>
        <li>
            <a class="dropdown-item {{#viewingday}}active{{/viewingday}}" href="#" data-view="day" data-year="{{date.year}}" data-month="{{date.mon}}"
                data-day="{{date.mday}}" data-courseid="{{courseid}}" data-categoryid="{{categoryid}}">
                {{#str}} day, core_calendar {{/str}}
            </a>
        </li>
        <li>
            <a class="dropdown-item {{#viewingupcoming}}active{{/viewingupcoming}}" href="#" data-view="upcoming"
                data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{date.mday}}" data-courseid="{{courseid}}" data-categoryid="{{categoryid}}">
                {{#str}} upcomingevents, core_calendar {{/str}}
            </a>
        </li>
    </ul>
</div>