{{!
    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}}bg-info text-white{{/state.pending}}
                            {{#state.configured}}bg-success text-white{{/state.configured}}
                            {{#state.rejected}}bg-danger text-white{{/state.rejected}}
                            {{#state.unknown}}bg-warning text-dark{{/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}}
