{{!
    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_mooduell/overview_teachers
    Template which defines a mooduell view page.
    Classes required for JS:
    * none
    Data attributes required for JS:
    * none
    Context variables required for this template:
    * opengames - array
    * finishedgames - array
    * warnings - array: Array of warnings.
    * quizname - string
    * mooduellid - string
    * questions - array
    * highscores - array
    * categories - array
    * statistics - object

    Example context (json):
    {
       "opengames": [],
       "finishedgames": [],
       "warnings": [],
       "quizname": "test",
       "mooduellid": "409",
       "questions": [],
       "highscores": [],
       "categories": [],
       "statistics": {
          "courseid": "50",
          "number_of_active_users": "3",
          "number_of_games_started": "2",
          "number_of_games_finished": "0",
          "number_of_answers": "4",
          "percentage_of_correct_answers": false,
          "eq_id": false,
          "eq_name": "Wieviel ist 1 plus 1?",
          "eq_correct_count": 0,
          "hq_id": "5",
          "hq_name": "Wählen Sie alle FALSCHEN ANTWORTEN aus",
          "hq_incorrect_count": "1"
       }
    }

}}

<ul>
    {{#warnings}}
        <li>
            <h4 style="color: red">{{message}}</h4>
        </li>
    {{/warnings}}
</ul>

{{#users_without_capability.0}}
<div class="alert alert-warning" role="alert">
    <p><strong>{{#str}} caplistmissingrights, mod_mooduell {{/str}}</strong></p>
    <p>{{#str}} caplistdescription, mod_mooduell {{/str}}</p>
    <button class="btn btn-link btn-sm pl-0" type="button" data-bs-toggle="collapse" data-bs-target="#usersListCollapse" data-toggle="collapse" data-target="#usersListCollapse" aria-expanded="false" aria-controls="usersListCollapse">
        {{#str}} caplistuserlist, mod_mooduell {{/str}}<i class="fas fa-chevron-down"></i>
    </button>
    <div class="collapse" id="usersListCollapse">
        <ul>
            {{#users_without_capability}}
                <li>{{.}}</li>
            {{/users_without_capability}}
        </ul>
    </div>
</div>
{{/users_without_capability.0}}

{{#statistics}}
{{#str}} downloaduniviemoduell, mod_mooduell {{/str}}
<br>
<br>
<div class="container-fluid">
    <div class="row">
         <div class="col-md">
            <div class="row">
            {{#appstorelink}}
                <div class="col-md">
                    {{#str}} univiemooduellappstore, mod_mooduell {{/str}}
                </div>
                 <div class="col-md" style="display: flex; justify-content:center; align-items: center;">
                    <a href='{{appstorelink}}'><img style="width: 140px; max-width: 100%" alt='Download from Apple App Store' src='https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg'/></a>
                </div>
            {{/appstorelink}}
            </div>
            <div class="row">
            {{#playstorelink}}
                <div class="col-md">
                    {{#str}} univiemooduellplaystore, mod_mooduell {{/str}}
                </div>
                 <div class="col-md" style="display: flex; justify-content:center; align-items: center;">
                    <a href='{{playstorelink}}'><img style="width: 160px; max-width: 100%" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>
                </div>
            {{/playstorelink}}
            </div>
         </div>
          <div class="col-md" style="display: flex; justify-content:center; align-items: center; margin-bottom: 10px">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-toggle="modal" data-target="#exampleModal">
                {{#str}} showqr, mod_mooduell {{/str}}
            </button>
        </div>
    </div>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">QR Code Login</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md">
                                <h4>{{#str}} qrtitle, mod_mooduell {{/str}}</h4>
                                <p>{{#str}} qrdesc, mod_mooduell {{/str}}</p>
                                <p>{{#str}} qrshare, mod_mooduell {{/str}}</p>
                            </div>
                            {{#qrimage}}
                            <div class="col-md qrcol" style="text-align: center">
                                <img style="width:200px" src="{{qrimage}}" />
                                <div class="reloadcontainer" style="display: none">
                                    <p>{{#str}} reloadtext, mod_mooduell {{/str}}</p>
                                    <button type="button" class="btn btn-secondary btn-reload">{{#str}} reloadbutton, mod_mooduell {{/str}}</button>
                                </div>
                            </div>
                            {{/qrimage}}
                        </div>
                        <div class="modal-footer qrcode">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">{{#str}} close, mod_mooduell {{/str}}</button>
                        </div>
                    </div>
                </div>
            </div>
</div>
{{/statistics}}

<ul class="nav nav-tabs" id="mooduellTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="statistics-tab" data-bs-toggle="tab" data-toggle="tab" href="#statistics" role="tab" aria-controls="statistics" aria-selected="true"><h4>{{#str}}
            statistics, mod_mooduell {{/str}}</h4></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="opengames-tab" data-bs-toggle="tab" data-toggle="tab" href="#opengames" role="tab" aria-controls="opengames" aria-selected="true"><h4>{{#str}}
            opengames, mod_mooduell {{/str}}</h4></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="finishedgames-tab" data-bs-toggle="tab" data-toggle="tab" href="#finishedgames" role="tab" aria-controls="finishedgames" aria-selected="false"><h4>{{#str}}
            finishedgames, mod_mooduell {{/str}}</h4></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="questions-tab" data-bs-toggle="tab" data-toggle="tab" href="#questions" role="tab" aria-controls="questions" aria-selected="false"><h4>{{#str}}
            questions, mod_mooduell {{/str}}</h4></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="highscores-tab" data-bs-toggle="tab" data-toggle="tab" href="#highscores" role="tab" aria-controls="highscores" aria-selected="false"><h4>{{#str}} highscores, mod_mooduell {{/str}}</h4></a>
    </li>
</ul>

<div class="tab-content" id="mooduellTabContent">
    <div class="tab-pane fade show active" id="statistics" role="tabpanel" aria-labelledby="statistics-tab">
        {{> mooduell/table_statistics_teacher }}
    </div>
    <div class="tab-pane fade" id="opengames" role="tabpanel" aria-labelledby="opengames-tab">
        {{{opengames}}}
    </div>
    <div class="tab-pane fade" id="finishedgames" role="tabpanel" aria-labelledby="finishedgames-tab">
        {{{finishedgames}}}
    </div>
    <div class="tab-pane fade" id="questions" role="tabpanel" aria-labelledby="questions-tab">
        <ul>
        {{#categories}}
            <li>
                <a href="../../question/edit.php?courseid={{courseid}}&category={{catid}}%2C{{contextid}}">
                {{#str}} addquestionstocategory, mod_mooduell, {{catname}} {{/str}}
                </a>
            </li>
        {{/categories}}
        </ul>
        {{{questions}}}
    </div>
    <div class="tab-pane fade" id="highscores" role="tabpanel" aria-labelledby="highscores-tab">
        {{{highscores}}}
    </div>
</div>

<div class="d-flex justify-content-center" id="spinner">
    <div class="spinner-border hidden" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

{{#js}}
    require(['mod_mooduell/qrrefresh'], function(qr) {
    qr.init();
    });
{{/js}}