{{!
    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/>.

    Project implemented by the "Recovery, Transformation and Resilience Plan.
    Funded by the European Union - Next GenerationEU".
    Produced by the UNIMOODLE University Group: Universities of
    Valladolid, Complutense de Madrid, UPV/EHU, León, Salamanca,
    Illes Balears, Valencia, Rey Juan Carlos, La Laguna, Zaragoza, Málaga,
    Córdoba, Extremadura, Vigo, Las Palmas de Gran Canaria y Burgos
}}
{{!
    @template mod_kuet/numerical

    Numerical question

    Classes required for JS:
    * None

    Data attibutes required for JS:
    * None

    Context variables required for this template:
    * none

    Example context (json):
    {
    }
}}
<div class="container-fluid numerical question" data-region="numerical">
    <div class="row">
        <div class="content-indicators">
            {{#managesession}}
                <div class="users">
                    {{#pix}}q/users, mod_kuet{{/pix}}
                    <span class="numusers">{{ numusers }}</span>
                </div>
            {{/managesession}}
            {{#hastime}}
                <div class="timer {{^countdown}}d-none{{/countdown}}" data-region="question-timer">
                    {{#pix}}q/timer, mod_kuet{{/pix}}
                    <span class="seconds" data-region="seconds">{{ seconds }}</span>
                </div>
            {{/hastime}}
        </div>
        <div class="col-12 contain-statement" data-region="statement-text">
            <div class="statement-text">
                {{{ questiontext }}}
            </div>
        </div>
        <div class="col-12 hidden contain-group-message" data-region="group-message">
            <div class="text">
                {{#str}} alreadyanswered, mod_kuet {{/str}}
            </div>
        </div>
        <div class="col-12 containt-answers">
            <div class="form-group input-content">
                {{#unitdisplay}}
                    {{#unitsleft}}
                        <span class="units_title">{{#str}}unit, mod_kuet{{/str}}:</span>
                        {{#showunitsradio}}
                            <div class="btn-group btn-group-toggle" data-toggle="buttons" id="unitsContent">
                                {{#units}}
                                    <label class="btn btn-primary">
                                        <input type="radio" name="{{ unittext }}" {{#unitselected}}checked{{/unitselected}} data-multiplier="{{ multiplier }}" id="{{ unitid }}" autocomplete="off"> {{ unittext }}
                                    </label>
                                {{/units}}
                            </div>
                        {{/showunitsradio}}
                        {{#showunitsselect}}
                            <select class="custom-select" id="unitsContent">
                                {{#units}}
                                    <option value="{{ unittext }}" {{#unitselected}}selected{{/unitselected}} data-multiplier="{{ multiplier }}" id="{{ unitid }}">{{ unittext }}</option>
                                {{/units}}
                            </select>
                        {{/showunitsselect}}
                    {{/unitsleft}}
                {{/unitdisplay}}
                <label for="userNumerical" id="userNumericalLabel"></label>
                <input
                        class="form-control"
                        id="userNumerical"
                        {{#answered}}disabled="disabled"{{/answered}}
                        maxlength="80"
                        data-initial-value="{{numericalresponse}}"
                        value="{{numericalresponse}}"
                        pattern="[0-9]"
                >
                {{#unitdisplay}}
                    {{^unitsleft}}
                        <span class="units_title">{{#str}}unit, mod_kuet{{/str}}:</span>
                        {{#showunitsradio}}
                            <div class="btn-group btn-group-toggle" data-toggle="buttons" id="unitsContent">
                                {{#units}}
                                    <label class="btn btn-primary">
                                        <input type="radio" name="{{ unittext }}" {{#unitselected}}checked{{/unitselected}} data-multiplier="{{ multiplier }}" id="{{ unitid }}" autocomplete="off"> {{ unittext }}
                                    </label>
                                {{/units}}
                            </div>
                        {{/showunitsradio}}
                        {{#showunitsselect}}
                            <select class="custom-select" id="unitsContent">
                                {{#units}}
                                    <option value="{{ unittext }}" {{#unitselected}}selected{{/unitselected}} data-multiplier="{{ multiplier }}" id="{{ unitid }}">{{ unittext }}</option>
                                {{/units}}
                            </select>
                        {{/showunitsselect}}
                    {{/unitsleft}}
                {{/unitdisplay}}
                <div class="feedback-icons d-none">
                    <span class="feedback-icon correct">{{#pix}}q/correct, mod_kuet{{/pix}}</span>
                    <span class="feedback-icon partially">{{#pix}}q/partially, mod_kuet{{/pix}}</span>
                    <span class="feedback-icon incorrect">{{#pix}}q/incorrect, mod_kuet{{/pix}}</span>
                </div>
            </div>
            <small class="answer-help d-none" id="userNumericalHelp"></small>
        </div>
        {{^answered}}
            <div class="btn btn-primary ml-auto mt-3" data-action="send-response">
                {{#str}}send_response, mod_kuet{{/str}}
            </div>
        {{/answered}}
        {{> mod_kuet/questions/statistics }}
        <div class="col-12 containt-feedbacks bg-primary" data-region="containt-feedbacks">
            <div class="feedback-title">
                {{#pix}}q/feedback, mod_kuet{{/pix}}
                {{#str}}feedback, mod_kuet{{/str}}
            </div>
            <div class="content-feedbacks" data-region="content-feedback">
                <hr>
                <div class="content-feedback" data-region="statement-feedback">
                    {{#answered}}
                        {{{ statment_feedback }}}
                    {{/answered}}
                </div>
                <hr>
                <div class="content-feedback-answer" data-region="answer-feedback">
                    {{#answered}}
                        {{{ answer_feedback }}}
                    {{/answered}}
                </div>
            </div>
        </div>
        <div class="feedback-background" data-region="feedback-background"></div>
    </div>
</div>
{{#js}}
    require(['mod_kuet/numerical'{{#hastime}}, 'mod_kuet/questiontimer'{{/hastime}}], function(Numerical{{#hastime}}, QuestionTimer{{/hastime}}) {
        Numerical.initNumerical('[data-region="question-content"]',
            {{#showquestionfeedback}}true{{/showquestionfeedback}}{{^showquestionfeedback}}false{{/showquestionfeedback}},
            {{#programmedmode}}false{{/programmedmode}}{{^programmedmode}}true{{/programmedmode}}{{#answered}}, '{{{jsonresponse}}}'{{/answered}});
        {{#hastime}}
            {{^answered}}
                QuestionTimer.initQuestionTimer('[data-region="question-content"]');
            {{/answered}}
        {{/hastime}}
    });
{{/js}}