{{!
    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 theme_moove/accessibilitybar

    Accessibility toolbar template

    Example context (json): {}
}}
<div id="accessibilitybar" class="fixed-top">
    <div class="container-fluid">
        <div class="bars">
            <div class="fontsize">
                <span>{{#str}}accessibility:fontsize, theme_moove{{/str}}</span>
                <ul>
                    <li><a class="btn btn-default" data-action="decrease" title="{{#str}}accessibility:decreasefont, theme_moove{{/str}}" id="fontsize_dec">A-</a></li>
                    <li><a class="btn btn-default" data-action="reset" title="{{#str}}accessibility:resetfont, theme_moove{{/str}}" id="fontsize_reset">A</a></li>
                    <li><a class="btn btn-default" data-action="increase" title="{{#str}}accessibility:increasefont, theme_moove{{/str}}" id="fontsize_inc">A+</a></li>
                </ul>
            </div>
            <div class="sitecolor">
                <span>{{#str}}accessibility:sitecolor, theme_moove{{/str}}</span>
                <ul>
                    <li><a class="btn btn-default" data-action="reset" title="{{#str}}accessibility:resetsitecolor, theme_moove{{/str}}" id="sitecolor_color1">R</a></li>
                    <li><a class="btn btn-default" data-action="sitecolor-color-2" title="{{#str}}accessibility:sitecolor2, theme_moove{{/str}}" id="sitecolor_color2">A</a></li>
                    <li><a class="btn btn-default" data-action="sitecolor-color-3" title="{{#str}}accessibility:sitecolor3, theme_moove{{/str}}" id="sitecolor_color3">A</a></li>
                    <li><a class="btn btn-default" data-action="sitecolor-color-4" title="{{#str}}accessibility:sitecolor4, theme_moove{{/str}}" id="sitecolor_color4">A</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

{{#js}}
    require(['theme_moove/accessibilitybar'], function(AccessibilityBar) {
        AccessibilityBar.init();
    });
{{/js}}