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

    Teacher canvas

    Classes required for JS:
    * None

    Data attibutes required for JS:
    * None

    Context variables required for this template:
    * none

    Example context (json):
    {
    }
}}
<div data-region="teacher-canvas-content"
     data-userid="{{userid}}"
     data-username="{{userfullname}}"
     data-cmid="{{cmid}}"
     data-sid="{{sid}}"
     data-userimage="{{userimage}}"
     data-kuetid="{{kuetid}}"
     data-groupmode="{{groupmode}}"
     class="position-relative"
>
    <div class="row content-header">
        <div class="content-title col-12 col-md-3 col-lg-6">
            <h2>{{#str}}waitingroom, mod_kuet{{/str}}</h2>
            <small>{{#str}}waitingroom_info, mod_kuet{{/str}}</small>
            <div id="message-box"></div>
        </div>
        <div class="more-info-session col-12 col-md-9 col-lg-6">
            <div class="sessionname">
                {{#pix}}s/name, mod_kuet{{/pix}}
                <div class="sessionname-text">
                    {{#str}}session_name_placeholder, mod_kuet{{/str}}
                    <span>{{sessionname}}</span>
                </div>
            </div>
            <div class="numusers">
                {{#pix}}s/users, mod_kuet{{/pix}}
                <div class="countusers">
                    <span id="countusers">0</span>
                    <span class="participants">{{#str}}participants, mod_kuet{{/str}}</span>
                </div>
                {{#hasqrcodeimage}}
                    <div class="imageQr">
                        <div class="item">
                            <a href="#imageQr">
                                <img src="{{{urlqrcode}}}" />
                            </a>
                        </div>
                    </div>
                    <div class="lightboxes">
                        <div class="lightbox" id="imageQr">
                            <a href="#" class="close">&times;</a>
                            <div class="content">
                                <img src="{{{urlqrcode}}}" />
                            </div>
                        </div>
                    </div>
                {{/hasqrcodeimage}}
            </div>
        </div>
        <div class="session-controller col-12 col-md-12 col-lg-12 mt-3" data-region="session-controller">
            <button class="btn btn-secondary" data-action="back-session">
                {{#str}}end_session, mod_kuet{{/str}}
            </button>
            <button class="btn btn-primary disabled" data-action="init-session">
                {{#str}}init_session, mod_kuet{{/str}}
            </button>
            <button class="btn btn-primary disabled hidden" data-action="end-session">
                {{#str}}end_session, mod_kuet{{/str}}
            </button>
        </div>
    </div>
    <div class="col-12 participants forteacher" data-region="active-users">

    </div>
    <div data-region="teacher-canvas" class="d-flex">
        {{#waitingroom}}
            {{> mod_kuet/session/manual/waitingroom/teacher }}
        {{/waitingroom}}
    </div>
    <div class="d-none teacher-improvise-form" data-region="teacher-improvise">
        <div class="close-improvise bg-primary" data-action="close-improvise">
            {{#pix}}i/close, mod_kuet{{/pix}}
        </div>
        <h2 class="text-center">{{#str}}statement_improvising, mod_kuet{{/str}}</h2>
        <div class="improvise-form">
            <div class="form-group">
                <label for="statement">{{#str}}statement_improvise, mod_kuet{{/str}}</label>
                <input type="text" class="form-control" id="statement">
                <small id="statementHelp" class="form-text text-muted">{{#str}}statement_improvise_help, mod_kuet{{/str}}</small>
            </div>
            <div class="form-group">
                <label for="reply_improvise">{{#str}}reply_improvise, mod_kuet{{/str}}</label>
                <input type="text" class="form-control" maxlength="30" id="reply_improvise">
                <small id="statementHelp" class="form-text text-muted">{{#str}}reply_improvise_help, mod_kuet{{/str}}</small>
            </div>
            <button type="submit" data-action="submit-improvise" class="btn btn-primary">{{#str}}submit, mod_kuet{{/str}}</button>
        </div>
    </div>
    <div data-region="teacher-panel" class="d-none row">
        <div class="col-12 col-lg-4 container">
            <div class="resume-config" data-region="session-resume">
                <h6 class="titlecontainer bg-primary">
                    {{#pix}}i/settings, mod_kuet {{/pix}}
                    {{#str}}sessionconfiguration, mod_kuet{{/str}}
                </h6>
            </div>
        </div>
        <div class="col-12 col-lg-8 container">
            <div class="users-results">
                <h6 class="titlecontainer bg-primary">
                    {{#pix}} i/questions_list, mod_kuet {{/pix}}
                    {{#str}}results, mod_kuet{{/str}}
                </h6>
                <div class="list-results" data-region="list-results" data-sid="{{sid}}" data-cmid="{{cmid}}" data-courseid="{{courseid}}" data-groupmode="{{groupmode}}">
                    {{> mod_kuet/session/listresults }}
                </div>
            </div>
        </div>
    </div>
</div>

{{#js}}
    require(['mod_kuet/teachersockets'], function(Sockets) {
        Sockets.teacherInitSockets('[data-region="teacher-canvas-content"]', '{{socketurl}}', {{port}}, '{{sessionmode}}', {{groupmode}});
        /*window.onbeforeunload = function(e) {
            // 3IP review.
            e.returnValue = confirm(
            'Si sale de esta página se cerrará la conexión para todos los usuarios y perderá el' +
            ' progreso si ésta no ha finalizado. ¿Desea salir?'
        );
        };*/
    });
{{/js}}
