{{!
    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/viewpage
    Template which defines a mooduell view page.
    Classes required for JS:
    * none
    Data attributes required for JS:
    * none
    Context variables required for this template:
    * statistics - array: An array with values.
    * opengames - array: empty array, will be filled with JS.
    * finishedgames - array: empty array, will be filled with JS.
    * highscores - array: empty array, will be filled with JS.

    Example context (json):
    {
       "opengames": [],
       "finishedgames": [],
       "warnings": [],
       "quizname": "test",
       "mooduellid": "409",
       "questions": [],
       "highscores": [],
       "categories": [
          {
             "catid": "7",
             "contextid": "1",
             "catname": "MooDuell Präsentation",
             "courseid": "50"
          }
       ],
       "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": "",
          "eq_correct_count": 0,
          "hq_id": "5",
          "hq_name": "Wählen Sie alle FALSCHEN ANTWORTEN aus",
          "hq_incorrect_count": "1"
       }
    }
}}
<h2>{{quizname}}</h2>

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


<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">
        <div id="opengamestable"></div>
    </div>
    <div class="tab-pane fade" id="finishedgames" role="tabpanel" aria-labelledby="finishedgames-tab">
        <div id="finishedgamestable"></div>
    </div>
    <div class="tab-pane fade" id="questions" role="tabpanel" aria-labelledby="questions-tab">
        {{> mooduell/table_questions_teacher }}
    </div>
    <div class="tab-pane fade" id="highscores" role="tabpanel" aria-labelledby="highscores-tab">
        <div id="highscorestable"></div>
    </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>