{{!
    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 mod_verbalfeedback/item_edit

    Moodle comment chooser template for marking guide.

    The purpose of this template is to render a list of frequently used comments that can be used by the comment chooser dialog.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * criterionId The criterion ID this chooser template is being generated for.
    * comments Array of id / description pairs.

    Example context (json):
    {
        "questionid": "1",
        "question": "",
        "questionTypes": [
            {
                "typeVal": "1",
                "selected": true,
                "typeName": "Rated"
            },
            {
                "typeVal": "2",
                "selected": false,
                "typeName": "Remarks"
            }
        ]
    }
}}
<div class="container">
    <div class="form-group">
        <input id="verbalfeedbackid" type="hidden" value="{{verbalfeedbackid}}">
        <input id="question-id" type="hidden" value="{{questionid}}">
        <label for="question-input">
            {{#str}}questiontext, mod_verbalfeedback{{/str}} {{#pix }} req, core, {{#str}}requiredelement, form{{/str}} {{/pix }}
        </label>
        <div class="error-container"></div>
        <textarea class="form-control" id="question-input" placeholder="{{#str}}enterquestion, mod_verbalfeedback{{/str}}" cols="44" rows="5">{{ question }}</textarea>
    </div>
    <div class="form-group">
        <label for="question-type-select" class="accesshide">{{#str}}questiontype, mod_verbalfeedback{{/str}}</label>
        <select id="question-type-select" class="form-control custom-select">
        {{# questionTypes }}
            <option value="{{typeVal}}" {{# selected }}selected="selected"{{/selected}}>
                {{typeName}}
            </option>
        {{/ questionTypes }}
        </select>
    </div>
    <div class="form-group">
        <label for="question-category-select" class="accesshide">{{#str}}questioncategory, mod_verbalfeedback{{/str}}</label>
        <select id="question-category-select" class="form-control custom-select">
            {{# questionCategories }}
                <option value="{{categoryVal}}" {{# selected }}selected="selected"{{/selected}}>
                    {{categoryName}}
                </option>
            {{/ questionCategories }}
        </select>
    </div>
</div>
{{#js}}
    require(['jquery'], function($) {
        $('#question-input').focus();
    });
{{/js}}
