{{!
    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 tiny_equation/modal_library

    Equation library template.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:

    Example context (json):
    {
        "elementid": "exampleId:1",
        "elementidescaped": "exampleId\\:1"
    }
}}
<div class="tiny_equation_library">
    <ul class="root nav nav-tabs mb-1" role="tablist">
        {{#libraries}}
            <li class="nav-item">
                <a class="nav-link{{#active}} active{{/active}}"{{!
                   }}{{#active}} aria-selected="true"{{/active}}{{!
                   }}{{^active}} aria-selected="false" tabindex="-1"{{/active}}{{!
                   }} href="#{{elementid}}_tiny_equation_group_{{key}}"{{!
                   }} data-target="#{{elementidescaped}}_tiny_equation_group_{{key}}"
                   role="tab" data-toggle="tab"
                >
                    {{groupname}}
                </a>
            </li>
        {{/libraries}}
    </ul>
    <div class="tab-content mb-1 tiny_equation_groups">
        {{#libraries}}
            <div data-medium-type="link" class="tab-pane{{#active}} active{{/active}}"
                 id="{{elementid}}_tiny_equation_group_{{key}}">
                <div role="toolbar">
                    {{#elements}}
                        <button class="btn btn-secondary tiny_equation_btn" data-tex="{{.}}" aria-label="{{.}}" title="{{.}}">
                            {{delimiters.start}} {{.}} {{delimiters.end}}
                        </button>
                    {{/elements}}
                </div>
            </div>
        {{/libraries}}
    </div>
</div>