{{!
    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_verbalfeedback/report

    Moodle template to the template library

    The purpose of this template is build the entire page for the template library (by including smaller templates).

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * status
    * statusclass
    * scalelabels
    * ratedquestions
    * scales

    Example context (json):
    {
        "status": "In progress",
        "statusclass": "label-info",
        "ratedquestions": [
            { "questionid" : 1, "question": "Treats co-workers with courtesy and respect." },
            { "questionid" : 2, "question": "Has a positive attitude." },
            { "questionid" : 3, "question": "Has initiative needed without relying on co-workers unnecessarily." },
            { "questionid" : 4, "question": "Can capably lead projects effectively." },
            { "questionid" : 5, "question": "Possesses strong technical skills for their position." }
        ],
        "scales": [
            { "scale" : 1, "scalelabel": "1", "description": "Strongly disagree" },
            { "scale" : 2, "scalelabel": "2", "description": "Disagree" },
            { "scale" : 3, "scalelabel": "3", "description": "Somewhat disagree" },
            { "scale" : 4, "scalelabel": "4", "description": "Somewhat agree" },
            { "scale" : 5, "scalelabel": "5", "description": "Agree"},
            { "scale" : 6, "scalelabel": "6", "description": "Strongly agree" },
            { "scale" : 0, "scalelabel": "N/A", "description": "Not applicable" }
        ]
    }
}}
<div class="card">
    <div class="card-block p-1">
        <div class="row m-0">
            <div class="span6 col-6 text-left pl-1 pt-1 pb-1">
                {{#userselect}}{{> core/url_select }}{{/userselect}}
                {{#downloadselect}}{{/downloadselect}}
            </div>
            <div class="span6 col-6 text-right">
                {{#activitylink}}{{> core/action_link }}{{/activitylink}}
            </div>
        </div>
        <div class="row m-0 pl-0 pt-1 pb-1">
          <a class="btn btn-secondary ml-1" href="{{{reportdownloadurl}}}" target="_blank">Download report</a>
        </div>
    </div>
</div>
<div id="pdfreport" class="mt-3 card">
    <div class="card-body" data-region="status">
        <div class="mod-verbalfeedback-edit-content" data-region="itemlist">
            <div class="mod-verbalfeedback-edit-top-controls">
                <div class="statusbar row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-5">
                        <div class="row pl-1">
                          <table class="table table-sm table-bordered">
                            <tr>
                              <td>{{#str}}percentage, mod_verbalfeedback{{/str}}</td>
                              <td>{{ report.resultpercentage }}</td>
                            </tr>
                            <tr>
                              <td>{{#str}}weightedaverage, mod_verbalfeedback{{/str}}</td>
                              <td>{{ report.resultvsmax }}</td>
                            </tr>
                          </table>
                        </div>
                        <div class="row pl-1">
                          {{{ report.radar }}}
                        </div>
                    </div>
                </div>
            </div>
          <div class="p-1 row">
            <table class="table table-sm table-striped"
                   data-region="questionnaire"
                   data-verbalfeedbackid="{{verbalfeedbackid}}"
                   data-anonymous="{{anonymous}}"
                   data-fromuserid="{{fromuserid}}"
                   data-touserid="{{touserid}}"
                   data-tousername="{{tousername}}">
                {{# report.categories }}
                    <thead>
                    <tr class="user3 unselectedrow border-top">
                        <th class="pl-3">
                            <div class="row rtl-compatible">
                                <div class="col-12 span12">
                                    <b>{{ name }}</b>{{avg}}
                                </div>
                            </div>
                        </th>
                        <th colspan="3">
                          <span><b>{{#str}}weightedaverage, mod_verbalfeedback{{/str}}: {{average}}</b></span><br>
                          <span><b>{{#str}}categoryweight, mod_verbalfeedback{{/str}}: {{percentage}}</b></span>
                        </th>
                    </tr>
                    <tr class="user3 unselectedrow">
                        <td>
                        </td>
                        <td class="border left border-right">{{#str}}valuation, mod_verbalfeedback{{/str}}</td>
                        <td class="border-right">{{#str}}value, mod_verbalfeedback{{/str}}</td>
                        <td>{{#str}}factor, mod_verbalfeedback{{/str}}</td>
                    </tr>
                    </thead>
                    <tbody>
                    {{# criteria }}
                        <tr class="user3 unselectedrow" data-region="question-row" data-itemid="{{id}}"  data-categoryid="{{categoryid}}">
                            <td class="pl-3 border-bottom border-top">
                                <div class="row rtl-compatible">
                                    <div class="col-12">
                                        {{text}}
                                    </div>
                                </div>
                                {{# comments }}
                                <div class="row rtl-compatible" data-comment="student">
                                    <div class="col-12">
                                        <br>
                                        <strong>{{#str}}comments, mod_verbalfeedback{{/str}}:</strong>
                                        <ul class="list-group list-group-flush">
                                          {{# texts }}
                                            <li class="list-group-item">
                                              {{{.}}}
                                            </li>
                                          {{/texts}}
                                        </ul>
                                    </div>
                                </div>
                                {{/comments}}
                            </td>
                            <td class="border left border-right">{{scaletext}}</td>
                            <td class="border-right border-bottom border-top">{{averagerating}}</td>
                            <td class="border-bottom border-top">{{multiplier}}</td>
                        </tr>
                    {{/criteria}}
                    </tbody>
                {{/ report.categories }}
            </table>
        </div>
    </div>
  </div>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js ">-->
<!-- <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> -->