{{!
    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 gradingform_rubric/grades/grader/gradingpanel

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * instanceid: Instance of the module this grading form belongs too
    * criterion: A gradeable item in the Marking Guide
    * name: Name of the gradeable item
    * id: ID of the gradeable item
    * description: Description shown to students for this gradeable item
    * descriptionmarkers: Description shown to teachers for this gradeable item
    * maxscore: Max allowable assinable points for this item
    * score: Current score assigned to the learner for this item
    * remark: Text input for the teacher to relay to the student
    * hascomments: Flag for frequently used comments
    * comments: Array of frequently used comments
    * description: Description of a frequently used comment

    Example context (json):
    {
        "instanceid": "42",
        "criterion": [
            {
                "name": "Motivation",
                "id": 13,
                "description": "Show your motivation to rock climbing",
                "descriptionmarkers": "Does the student show interest in climbing?",
                "maxscore": 37,
                "score": 20,
                "remark": "That's great!",
                "hascomments": true,
                "comments": [
                    {"description": "Great work!"},
                    {"description": "You should really try it before jumping to conclusions"}
                ]
            }
        ]
    }
}}
<form id="gradingform_guide-{{uniqid}}">
  <input type="hidden" name="instanceid" value="{{instanceid}}">
  {{#criterion}}
    <div class="mb-1 criterion" data-gradingform-guide-role="criterion">
      <div class="d-flex flex-wrap align-items-center">

        <button
            class="btn btn-sm btn-info d-inline-flex w-100 mb-2 justify-content-between align-items-center"
            aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
            aria-expanded="false"
            data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
            data-toggle="collapse"
            type="button"
          >
            {{#str}}informationforcriterion, gradingform_guide, {{name}}{{/str}}
            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path>
              <circle cx="12" cy="9" r="1" fill="currentColor"></circle>
              <circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
            </svg>
        </button>
        <div class="collapse w-100" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-description">
            <div class="border p-3 mb-2 rounded">
                {{{description}}}
                {{#descriptionmarkers}}
                    <hr>
                    {{{descriptionmarkers}}}
                {{/descriptionmarkers}}
            </div>
        </div>

        <hr />
        <button class="criterion-toggle btn btn-sm btn-secondary d-inline-flex w-100 justify-content-between align-items-center"
                type="button"
                data-toggle="collapse"
                data-target="#criteria-{{id}}"
                aria-expanded="true"
                aria-controls="criteria-{{id}}">
                <span>{{name}}</span>
                <span class="collapsed-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 15.25L16.25 9.75H7.75L12 15.25Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span>
                </span>
                <span class="expanded-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 9.75L16.25 15.25H7.75L12 9.75Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span>
                </span>
        </button>
        <div class="collapse show border px-3 mt-2 w-100 rounded" id="criteria-{{id}}">
          <div class="form-group">
            <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
            <input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
              id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
              aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score"
              min="0" max="{{maxscore}}"
              aria-label="{{#str}}scoreforcriterion, gradingform_guide, {{name}}{{/str}}" style="width: 100px;">
            <span id="gradingform_guide-{{uniqid}}-help-{{id}}-score" aria-hidden="true" class="sr-only">{{!
              }}{{#str}}score_help, gradingform_guide, { "criterion":  {{# quote }}{{ name }}{{/ quote }}, "maxscore": {{# quote }}{{ maxscore }}{{/ quote }} }{{/str}}
            </span>
          </div>
          <div class="form-group ">
            <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
            <div class="input-group mb-3 form-inset form-inset-right">
              <textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
                  id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark"
                  aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-remark"
                  aria-label="{{#str}}additionalcommentsforcriterion, gradingform_guide, {{name}}{{/str}}"
                  data-gradingform-guide-role="remark"
                  rows="2"
                  data-max-rows="5"
                  data-auto-rows
                  >{{remark}}</textarea>
              {{#hascomments}}
                <button
                  class="btn btn-sm btn-info d-inline-flex w-100 mt-2 justify-content-between align-items-center text-left collapsed"
                  aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
                  aria-expanded="false"
                  data-toggle="collapse"
                  data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
                  type="button"
                >
                    <span>{{#str}}commentpickerforcriterion, gradingform_guide, {{name}}{{/str}}</span>
                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path>
                      <circle cx="12" cy="9" r="1" fill="currentColor"></circle>
                      <circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
                    </svg>
                </button>
              {{/hascomments}}
            </div>
            {{#hascomments}}
              <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments">
                <div data-gradingform_guide-frequent-comments="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">
                  <h5 class="mb-1">{{#str}}comments, gradingform_guide{{/str}}</h5>
                  <div class="list-group">
                    {{#comments}}
                      <button type="button" class="list-group-item list-group-item-action" data-gradingform_guide-role="frequent-comment">{{description}}</button>
                    {{/comments}}
                  </div>
                </div>
              </div>
            {{/hascomments}}
            <span id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" aria-hidden="true" class="sr-only">{{#str}}remark_help, gradingform_guide{{/str}}</span>
          </div>
        </div>

      </div>
    </div>
  {{/criterion}}
</form>
{{#js}}
require(['gradingform_guide/grades/grader/gradingpanel/comments', 'core/auto_rows'], function(Comments, AutoRows) {
  Comments.init('gradingform_guide-{{uniqid}}');
  AutoRows.init(document.getElementById('gradingform_guide-{{uniqid}}'));
});
{{/js}}
