{{!
    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_templatelibrary/list_templates_page

    Moodle template to the template library

    The purpose of this template is build the entire page for the template library (by including smaller templates).

    Classes required for JS:
    * none

    Data attributes required for JS:
    * data-region, data-field

    Context variables required for this template:
    * allcomponents - array of components containing templates. Each component has a name and a component attribute.

}}
<div data-region="list-templates">
    <form class="form-horizontal">
        <div class="control-group">
            <label for="selectcomponent" class="control-label">{{#str}}component, tool_templatelibrary{{/str}}</label>
            <div class="controls">
                <select id="selectcomponent" data-field="component">
                    <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
                    {{#allcomponents}}
                        <option value="{{component}}">{{name}}</option>
                    {{/allcomponents}}
                </select>
            </div>
        </div>
        <div class="control-group">
            <label for="search" class="control-label">{{#str}}search, tool_templatelibrary{{/str}}</label>
            <div class="controls">
                <input type="text" id="search" data-field="search"/>
            </div>
        </div>
    </form>
    <hr/>
    {{> tool_templatelibrary/search_results }}

    <hr/>
    {{> tool_templatelibrary/display_template }}

</div>
{{#js}}
    require(['tool_templatelibrary/search', 'tool_templatelibrary/display']);
{{/js}}