{{!
    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 tool_lp/manage_competencies_page

    Manage competencies template.

    Classes required for JS:

    Data attibutes required for JS:
    * data-action=add
    * data-enhance=tree
    * data-region=term
    * data-region=selected-competency

    Example context (json):
    {
        "framework": {
            "description": "Framework",
            "id": 0
        },
        "competencies": [],
        "canmanage": false
    }
}}
<div data-region="managecompetencies">
<h2>
    {{{framework.shortname}}}
    {{#canmanage}}
            <a href="{{pluginbaseurl}}/editcompetencyframework.php?id={{framework.id}}&pagecontextid={{pagecontextid}}&return=competencies">{{#pix}}i/settings, core, {{#str}}editcompetencyframework, tool_lp{{/str}}{{/pix}}</a>
    {{/canmanage}}
</h2>
<div>{{{framework.description}}}</div>
    <h3>{{#str}}competencies, core_competency{{/str}}</h3>
    <div class="row">
        <div class="col-lg-6">
            <p>
                <form data-region="filtercompetencies" data-frameworkid="{{framework.id}}" class="d-flex flex-wrap align-items-center">
                    <div class="input-group mb-3">
                        <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
                        <input class="form-control" type="text" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
                        <div class="input-group-append">
                            <button class="btn btn-secondary">{{#pix}}a/search, , {{#str}}search{{/str}}{{/pix}}</button>
                        </div>
                    </div>
                </form>
            </p>
            <ul data-enhance="tree" class="competency-tree">
                {{> tool_lp/loading }}
            </ul>
        </div>

        <div class="col-lg-6">
            <div class="border p-2 mb-2">
                <div class="card-title">
                    <h4 data-region="selected-competency">{{#str}}selectedcompetency, tool_lp{{/str}}</h4>
                        <span data-region="competencyactionsmenu" class="float-sm-end">
                            <ul title="{{#str}}edit{{/str}}" class="competencyactionsmenu">
                                <li>
                                    <a href="#">{{#str}}edit{{/str}}</a><b class="caret"></b>
                                    <ul class="dropdown dropdown-menu">
                                    {{#canmanage}}
                                    <li class="dropdown-item">
                                        <a href="#" data-action="edit">
                                            {{#pix}}t/edit{{/pix}} {{#str}}edit{{/str}}
                                        </a>
                                    </li>
                                    <li class="dropdown-item">
                                        <a href="#" data-action="move">
                                            {{#pix}}t/move{{/pix}} {{#str}}movetonewparent, tool_lp{{/str}}
                                        </a>
                                    </li>
                                    <li class="dropdown-item">
                                        <a href="#" data-action="delete">
                                            {{#pix}}t/delete{{/pix}} {{#str}}delete{{/str}}
                                        </a>
                                    </li>
                                    <li class="dropdown-item">
                                        <a href="#" data-action="moveup">
                                            {{#pix}}t/up{{/pix}} {{#str}}moveup{{/str}}
                                        </a>
                                    </li>
                                    <li class="dropdown-item">
                                        <a href="#" data-action="movedown">
                                            {{#pix}}t/down{{/pix}} {{#str}}movedown{{/str}}
                                        </a>
                                    </li>
                                    {{/canmanage}}
                                    <li class="dropdown-item">
                                        <a href="#" data-action="linkedcourses">
                                            {{#pix}}t/viewdetails{{/pix}} {{#str}}linkedcourses, tool_lp{{/str}}
                                        </a>
                                    </li>
                                    {{#canmanage}}
                                    <li class="dropdown-item">
                                        <a href="#" data-action="relatedcompetencies">
                                            {{#pix}}t/add{{/pix}} {{#str}}addcrossreferencedcompetency, tool_lp{{/str}}
                                        </a>
                                    </li>
                                    <li class="dropdown-item">
                                        <a href="#" data-action="competencyrules">
                                            {{#pix}}t/edit{{/pix}} {{#str}}competencyrule, tool_lp{{/str}}
                                        </a>
                                    </li>
                                    {{/canmanage}}
                                </ul>
                            </li>
                        </ul>
                    </span>
                </div>
                <p data-region="competencyinfo">
                    {{#str}}nocompetencyselected, tool_lp{{/str}}
                </p>
                <div data-region="competencyactions">
                    {{#canmanage}}
                    <button class="btn btn-secondary" data-action="add">{{#pix}}t/add{{/pix}} <span data-region="term"></span></button>
                    {{/canmanage}}
                </div>
            </div>
        </div>
    </div>
</div>

{{#js}}
// Initialise the JS.
require(['tool_lp/tree', 'tool_lp/competencytree', 'tool_lp/competencyactions', 'jquery'],
        function(ariatree, treeModel, actions, $) {

    treeModel.init({{framework.id}},
                   {{#quote}} {{{framework.shortname}}} {{/quote}},
                   '{{search}}',
                   '[data-enhance=tree]',
                   {{canmanage}},
                   {{competencyid}});

    actions.init(treeModel, {{pagecontextid}}, '{{{framework.taxonomies}}}', {{{rulesmodules}}});

});
{{/js}}