{{!
    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": [],
       "haswunderbyte": true,
       "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"
       }
    }

}}

{{#warnings}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <i class="fa fa-exclamation-triangle mr-2" aria-hidden="true"></i>
    {{message}}
    <button type="button" class="close" data-dismiss="alert" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
{{/warnings}}

{{#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}}

{{! When local_wunderbyte_table is NOT installed: show only the app preview }}
{{^haswunderbyte}}
{{> mooduell/launch_preview }}
{{/haswunderbyte}}

{{! When local_wunderbyte_table is installed: show earmark-style vertical tabs }}
{{#haswunderbyte}}
<div class="mooduell-earmark-tabs d-flex align-items-start mt-4 gap-3">

    {{! Left vertical nav (earmarks) }}
    <ul class="nav flex-column nav-pills mooduell-earmark-nav" id="mooduellEarmarkNav" role="tablist" aria-orientation="vertical">
        <li class="nav-item mb-2" role="presentation">
            <a class="nav-link active" id="mooduell-tab-app" data-bs-toggle="tab" data-toggle="tab"
               href="#mooduell-pane-app" role="tab" aria-controls="mooduell-pane-app" aria-selected="true"
               title="{{#str}} app, mod_mooduell {{/str}}" aria-label="{{#str}} app, mod_mooduell {{/str}}">
                <i class="fa fa-mobile" aria-hidden="true"></i>
            </a>
        </li>
        <li class="nav-item mb-2" role="presentation">
            <a class="nav-link" id="mooduell-tab-statistics" data-bs-toggle="tab" data-toggle="tab"
               href="#mooduell-pane-statistics" role="tab" aria-controls="mooduell-pane-statistics" aria-selected="false"
               title="{{#str}} statistics, mod_mooduell {{/str}}" aria-label="{{#str}} statistics, mod_mooduell {{/str}}">
                <i class="fa fa-bar-chart" aria-hidden="true"></i>
            </a>
        </li>
        <li class="nav-item mb-2" role="presentation">
            <a class="nav-link" id="mooduell-tab-opengames" data-bs-toggle="tab" data-toggle="tab"
               href="#mooduell-pane-opengames" role="tab" aria-controls="mooduell-pane-opengames" aria-selected="false"
               title="{{#str}} opengames, mod_mooduell {{/str}}" aria-label="{{#str}} opengames, mod_mooduell {{/str}}">
                <i class="fa fa-gamepad" aria-hidden="true"></i>
            </a>
        </li>
        <li class="nav-item mb-2" role="presentation">
            <a class="nav-link" id="mooduell-tab-finishedgames" data-bs-toggle="tab" data-toggle="tab"
               href="#mooduell-pane-finishedgames" role="tab" aria-controls="mooduell-pane-finishedgames" aria-selected="false"
               title="{{#str}} finishedgames, mod_mooduell {{/str}}" aria-label="{{#str}} finishedgames, mod_mooduell {{/str}}">
                <i class="fa fa-flag-checkered" aria-hidden="true"></i>
            </a>
        </li>
        <li class="nav-item mb-2" role="presentation">
            <a class="nav-link" id="mooduell-tab-questions" data-bs-toggle="tab" data-toggle="tab"
               href="#mooduell-pane-questions" role="tab" aria-controls="mooduell-pane-questions" aria-selected="false"
               title="{{#str}} questions, mod_mooduell {{/str}}" aria-label="{{#str}} questions, mod_mooduell {{/str}}">
                <i class="fa fa-question-circle" aria-hidden="true"></i>
            </a>
        </li>
        <li class="nav-item mb-2" role="presentation">
            <a class="nav-link" id="mooduell-tab-highscores" data-bs-toggle="tab" data-toggle="tab"
               href="#mooduell-pane-highscores" role="tab" aria-controls="mooduell-pane-highscores" aria-selected="false"
               title="{{#str}} highscores, mod_mooduell {{/str}}" aria-label="{{#str}} highscores, mod_mooduell {{/str}}">
                <i class="fa fa-trophy" aria-hidden="true"></i>
            </a>
        </li>
    </ul>

    {{! Right tab content }}
    <div class="tab-content flex-fill pt-1" id="mooduellEarmarkContent">
        <div class="tab-pane fade show active" id="mooduell-pane-app" role="tabpanel" aria-labelledby="mooduell-tab-app">
            {{> mooduell/launch_preview }}
        </div>
        <div class="tab-pane fade" id="mooduell-pane-statistics" role="tabpanel" aria-labelledby="mooduell-tab-statistics">
            {{> mooduell/table_statistics_teacher }}
        </div>
        <div class="tab-pane fade" id="mooduell-pane-opengames" role="tabpanel" aria-labelledby="mooduell-tab-opengames">
            {{{opengames}}}
        </div>
        <div class="tab-pane fade" id="mooduell-pane-finishedgames" role="tabpanel" aria-labelledby="mooduell-tab-finishedgames">
            {{{finishedgames}}}
        </div>
        <div class="tab-pane fade" id="mooduell-pane-questions" role="tabpanel" aria-labelledby="mooduell-tab-questions">
            <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="mooduell-pane-highscores" role="tabpanel" aria-labelledby="mooduell-tab-highscores">
            {{{highscores}}}
        </div>
    </div>

</div>
{{/haswunderbyte}}

<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}}