{{!
    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_c4l/modal

    Modal to manage components within the Tiny Editor.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:

    Example context (json):
    {
        "elementid": "exampleId",
        "filters" : [
            {"name": "Contextual"},
            {"type": "contextual"},
            {"filterClass": ""}
        ],
        "buttons": [
          {"id": "randomid"},
          {"imageClass": "c4l-classname"},
          {"name": "component name"},
          {"htmlcode": "<div>Text</div>"}
        ],
        "preview": "true"
    }
}}
{{< core/modal }}
    {{$title}}
        {{#str}} pluginname, tiny_c4l {{/str}}
    {{/title}}
    {{$body}}
        <div id="{{elementid}}" class="c4l-plugin-container">
            <div class="c4l-select-filters">
                <select class="c4l-select-filter" aria-controls="c4l-buttons-grid">
                    {{#filters}}
                        <option value="{{type}}">{{name}}</option>
                    {{/filters}}
                </select>
            </div>
            <div class="c4l-buttons-filters">
                {{#filters}}
                    <button class="c4l-button-filter {{filterClass}}" data-filter="{{type}}" aria-controls="c4l-buttons-grid">
                            {{name}}
                    </button>
                {{/filters}}
            </div>
            <div class="c4l-buttons-preview {{^preview}}c4l-no-preview{{/preview}}">
                <div id="c4l-buttons-grid" class="c4l-buttons-grid">
                    {{#buttons}}
                        <button
                            class="c4lt-dialog-button {{imageClass}}"
                            data-id="{{id}}"
                            data-type="{{type}}"
                            data-classcomponent="{{classComponent}}"
                        >
                            <span class="c4l-button-text">
                                {{#icon}}
                                    <i class="icon" style="background-image: url({{icon}});"></i>
                                {{/icon}}
                                {{{name}}}
                            </span>
                            <span class="c4l-button-variants">
                            {{#variants}}
                                <span
                                    class="c4l-button-variant {{imageClass}}"
                                    data-variant="{{name}}"
                                    data-state="{{state}}"
                                    data-toggle="tooltip"
                                    data-placement="top"
                                    title="{{title}}"
                                ></span>
                            {{/variants}}
                            </span>
                        </button>
                    {{/buttons}}
                </div>
                {{#preview}}
                    <div class="c4l-code-preview">
                        <div class="c4l-text-preview">{{#str}} preview, tiny_c4l {{/str}}</div>
                        <div data-id="code-preview-default">
                            <div class="c4l-preview-default">{{#str}} previewdefault, tiny_c4l {{/str}}</div>
                        </div>
                        {{#buttons}}
                            <div data-id="code-preview-{{id}}" class="c4l-component-code {{#css}}c4l-component-custom-code{{/css}} c4l-hidden" role="presentation" style="{{css}}">{{{htmlcode}}}</div>
                        {{/buttons}}
                    </div>
                {{/preview}}
            </div>
        </div>
    {{/body}}
{{/ core/modal }}
{{#js}}
    require(['jquery'], function($) {
      $('[data-toggle="tooltip"]').tooltip();
    });
{{/js}}
