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

    Match 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 match question" data-region="match">
    <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 containt-answers" id="dragQuestion">
            <div class="left-side content-options" id="dragOption">
                {{#leftoptions}}
                    <div class="option option-left"
                         data-stems="{{optionkey}}"
                         data-questionid="{{questionid}}"
                         data-action="mark-left-option"
                    >
                        <div class="content-option bg-primary" id="{{optionkey}}-left-clickable">
                            <div class="feedback-icons">
                                <span class="feedback-icon correct">{{#pix}}q/correct, mod_kuet{{/pix}}</span>
                                <span class="feedback-icon incorrect">{{#pix}}q/incorrect, mod_kuet{{/pix}}</span>
                            </div>

                            <div class="content-option-text">
                                {{{ optiontext }}}
                            </div>
                        </div>
                        <div class="option-pointer drag-element" id="{{optionkey}}-draggable" draggable="true" data-forstems="{{optionkey}}">
                            <i class="fa fa-circle-o"></i>
                        </div>
                    </div>
                {{/leftoptions}}
            </div>
            <div class="canvasWrapper">
                <canvas id="canvas"></canvas>
                <canvas id="canvasTemp"></canvas>
            </div>
            <div class="right-side content-options" id="dropOption">
                {{#rightoptions}}
                    <div class="option option-right"
                         data-stems="{{optionkey}}"
                         data-questionid="{{questionid}}"
                         data-action="mark-right-option"
                    >
                        <div class="option-pointer drag-element drop-element" id="{{optionkey}}-dropzone" data-forstems="{{optionkey}}" data-key="{{key}}">
                            <i class="fa fa-circle-o"></i>
                        </div>
                        <div class="content-option bg-primary" id="{{optionkey}}-right-clickable">
                            <div class="content-option-text">
                                {{{ optiontext }}}
                            </div>
                        </div>
                    </div>
                {{/rightoptions}}
            </div>
        </div>
        <div class="col-12 containt-answers-mobile" id="selectQuestion">
            {{#leftoptions}}
                <div class="option option-left-mobile">
                    <div class="content-option-text-mobile">
                        {{{ optiontext }}}
                    </div>
                    <div class="d-flex align-items-center justify-content-start flex-nowrap">
                        <div class="feedback-icons" data-stems="{{optionkey}}">
                            <span class="feedback-icon correct">{{#pix}}q/correct, mod_kuet{{/pix}}</span>
                            <span class="feedback-icon incorrect">{{#pix}}q/incorrect, mod_kuet{{/pix}}</span>
                        </div>
                        <select class="custom-select content-options-right-mobile"
                                data-stems="{{optionkey}}"
                                data-questionid="{{questionid}}"
                                data-action="mark-left-option-mobile">
                            <option data-stems="default">{{#str}}choose, moodle{{/str}}</option>
                            {{#rightoptions}}
                                <option class="option-right-mobile"
                                        data-stems="{{optionkey}}"
                                        data-questionid="{{questionid}}"
                                        data-action="mark-right-option">
                                    {{{ optiontext }}}
                                </option>
                            {{/rightoptions}}
                        </select>
                    </div>
                </div>
            {{/leftoptions}}
        </div>
        <div class="col-12 hidden contain-group-message" data-region="group-message">
            <div class="text">
                {{#str}} alreadyanswered, mod_kuet {{/str}}
            </div>
        </div>
        {{^answered}}
            <div class="btn btn-primary ml-auto mt-3" data-action="send-match">
                {{#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/match'{{#hastime}}, 'mod_kuet/questiontimer'{{/hastime}}], function(Match{{#hastime}}, QuestionTimer{{/hastime}}) {
        Match.initMatch('[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}}