{{!
    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 gradereport_singleview/grade_item_selector

    The grade item selector trigger element.

    Context variables required for this template:
    * courseid - The course ID.
    * selectedoption - (optional) Object containing information about the selected option.
        * text - The text of the selected option.

    Example context (json):
    {
        "courseid": "2",
        "selectedoption": {
            "text": "Grade item 1"
        }
    }
}}
<div class="search-widget dropdown d-flex" data-searchtype="grade">
    <button aria-expanded="false" data-toggle="dropdown" class="btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" aria-label="{{#str}} selectagrade, gradereport_singleview {{/str}}">
        <div class="align-items-center d-flex">
            {{#selectedoption}}
                <div class="d-block pr-3">
                    <span class="d-block small">
                        {{#str}} selectagrade, gradereport_singleview {{/str}}
                    </span>
                    <span class="p-0 font-weight-bold">
                        {{text}}
                    </span>
                </div>
            {{/selectedoption}}
            {{^selectedoption}}
                <div class="user-info d-block pr-3">
                    {{#str}} selectagrade, gradereport_singleview {{/str}}
                </div>
            {{/selectedoption}}
        </div>
    </button>
    <div class="dropdown-menu wide">
    </div>
</div>
