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

    Modal to manage components within the Tiny Editor.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * data-key: The unique key identifying the widget.
    * data-insert: It identifies the way the widget is going to be inserted.
    * data-selectable: Whether the widget can be used in select mode or not.
    * data-category: The category of the button.
    * data-auto: Whether the filter is going to be applied automatically when editor opens.

    Context variables required for this template:
    * selectmode: It is true if some content is selected in Tiny.
    * elementid: The id of the element.
    * rid: The random id.
    * searchtext: The text to search.
    * categories: The categories of the widget.
    * showquickbuttons: Boolean used to decide whether to show or not ray buttons.

    Example context (json):
    {
        "selectmode": false,
        "elementid": "elementid",
        "rid": "rid",
        "searchtext": "search text",
        "categories": [
            {
                "name": "catname",
                "color": "100, 20%",
                "hidden": false,
                "buttons": [
                    {
                        "elementid": "elementid",
                        "widgetindex": "widgetindex",
                        "hidden": false,
                        "selectable": false,
                        "iconname": "iconname",
                        "disabled": false,
                        "widgettitle": "widget title",
                        "category": "Category",
                        "widgetkey": "widget key",
                        "widgetname": "widget name",
                        "isfilter": false,
                        "filterset": false,
                        "maincolclass": "col-10",
                        "iconHtml": "icon html"
                    }
                ]
            }
        ],
        "showquickbuttons": true
    }
}}
{{< core/modal }}
    {{$title}}
        {{#str}} dialogtitle, tiny_widgethub {{/str}}
    {{/title}}
    {{$body}}
        <div class="tiny_widgethub-container">
           <div class="tiny_widgethub-top input-group">
                <input type="text" name="widgethub_search_textfield" class="form-control w-50" placeholder="{{#str}} wsearch, tiny_widgethub {{/str}}" value="{{searchText}}">
                <button id="widget-clearfilter-btn{{rid}}" class="ml-1 tiny_widgethub-btn tiny_widgethub-btn-sm tiny_widgethub-btn-secondary" title="{{#str}} rmfilter, tiny_widgethub {{/str}}">
                    <span class="twh-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
                    </span>
                </button>
                <button id="widget-view-toggle-btn{{rid}}" class="ml-1 tiny_widgethub-btn tiny_widgethub-btn-sm tiny_widgethub-btn-secondary" title="{{#str}} toggleview, tiny_widgethub {{/str}}">
                    <span class="twh-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 72C0 49.9 17.9 32 40 32H88c22.1 0 40 17.9 40 40V120c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V72zM0 232c0-22.1 17.9-40 40-40H88c22.1 0 40 17.9 40 40V280c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V232zM128 392c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40V440c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V392zM160 72c0-22.1 17.9-32 40-32H248c22.1 0 40 17.9 40 40V120c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V72zM160 232c0-22.1 17.9-40 40-40H248c22.1 0 40 17.9 40 40V280c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V232zM288 392c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40V440c0 22.1 17.9 40 40 40H248c22.1 0 40-17.9 40-40V392zM320 72c0-22.1 17.9-32 40-32H408c22.1 0 40 17.9 40 40V120c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V72zM320 232c0-22.1 17.9-40 40-40H408c22.1 0 40 17.9 40 40V280c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V232zM448 392c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40V440c0 22.1 17.9 40 40 40H408c22.1 0 40-17.9 40-40V392z"/></svg>
                    </span>
                </button>
                <div class="tiny_widgethub-recent p-2">
                    {{#recent}}
                    <a href="javascript:void(0)" data-key="{{key}}" data-insert="recent"><span class="badge badge-secondary">{{name}}</span></a>
                    {{/recent}}
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-4" style="position: relative">
                    <ul id="{{rid}}_list" class="nav nav-pills flex-md-column">
                        {{#categories}}
                            <li class="nav-item">
                                <a class="nav-link" href="#{{rid}}_{{name}}">{{name}}</a>
                            </li>
                        {{/categories}}
                    </ul>
                    <div class="tiny_widgethub-preview" style="display: none;"></div>
                </div>
                <div class="col-md-8 pl-md-0 tiny_widgethub-categorycontainer"
                     data-spy="scroll" data-bs-spy="scroll" data-target="#{{rid}}_list" data-bs-target="#{{rid}}_list" data-offset="0" data-bs-offset="0">

                    <div class="tiny_widgethub-emptylist d-none"><span>{{#str}} emptylist, tiny_widgethub {{/str}}</span></div>
                    {{#categories}}
                    <div class="tiny_widgethub-category{{#hidden}} d-none{{/hidden}}"
                        style="border-left: 5px solid hsl({{color}}, 40%);background: hsl({{color}}, 90%);" id="{{rid}}_{{name}}">

                        <div class="tiny_widgethub-title" style="background: hsl({{color}}, 40%);color: hsl({{color}}, 90%);">{{name}}</div>

                        <div class="d-flex flex-column px-4 py-2">
                           {{#buttons}}
                                <div data-key="{{widgetkey}}"
                                    class="mb-1 tiny_widgethub-btn-group{{#hidden}} d-none{{/hidden}}{{#disabled}} tiny_widgethub-disabled{{/disabled}}"
                                    {{#selectable}} data-selectable="true"{{/selectable}}>
                                {{#isfilter}}
                                  <button class="col-2 tiny_widgethub-btn {{#filterset}}tiny_widgethub-btn-primary{{/filterset}} {{^filterset}}tiny_widgethub-btn-outline-primary{{/filterset}}" data-auto="{{filterset}}" title="Automatic">
                                    <span class="twh-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 0C49.7 0 64 14.3 64 32l0 16 69-17.2c38.1-9.5 78.3-5.1 113.5 12.5c46.3 23.2 100.8 23.2 147.1 0l9.6-4.8C423.8 28.1 448 43.1 448 66.1l0 279.7c0 13.3-8.3 25.3-20.8 30l-34.7 13c-46.2 17.3-97.6 14.6-141.7-7.4c-37.9-19-81.3-23.7-122.5-13.4L64 384l0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-80 0-66L0 64 0 32C0 14.3 14.3 0 32 0zM64 187.1l64-13.9 0 65.5L64 252.6 64 318l48.8-12.2c5.1-1.3 10.1-2.4 15.2-3.3l0-63.9 38.9-8.4c8.3-1.8 16.7-2.5 25.1-2.1l0-64c13.6 .4 27.2 2.6 40.4 6.4l23.6 6.9 0 66.7-41.7-12.3c-7.3-2.1-14.8-3.4-22.3-3.8l0 71.4c21.8 1.9 43.3 6.7 64 14.4l0-69.8 22.7 6.7c13.5 4 27.3 6.4 41.3 7.4l0-64.2c-7.8-.8-15.6-2.3-23.2-4.5l-40.8-12 0-62c-13-3.8-25.8-8.8-38.2-15c-8.2-4.1-16.9-7-25.8-8.8l0 72.4c-13-.4-26 .8-38.7 3.6L128 173.2 128 98 64 114l0 73.1zM320 335.7c16.8 1.5 33.9-.7 50-6.8l14-5.2 0-71.7-7.9 1.8c-18.4 4.3-37.3 5.7-56.1 4.5l0 77.4zm64-149.4l0-70.8c-20.9 6.1-42.4 9.1-64 9.1l0 69.4c13.9 1.4 28 .5 41.7-2.6l22.3-5.2z"/></svg>
                                    </span>
                                  </button>
                                {{/isfilter}}
                                <button data-title="{{widgettitle}}" data-category="{{category}}"
                                    class="{{maincolclass}} tiny_widgethub-btn tiny_widgethub-btn-outline-primary" data-insert="false">
                                        {{#disabled}}<span class="twh-icon tiny_widgethub-disabled">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
                                        </span>{{/disabled}}
                                        <span class="twh-icon twh-widget-icon">{{{iconHtml}}}</span>
                                        <span class="twh-label px-3" title="{{widgetname}}">{{widgetname}}</span>
                                </button>
                                {{#showquickbuttons}}
                                <button class="col-2 tiny_widgethub-btn tiny_widgethub-btn-outline-primary" data-insert="true" title="{{#str}} directinsert, tiny_widgethub {{/str}}">
                                    <span class="twh-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z"/></svg>
                                    </span>
                                </button>
                                {{/showquickbuttons}}
                                </div>
                            {{/buttons}}
                        </div>
                    </div>
                    {{/categories}}
                </div>
            </div>
        </div>
    {{/body}}
{{/ core/modal }}