{{!
    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:
    * name - The name of the grade item selector element
    * itemid - The value of the grade item selector element (id of the preselected grade item)
    * courseid - The course ID.
    * selectedoption - (optional) Object containing information about the selected option.
        * text - The text of the selected option.

    Example context (json):
    {
        "name": "itemid",
        "itemid": "21",
        "courseid": "2",
        "selectedoption": {
            "text": "Grade item 1"
        }
    }
}}
<div class="search-widget dropdown d-flex" data-searchtype="grade">
    <div
        tabindex="0"
        aria-expanded="false"
        role="combobox"
        aria-haspopup="dialog"
        aria-controls="dialog-{{uniqid}}"
        data-toggle="dropdown"
        class="btn dropdown-toggle d-flex text-left align-items-center p-0"
        data-courseid="{{courseid}}"
        aria-label="{{#cleanstr}} selectagrade, gradereport_singleview {{/cleanstr}}"
        data-input-element="input-{{uniqid}}"
    >
        <div class="align-items-center d-flex">
            {{#selectedoption}}
                <div class="d-block pr-3 text-truncate">
                    <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>
    </div>
    <div class="dropdown-menu wide" id="dialog-{{uniqid}}" role="dialog" aria-modal="true" aria-label="{{#cleanstr}} selectagrade, gradereport_singleview {{/cleanstr}}">
    </div>
    <input type="hidden" name="{{name}}" value="{{itemid}}" id="input-{{uniqid}}" />
</div>
