{{!
    This file is part of Moodle - https://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 qtype_stack/questionreportquestion

    Template purpose and description.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * none

    Example context (json):
    {
    "question": {
        "name": "Question name",
        "text": "Text",
        "deployedseeds": true,
        "hasvariants": true,
        "vars": "a1 : 1+rand(6);"
    },
    "summary": {
        "prts": [
            {
                "prtname": "prt1",
                "graph_svg": "<svg><\/svg>",
                "graph_text": "<table><\/table>",
                "maxima": "maxima text",
                "sumout": "## prt1 (2)\n1 ( 50.00%); # = 0 | ATInt_generic. ATInt_var_SB_notSA. | prt1-1-F\n1 ( 50.00%); # = 0 | ATInt_generic. | prt1-1-F"
            }
        ],
        "tot": {
            "prt1": 2
        }
    },
    "notesummary": {
        "prts": [
            {
                "prtname": "prt1",
                "graph_svg": "<svg><\/svg>",
                "graph_text": "<table><\/table>",
                "sumout": "## prt1 (2)\n2 (100.00%); # = 0\n1 ( 50.00%); ATInt_generic.\n1 ( 50.00%); ATInt_generic. ATInt_var_SB_notSA.\n2 (100.00%); prt1-1-F\n\n"
            }
        ]
    },
    "variants": {
        "variants": [
            {
                "seed": 399724897,
                "notes": "<span><\/span>",
                "notessumout": "## prt1 (1)\n1 (100.00%); # = 0 | ATInt_generic. ATInt_var_SB_notSA. | prt1-1-F\n1 (100.00%); ans1:34; \n\n\n",
                "anssumout": "## ans1 (1)\n### score\n1 (100.00%); 34\n\n"
            },
            {
                "seed": 799651125,
                "notes": "<span><\/span>",
                "notessumout": "## prt1 (1)\n1 (100.00%); # = 0 | ATInt_generic. | prt1-1-F\n1 (100.00%); ans1:x-3; \n\n\n",
                "anssumout": "## ans1 (1)\n### score\n1 (100.00%); x-3\n\n"
            }
        ]
    },
    "inputs": {
        "inputs": "## ans1 (2)\n### score\n1 ( 50.00%); 34\n1 ( 50.00%); x-3\n\n"
    },
    "rawdata": {
        "rawdata": "\n# 4 (1)\n1 (100.00%); Seed: 399724897; ans1: 34 [score]; prt1: # = 0 | ATInt_generic. ATInt_var_SB_notSA. | prt1-1-F\n\n# 2 (1)\n1 (100.00%); Seed: 799651125; ans1: x-3 [score]; prt1: # = 0 | ATInt_generic. | prt1-1-F\n"
    },
    "quizzes": [
        {
            "quizcontextid": "102",
            "name": "Analysis input",
            "coursecontextid": "21",
            "coursename": "Course 1",
            "url": "ReportURL",
            "active": true
        }
    ],
    "general": {
        "testquestionlink": "DashboardURL",
        "previewquestionlink": "PreviewURL"
    }
  }
}}

<div class="qtype_stack_question_report">
    <!-- Dashboard and preview links -->

  <ul class="nav">
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="{{{general.testquestionlink}}}"><i class="fa fa-wrench"></i> {{#str}} runquestiontests, qtype_stack {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="{{{general.previewquestionlink}}}"><i class="fa fa-plus-circle"></i> {{#str}}questionpreview, qtype_stack {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="{{{general.editquestionlink}}}">{{#str}} editquestioninthequestionbank, qtype_stack {{/str}}</a>
    </li>
  </ul>
  <h2>{{#str}} basicquestionreport, qtype_stack {{/str}}</h2>

  <h2>{{question.name}}</h2>
  <p>{{#str}} version, qtype_stack {{/str}} {{question.version}}<p>

  <!-- Warn if variants not deployed -->
  {{^question.deployedseeds}}
    {{#hasvariants}}
      <p>{{#str}} questionnotdeployedyet, qtype_stack {{/str}}</p>
    {{/hasvariants}}
  {{/question.deployedseeds}}

  <!-- Choose quiz to analyze the results from -->
  <p>
    <span>
      {{#str}} analyzeresponsesnotes, qtype_stack {{/str}}:
    </span>
  </p>
  <p>
    <span>
      {{#str}} selectquiz, qtype_stack {{/str}}:
    </span>
    <select onChange="document.querySelector('[data-id=\'qa-loading\']').removeAttribute('hidden');window.location.href=this.value;">
      {{^summary}}
        <option value="#">Select an option</option>
      {{/summary}}
      {{#quizzes}}
        <option value="{{{url}}}" {{#active}} selected="selected" {{/active}}>
          {{coursename}} - {{name}}
        </option>
      {{/quizzes}}
    </select>
    <span data-id='qa-loading' hidden>
      {{#pix}}y/loading, core, {{#str}}loading, tool_lp{{/str}}{{/pix}}
    </span>
  </p>

  <!-- Tab headers -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link {{^summary}}active{{/summary}}" href="#question-pane" id="question-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="question-pane" aria-selected="{{^summary}}true{{/summary}}{{#summary}}false{{/summary}}">{{#str}} question, core {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link {{#summary}}active{{/summary}}" href="#summary-pane" id="summary-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="summary-pane" aria-selected="{{^summary}}false{{/summary}}{{#summary}}true{{/summary}}">{{#str}} summary, core {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="#split-pane" id="split-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="split-pane" aria-selected="false">{{#str}} splitsummary, qtype_stack {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="#variants-pane" id="variants-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="variants-pane" aria-selected="false">{{#str}} variants, qtype_stack {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="#inputs-pane" id="inputs-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="inputs-pane" aria-selected="false">{{#str}} inputs, qtype_stack {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="#rawdata-pane" id="rawdata-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="rawdata-pane" aria-selected="false">{{#str}} rawdata, qtype_stack {{/str}}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" href="#jsondata-pane" id="jsondata-tab" data-bs-toggle="tab" data-toggle="tab" role="tab" aria-controls="jsondata-pane" aria-selected="false">{{#str}} jsondata, qtype_stack {{/str}}</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane {{^summary}}active{{/summary}} mt-3" id="question-pane" role="tabpanel" aria-labelledby="question-tab">
      <h3>{{#str}} questiontext, qtype_stack {{/str}}</h3>
      <pre class="stack-ra-question">{{{question.text}}}</pre>
      <h3>{{#str}} questionvariables, qtype_stack {{/str}}</h3>
      <pre class="stack-ra-question">{{{question.vars}}}</pre>
    </div>
    <div class="tab-pane {{#summary}}active{{/summary}} mt-3" id="summary-pane" role="tabpanel" aria-labelledby="summary-tab">
      <h3>{{#str}} basicreportnotes, qtype_stack {{/str}}</h3>
      {{#summary.prts}}
        <div>
          <details>
            <summary class="stack-ra-report"><h4 style="display: inline-block">{{prtname}}</h4></summary>
            <pre class="questionvariables" style="display: inline-block">{{maxima}}</pre>
          </details>
        </div>
        <table>
          <tr>
            <td>{{{graph_svg}}}</td>
            <td>{{{graph_text}}}</td>
          </tr>
        </table>
        {{#sumout}}
        <pre>{{sumout}}</pre>
        {{/sumout}}
      {{/summary.prts}}
    </div>
    <div class="tab-pane mt-3" id="split-pane" role="tabpanel" aria-labelledby="split-tab">
      <h3>{{#str}} basicreportnotessplit, qtype_stack {{/str}}</h3>
        {{#notesummary.prts}}
          <h4>{{prtname}}</h4>
          <table>
            <tr>
              <td>{{{graph_svg}}}</td>
              <td>{{{graph_text}}}</td>
              
            </tr>
          </table>
          <pre>{{sumout}}</pre>
      {{/notesummary.prts}}
    </div>
    <div class="tab-pane mt-3" id="variants-pane" role="tabpanel" aria-labelledby="variants-tab">
      <h3>{{#str}} basicreportvariants, qtype_stack {{/str}}</h3>
      {{#variants.variants}}
        <h2 class="stack-collapse-header collapsed" data-bs-toggle="collapse" data-bs-target="[data-id='variant-{{seed}}']" data-toggle="collapse" data-target="[data-id='variant-{{seed}}']">
          {{seed}}
        </h2>
        <div data-id="variant-{{seed}}" class="collapse show">
          <pre>{{notessumout.sumheadline}}</pre>
        </div>
        <div data-id="variant-{{seed}}" class="collapse">
            <p style="display: inline-block">{{{notes}}}</p>
            <pre>{{notessumout.sumout}}</pre>
            <pre>{{anssumout}}</pre>
        </div>
      {{/variants.variants}}
    </div>
    <div class="tab-pane mt-3" id="inputs-pane" role="tabpanel" aria-labelledby="inputs-tab">
      <h3>{{#str}} basicreportinputsummary, qtype_stack {{/str}}</h3>
      <pre>{{inputs.inputs}}</pre>
    </div>
    <div class="tab-pane mt-3" id="rawdata-pane" role="tabpanel" aria-labelledby="rawdata-tab">
      <h3>{{#str}} basicreportraw, qtype_stack {{/str}}</h3>
      <pre>{{rawdata.rawdata}}</pre>
    </div>
    <div class="tab-pane mt-3" id="jsondata-pane" role="tabpanel" aria-labelledby="jsondata-tab">
      <h3>{{#str}} jsondata, qtype_stack {{/str}}</h3>
      <pre>{{jsondata.jsondata}}</pre>
    </div>
  </div>
</div>