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

    Question

    Classes required for JS:
    * None

    Data attibutes required for JS:
    * None

    Context variables required for this template:
    * none

    Example context (json):
    {
    }
}}
<div class="col-12 question-report" data-region="question-report">
    <!-- First data -->
    <div class="row">
        <div class="col-8 col-lg-8 container">
            <div class="question">
                <h6 class="titlecontainer bg-primary">
                    {{#pix}} i/questions_list, mod_kuet {{/pix}}
                    {{#str}}question, mod_kuet{{/str}}: {{position}} ({{type}})
                </h6>
                <div class="question-data" data-region="question-data">
                    <div class="question-data-body">
                        {{{questiontext}}}
                        <br>
                        {{^hasnoanswers}}
                            <h6 class="correct-answers-title">{{#str}}scored_answers, mod_kuet{{/str}}</h6>
                            <ul class="correct-answers">
                                {{#correctanswers}}
                                    <li>{{{response}}}{{#score}}: <b>{{.}}pt</b>{{/score}}</li>
                                {{/correctanswers}}
                            </ul>
                        {{/hasnoanswers}}
                        <div class="question-preview bg-primary" data-action="question-preview" data-sessionid="{{sessionid}}" data-questionnid="{{kid}}" data-cmid="{{cmid}}">
                            <span>{{#str}}preview, mod_kuet{{/str}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 col-lg-4 container">
            <div class="question-info">
                <h6 class="titlecontainer bg-primary">
                    {{#str}}student_number, mod_kuet{{/str}}: {{numusers}}
                </h6>
                <div class="question-info-data" data-region="question-info-data">
                    <div class="question-data-body">
                        <div class="alert alert-success mb-1" role="alert">
                            <b>{{ percent_correct }}{{#str}}percent_correct, mod_kuet{{/str}} ({{numcorrect}})</b>
                        </div>
                        <div class="alert alert-danger mb-1" role="alert">
                            <b>{{ percent_incorrect }}{{#str}}percent_incorrect, mod_kuet{{/str}} ({{numincorrect}})</b>
                        </div>
                        <div class="alert alert-light mb-1" role="alert">
                            <b>{{ percent_partially }}{{#str}}percent_partially, mod_kuet{{/str}} ({{numpartial}})</b>
                        </div>
                        <div class="alert alert-warning mb-0" role="alert">
                            <b>{{ percent_noresponse }}{{#str}}percent_noresponse, mod_kuet{{/str}} ({{numnoresponse}})</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Second data -->
    {{^ nostatistics }} {{^hasnoanswers}}
        <div class="row">
        <div class="col-12 col-lg-12 container">
            <div class="answers">
                <h6 class="titlecontainer bg-primary">
                    {{#pix}} i/questions_list, mod_kuet {{/pix}}
                    {{#str}}responses, mod_kuet{{/str}}: {{position}} ({{type}})
                </h6>
                <div class="answers-data" data-region="answers-data">
                    <div class="answers-data-body">
                        {{#answers}}
                            <div class="answer {{result}}">
                                <div class="answer-body">
                                    <div class="answer-left">
                                        <div class="result-icon">
                                            {{#resulticon}}
                                                {{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}
                                            {{/resulticon}}
                                        </div>
                                        <h5 class="answer-title">
                                            {{{ answertext }}}
                                        </h5>
                                    </div>
                                    <div class="answer-right">
                                        <div class="num-answers {{result}}">
                                            {{#usersicon}}
                                                {{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}
                                            {{/usersicon}}
                                            <span>{{numticked}}</span>
                                        </div>
                                        <div class="averagetime">
                                            {{#pix}}i/time, mod_kuet{{/pix}}
                                            <span>{{averagetime}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {{/answers}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{/hasnoanswers}} {{/nostatistics}}
    <!-- Ranking question data -->
    {{#hasranking}}
        <div class="col-12 col-lg-12 container">
            <div class="ranking-list">
                <h6 class="titlecontainer bg-primary">
                    {{#pix}} i/vote, mod_kuet {{/pix}}
                    {{#str}}ranking, mod_kuet{{/str}}
                </h6>
                <div class="ranking-users" data-region="ranking-users">
                    <div class="ranking-users-body d-table list-group" data-region="ranking_users">
                        <div class="d-table-row ranking-users-thead">
                            <div class="d-table-cell">{{#str}}participant, mod_kuet{{/str}}</div>
                            <div class="d-table-cell text-center">{{#str}}status, mod_kuet{{/str}}</div>
                            <div class="d-table-cell text-center">{{#str}}score, mod_kuet{{/str}}</div>
                            <div class="d-table-cell text-center">{{#str}}score_moment, mod_kuet{{/str}}</div>
                            <div class="d-table-cell text-center">{{#str}}time, mod_kuet{{/str}}</div>
                            <div class="d-table-cell text-center"></div>
                        </div>
                        {{#questionranking}}
                            <div class="d-table-row ranking-users-data user-item" data-userid="{{userid}}">
                                <div class="d-table-cell">
                                    <div class="participant" data-userid="{{userid}}">
                                        <a href="{{userprofileurl}}" target="_blank">
                                            <img src="{{userimage}}" alt="{{userfullname}}">
                                            <span class="user-fullname">
                                                {{userfullname}}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="d-table-cell text-center">
                                    <div class="{{response}}">
                                        <span>{{responsestr}}</span>
                                    </div>
                                </div>
                                <div class="d-table-cell text-center">{{userpoints}}</div>
                                <div class="d-table-cell text-center">{{score_moment}}</div>
                                <div class="d-table-cell text-center">{{time}}</div>
                                <div class="d-table-cell text-center actions">
                                    <span class="d-flex align-items-cente justify-content-center">
                                        <div class="mr-2" title="{{#str}}viewquestion_user, mod_kuet{{/str}}" data-action="seeanswer" data-userid="{{id}}" data-sessionid="{{sessionid}}" data-questionnid="{{questionnid}}" data-cmid="{{cmid}}">
                                            {{#pix}}i/preview, mod_kuet{{/pix}}
                                        </div>
                                        <a href="{{viewreporturl}}" title="{{#str}}viewreport_user, mod_kuet{{/str}}">
                                            {{#pix}}i/vote_gray, mod_kuet{{/pix}}
                                        </a>
                                    </span>
                                </div>
                            </div>
                        {{/questionranking}}
                        {{#questiongroupranking}}
                            <div class="d-table-row ranking-users-data user-item" data-groupid="{{id}}">
                                <div class="d-table-cell">
                                    <div class="participant" data-groupid="{{id}}">
                                        <a href="{{groupurl}}" target="_blank">
                                            {{#groupimage}}
                                                <img src="{{groupimage}}" alt="{{name}}">
                                            {{/groupimage}}
                                            <span class="user-fullname">
                                                {{name}}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="d-table-cell text-center">
                                    <div class="{{response}}">
                                        <span>{{responsestr}}</span>
                                    </div>
                                </div>
                                <div class="d-table-cell text-center">{{grouppoints}}</div>
                                <div class="d-table-cell text-center">{{score_moment}}</div>
                                <div class="d-table-cell text-center">{{time}}</div>
                                <div class="d-table-cell text-center actions">
                                    <span class="d-flex align-items-cente justify-content-center">
                                        <div class="mr-2" title="{{#str}}viewquestion_user, mod_kuet{{/str}}" data-action="seeanswer" data-userid="{{participantid}}" data-sessionid="{{sessionid}}" data-questionnid="{{questionnid}}" data-cmid="{{cmid}}">
                                            {{#pix}}i/preview, mod_kuet{{/pix}}
                                        </div>
                                        <a href="{{viewreporturl}}" title="{{#str}}viewreport_user, mod_kuet{{/str}}">
                                            {{#pix}}i/vote_gray, mod_kuet{{/pix}}
                                        </a>
                                    </span>
                                </div>
                            </div>
                        {{/questiongroupranking}}
                    </div>
                </div>
            </div>
        </div>
    {{/hasranking}}
</div>
<div class="download-report" data-region="download-report">
    <div class="row">
        {{{downloadquestionreport}}}
    </div>
</div>

{{#js}}
    require(['mod_kuet/question_report'], function(questionReport) {
        questionReport.questionReport('[data-region="question-report"]');
    });
{{/js}}
