text: {{!
      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_lti/tool_card
  
      This template provides the layout for a single tool card on the tool
      configuration page.
  
      Classes required for JS:
      * none
  
      Data attributes required for JS:
      * none
  
      Context variables required for this template:
      * id
      * hascapabilitygroups
      * state
      ** pending|configured|rejected|unknown
      ** text
      * courseid
      * urls
      ** course - optional, required if courseid > 0
      ** icon
      ** edit
      ** publickeyset
      ** accesstoken
      ** authrequest
      * name
      * description
      * platformid
      * clientid
      * deploymentid
      * instancecount
  
      Example context (json):
      {
          "id": 1,
          "name": "Example Tool",
          "description": "This is an example tool",
          "platformid": "https:\/\/moodle.example.com",
          "courseid": 0,
          "hascapabilitygroups": false,
          "state": {
              "text": "Active",
              "pending": false,
              "configured": true,
              "rejected": false,
              "unknown": false
          },
          "urls": {
              "icon": "https://www.example.com/icon1.png",
              "edit": "https://www.example.com/mod/lti/typessettings.php",
              "publickeyset": "https:\/\/moodle.example.com\/mod\/lti\/certs.php",
              "accesstoken": "https:\/\/moodle.example.com\/mod\/lti\/token.php",
              "authrequest": "https:\/\/moodle.example.com\/mod\/lti\/auth.php"
          },
          "clientid": null,
          "deploymentid": 1,
          "instancecount": 0
      }
  
  }}
  <div class="tool-card" data-type-id="{{id}}" data-uniqid="{{uniqid}}"
      data-modaltitle="{{#str}} tooldetailsmodaltitle, mod_lti {{/str}}"
      data-mailtosubject="{{#str}} tooldetailsmailtosubject, mod_lti {{/str}}"
      data-platformidstr="{{#str}} tooldetailsplatformid, mod_lti {{/str}}"
      data-clientidstr="{{#str}} tooldetailsclientid, mod_lti {{/str}}"
      data-deploymentidstr="{{#str}} tooldetailsdeploymentid, mod_lti {{/str}}"
      data-publickeyseturlstr="{{#str}} tooldetailspublickeyseturl, mod_lti {{/str}}"
      data-accesstokenurlstr="{{#str}} tooldetailsaccesstokenurl, mod_lti {{/str}}"
      data-authrequesturlstr="{{#str}} tooldetailsauthrequesturl, mod_lti {{/str}}"
      data-platformid="{{platformid}}" data-clientid="{{clientid}}" data-deploymentid="{{deploymentid}}"
      data-publickeyseturl="{{urls.publickeyset}}" data-accesstokenurl="{{urls.accesstoken}}" data-authrequesturl="{{urls.authrequest}}">
      <div class="overlay-container">
          <div class="img-container">
              {{> mod_lti/loader }}
              <div class="success-icon-container">{{#pix}} i/valid, core, {{#str}} success {{/str}}{{/pix}}</div>
              <div class="fail-icon-container">{{#pix}} i/invalid, core, {{#str}} error {{/str}}{{/pix}}</div>
          </div>
          {{#hascapabilitygroups}}
              {{> mod_lti/tool_type_capabilities_agree }}
          {{/hascapabilitygroups}}
      </div>
      <div class="tool-card-content">
          <div class="tool-card-header">
              <div class="tool-card-subheader">
                  <div class="badge
                              {{#state.pending}}badge-info{{/state.pending}}
                              {{#state.configured}}badge-success{{/state.configured}}
                              {{#state.rejected}}badge-danger{{/state.rejected}}
                              {{#state.unknown}}badge-warning{{/state.unknown}}">
                      {{state.text}}
                  </div>
                  <div class="tool-card-actions float-sm-right">
                      {{#courseid}}
                          <a href="{{{urls.course}}}" title="{{#str}} courselink, mod_lti {{/str}}">{{#pix}} i/course, core, {{#str}} courselink, mod_lti {{/str}}{{/pix}}</a>
                      {{/courseid}}
                      {{#clientid}}
                      <a class="viewdetails" id="{{uniqid}}-{{deploymentid}}" href="#" title="{{#str}} tooldetailsmodallink, mod_lti {{/str}}">{{#pix}} t/viewdetails, core, {{#str}} tooldetailsmodallink, mod_lti {{/str}}{{/pix}}</a>
                      {{/clientid}}
                      <a class="edit" href="{{{urls.edit}}}" title="{{#str}} edit {{/str}}">{{#pix}} t/edit, core, {{#str}} edit {{/str}}{{/pix}}</a>
                      <a class="delete" href="#" title="{{#str}} delete {{/str}}">{{#pix}} t/delete, core, {{#str}} delete {{/str}}{{/pix}}</a>
                  </div>
              </div>
              <img class="tool-card-icon" src="{{{urls.icon}}}" alt="{{name}}">
              <div class="contenteditable-container">
                  <h4 class="name" contenteditable="true">{{name}}</h4>
                  <div class="overlay-container">{{> mod_lti/loader }}</div>
              </div>
          </div>
          <div class="tool-card-body">
              <div class="contenteditable-container">
                  <p class="description" contenteditable="true">{{description}}</p>
                  <div class="overlay-container">{{> mod_lti/loader }}</div>
              </div>
          </div>
          <div class="tool-card-footer">
              {{#state.pending}}
                  <a class="activate btn btn-success" href="#">{{#str}} activate, mod_lti {{/str}}</a>
              {{/state.pending}}
              {{^state.pending}}
                  {{#instancecount}}
                      <p>{{#str}} toolisbeingused, mod_lti, {{instancecount}} {{/str}}</p>
                  {{/instancecount}}
                  {{^instancecount}}
                      <p>{{#str}} toolisnotbeingused, mod_lti{{/str}}</p>
                  {{/instancecount}}
              {{/state.pending}}
          </div>
      </div>
  </div>
  {{#js}}
      require(['jquery', 'mod_lti/tool_card_controller'], function($, controller) {
          var cardElement = $('[data-type-id={{id}}]');
          controller.init(cardElement);
      });
  {{/js}}
  