#Gocha#

{{!
    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 core_form/filetypes-browser

The template is used to render the content of the UI widget allowing the
    user to select individual file types or their groups.

Classes required for JS:
    * none

Data attributes required for JS:
    * none

Context variables required for this template:
    * groups
        * key
        * name
        * selectable
        * expanded
        * ext
        * types
            * key
            * name
            * selected
            * expanded
            * ext

Example context (json):
    {
        "groups": [
            {
                "key": "web_file",
                "name": "Web files",
                "selectable": true,
                "selected": false,
                "ext": ".css .html .xhtml .htm .js",
                "types": [
                    {
                        "key": ".css",
                        "name": "Cascading Style-Sheet",
                        "selected": true,
                        "ext": ".css"
                    },
                    {
                        "key": ".htm",
                        "name": "HTML text",
                        "selected": false,
                        "ext": ".htm .xhtml .html"
                    }
                ]
            },
            {
                "key": "web_audio",
                "name": "Web-safe audio files",
                "selectable": false,
                "selected": false,
                "ext": null,
                "types": [
                    {
                        "key": "audio/mp3",
                        "name": "Audio file (MP3)",
                        "selected": false,
                        "ext": ".mp3"
                    }
                ]
            }
        ]
    }
}}
<div data-filetypesbrowserbody="{{elementid}}" role="tree">
{{#groups}}
    <div data-filetypesbrowserkey="{{key}}" role="treeitem" aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}">
        <label>
            {{#selectable}}
            <input data-filetypesbrowserkey="{{key}}" type="checkbox" {{#selected}}checked{{/selected}}>
            <strong data-filetypesname="{{key}}">{{name}}</strong>
            <small class="muted" data-filetypesextensions="{{key}}">
                {{ext}}
            </small>
            {{/selectable}}
            {{^selectable}}
            <strong>{{name}}</strong>
            {{/selectable}}
        </label>
        {{#types.0}}
        {{! The tree provides its own accessibility controls, these two links are here for mouse users.
            For that reason, we hide them from assistive technologies. }}
        <small aria-hidden="true" data-filetypesbrowserfeature="hideifexpanded" class="pull-right float-right"><a href="#">{{#str}}expand{{/str}}</a></small>
        <small aria-hidden="true" data-filetypesbrowserfeature="hideifcollapsed" class="pull-right float-right"><a href="#">{{#str}}collapse{{/str}}</a></small>
        {{/types.0}}
        <ul class="unstyled list-unstyled" role="group">
            {{#types}}
            <li data-filetypesbrowserkey="{{key}}" style="margin-left: 2em" role="treeitem">
                <label>
                    <input data-filetypesbrowserkey="{{key}}" type="checkbox" {{#selected}}checked{{/selected}}>
                    <span data-filetypesname="{{key}}">{{name}}</span>
                    <small class="muted" data-filetypesextensions="{{key}}">
                        {{ext}}
                    </small>
                </label>
            </li>
            {{/types}}
        </ul>
        <hr style="clear:both">
    </div>
{{/groups}}
</div>