{{!
    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_grades/user_selector

    The user selector trigger element.

    Context variables required for this template:
    * name - The name of the user selector element
    * userid - The value of the user selector element (id of the preselected user)
    * courseid - The course ID.
    * groupid - The group ID.
    * selectedoption - (optional) Object containing information about the selected option.
        * image - The image corresponding to the selected option.
        * text - The text of the selected option.
        * additionaltext - (optional) Additional text displayed below the selected option (e.g. the user email)

    Example context (json):
    {
        "name": "userid",
        "userid": "21",
        "courseid": "2",
        "groupid": "2",
        "selectedoption": {
            "image": "<img src=\"http://example.com/pluginfile.php/14/user/icon/boost/f2\" class=\"userpicture\" width=\"40\" alt=\"\">",
            "text": "John Doe",
            "additionaltext": "johndoe@example.com"
        }
    }
}}
<div class="search-widget dropdown d-flex" data-searchtype="user">
    <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}}"
        data-groupid="{{groupid}}"
        aria-label="{{#cleanstr}} selectauser, core_grades {{/cleanstr}}"
        data-input-element="input-{{uniqid}}"
    >
        <div class="align-items-center d-flex">
            {{#selectedoption}}
                <div class="selected-option-img d-block mr-2" aria-hidden="true">
                    {{#image}}
                        {{{image}}}
                    {{/image}}
                    {{^image}}
                        <span class="userinitials"></span>
                    {{/image}}
                </div>
                <div class="selected-option-info d-block pr-3 text-truncate">
                    <span class="selected-option-text p-0 font-weight-bold">
                        {{text}}
                    </span>
                    {{#additionaltext}}
                        <span class="d-block small">
                            {{additionaltext}}
                        </span>
                    {{/additionaltext}}
                </div>
            {{/selectedoption}}
            {{^selectedoption}}
                <div class="d-block">
                    <span class="userinitials"></span>
                </div>
                <div class="user-info d-block pl-2 pr-3">
                    {{#str}} selectauser, core_grades {{/str}}
                </div>
            {{/selectedoption}}
        </div>
    </div>
    <div class="dropdown-menu wide" id="dialog-{{uniqid}}" role="dialog" aria-modal="true" aria-label="{{#cleanstr}} selectauser, core_grades {{/cleanstr}}">
    </div>
    <input type="hidden" name="{{name}}" value="{{userid}}" id="input-{{uniqid}}" />
</div>
